MemoryFileSystemError about webpack-hot-server-middleware

[cescoferraro]

@richardsarrott That's what I am doing. I just created the express chunk to see if could bundle everything with webpack to get cool syntax, but you are right. It's not worth it.

[cescoferraro]

I changed app.use(webpackHotServerMiddleware(compiler)) to

app.use(webpackHotServerMiddleware(compiler, {
	chunkName: 'server'
}));

And now I get. Webpack HMR is working without it

TypeError: Cannot read property 'send' of undefined
    at default_1 (/home/cescoferraro/code/go/src/github.com/cescoferraro/spotify/www/server.bundle.js:59220:13)
    at getServerRenderer (/home/cescoferraro/code/go/src/github.com/cescoferraro/spotify/node_modules/webpack-hot-server-middleware/src/index.js:47:22)
    at MultiCompiler.multiCompiler.plugin.multiStats (/home/cescoferraro/code/go/src/github.com/cescoferraro/spotify/node_modules/webpack-hot-server-middleware/src/index.js:121:30)
    at MultiCompiler.applyPlugins (/home/cescoferraro/code/go/src/github.com/cescoferraro/spotify/node_modules/tapable/lib/Tapable.js:25:14)
    at MultiCompiler.<anonymous> (/home/cescoferraro/code/go/src/github.com/cescoferraro/spotify/node_modules/webpack/lib/MultiCompiler.js:76:10)
    at Compiler.applyPlugins (/home/cescoferraro/code/go/src/github.com/cescoferraro/spotify/node_modules/tapable/lib/Tapable.js:25:14)
    at Watching._done (/home/cescoferraro/code/go/src/github.com/cescoferraro/spotify/node_modules/webpack/lib/Compiler.js:93:17)
    at /home/cescoferraro/code/go/src/github.com/cescoferraro/spotify/node_modules/webpack/lib/Compiler.js:76:18
    at Compiler.emitRecords (/home/cescoferraro/code/go/src/github.com/cescoferraro/spotify/node_modules/webpack/lib/Compiler.js:350:37)
    at /home/cescoferraro/code/go/src/github.com/cescoferraro/spotify/node_modules/webpack/lib/Compiler.js:59:19
    at /home/cescoferraro/code/go/src/github.com/cescoferraro/spotify/node_modules/webpack/lib/Compiler.js:343:11
    at next (/home/cescoferraro/code/go/src/github.com/cescoferraro/spotify/node_modules/tapable/lib/Tapable.js:118:11)
    at Compiler.<anonymous> (/home/cescoferraro/code/go/src/github.com/cescoferraro/spotify/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:115:3)
    at Compiler.applyPluginsAsyncSeries1 (/home/cescoferraro/code/go/src/github.com/cescoferraro/spotify/node_modules/tapable/lib/Tapable.js:122:13)
    at Compiler.afterEmit (/home/cescoferraro/code/go/src/github.com/cescoferraro/spotify/node_modules/webpack/lib/Compiler.js:340:8)
    at Compiler.<anonymous> (/home/cescoferraro/code/go/src/github.com/cescoferraro/spotify/node_modules/webpack/lib/Compiler.js:335:14)

[richardscarrott]

@cescoferraro ah yeah, options.chunkName will allow you to specify the name of the server chunk if not using Webpack's default output name of 'main' -- been meaning to document that.

Looking at your second error I'd presume your server bundle is failing to call res.send -- perhaps because your server bundle is exporting middleware directly instead of exporting a function which in turn returns the middleware, i.e. export default (req, res, next) => res.send('Hello World.'); instead of export default () => (req, res, next) => res.send('Hello World.');?

[cescoferraro]

@richardscarrott head shot! export default () => (request, response) => {} did the trick!
webpack-hot-server-middleware is just what I wanted! Maybe you could answer my question on SO so more people could get to know great this piece of code is!

Another thing. The README production snippet seams to generate lots of errors on my setup.
https://github.com/60frames/webpack-hot-server-middleware/blame/master/README.md#L148-L152
Somewhy webpack does not like to bundle itself. and importing a webpack config file from the bundle ends up requiring webpack a lot. I had to keep the production/hmr files separated.

[richardscarrott]

@cescoferraro Glad to hear it's working for you! I'll reply to your SO question shortly :)

Re: the README production snippet -- I don't think your bundle should need to require 'webpack'? If you push up a repo I can review it to see what's going on.

[cescoferraro]

@richardscarrott const config = require('./webpack.config.js'); will always require webpack, unless you dont use any plugins like new webpack.NamedModulesPlugin()new webpack.NoErrorsPlugin() that would require you to require webpack.

I forgot the error I was getting. I will try again later today.
Here its my build: https://github.com/cescoferraro/spotify

[richardscarrott]

@cescoferraro there shouldn't be any need to bundle webpack.config.js either... I see you've got two entry points in your server webpack config, one for the server renderer middleware and another which is the express app itself -- the intention of the production snippet in the README is to only bundle the server renderer middleware and just run the non-bundled express app directly, e.g.

.
├── build
│   ├── client.bundle.js // renderToDom
│   └── server.bundle.js // renderToString
├── express.js
└── src
    ├── client.js // becomes client.bundle.js
    └── server.js // becomes server.bundle.js

Then you'd just run the non-bundled express.js (node express) which would mount the static server.bundle.js in production and webpack-dev-middleware / webpack-hot-server-middleware in development, i.e. the snippet from the README.

[richardscarrott]

@cescoferraro if you still want to use esNext / Typescript you could transpile your code using the babel cli / tsc without bundling, i.e. just convert express.ts into express.js etc.

[cescoferraro]

I ended up doing

const env = process.env.NODE_ENV || 'development';
entry: {
	server: [env === "production" ? "./src/server" : "./src/middleware"]
},

So with NODE_ENV=production I endup with a single server bundle with all the dependencies. Its especially good for docker, because instead of doing

FROM  mhart/alpine-node:6
RUN npm init -y
RUN npm i express morgan
WORKDIR /srv/spotify
ADD src/hot.js /srv/spotify/hot.js
ADD www/ /srv/spotify/www
CMD ["node","hot.js"]

I can

FROM  mhart/alpine-node:base-6
WORKDIR /srv/spotify
ADD www/ /srv/spotify/www
CMD ["node","www/server.bundle.js"]

For this the client/middleware/server.tsx files live inside the src dir while I keep a hot.js file on my root.
Not having hmr logic inside the app source code makes sense for me.