TypeError: serverRenderer is not a function

When i set webpack.optimize.LimitChunkCountPlugin maxChunks to 1 my entry bundle is renamed to my universal-component chunkname and shows this error.

TypeError: serverRenderer is not a function at D:\MyProjects\Apps\Webpack-Course\MyBoilerplate\node_modules\webpack-hot-server-middleware\src\index.js:13:5 at D:\MyProjects\Apps\Webpack-Course\MyBoilerplate\node_modules\webpack-hot-server-middleware\src\index.js:175:61 at Layer.handle [as handle_request] (D:\MyProjects\Apps\Webpack-Course\MyBoilerplate\node_modules\express\lib\router\layer.js:95:5) at trim_prefix (D:\MyProjects\Apps\Webpack-Course\MyBoilerplate\node_modules\express\lib\router\index.js:317:13) at D:\MyProjects\Apps\Webpack-Course\MyBoilerplate\node_modules\express\lib\router\index.js:284:7 at Function.process_params (D:\MyProjects\Apps\Webpack-Course\MyBoilerplate\node_modules\express\lib\router\index.js:335:12) at next (D:\MyProjects\Apps\Webpack-Course\MyBoilerplate\node_modules\express\lib\router\index.js:275:10) at middleware (D:\MyProjects\Apps\Webpack-Course\MyBoilerplate\node_modules\webpack-hot-middleware\middleware.js:33:48) at Layer.handle [as handle_request] (D:\MyProjects\Apps\Webpack-Course\MyBoilerplate\node_modules\express\lib\router\layer.js:95:5) at trim_prefix (D:\MyProjects\Apps\Webpack-Course\MyBoilerplate\node_modules\express\lib\router\index.js:317:13) at D:\MyProjects\Apps\Webpack-Course\MyBoilerplate\node_modules\express\lib\router\index.js:284:7 at Function.process_params (D:\MyProjects\Apps\Webpack-Course\MyBoilerplate\node_modules\express\lib\router\index.js:335:12) at next (D:\MyProjects\Apps\Webpack-Course\MyBoilerplate\node_modules\express\lib\router\index.js:275:10) at goNext (D:\MyProjects\Apps\Webpack-Course\MyBoilerplate\node_modules\webpack-dev-middleware\lib\middleware.js:16:16) at processRequest (D:\MyProjects\Apps\Webpack-Course\MyBoilerplate\node_modules\webpack-dev-middleware\lib\middleware.js:63:26) at ready (D:\MyProjects\Apps\Webpack-Course\MyBoilerplate\node_modules\webpack-dev-middleware\lib\util.js:52:12)

specs: “webpack-dev-middleware”: “^3.1.3”, “webpack-hot-middleware”: “^2.22.2”, “webpack-hot-server-middleware”: “^0.5.0”, “babel-plugin-universal-import”: “^3.0.0”, “react-universal-component”: “^2.9.0”, “webpack”: “^4.16.0”

[threehams]

I linked to the Webpack bug above that causes this, but last night someone went further and tracked it down to the code which decides which chunk name wins when merging chunks: https://github.com/webpack/webpack/issues/7516#issuecomment-409140177

The shortest chunk name wins. If they’re the same length, then whatever chunk name wins a > comparison becomes the new name. This was done as part of an 8,000 line commit and wasn’t called out in the commit message, so it was likely just chosen arbitrarily (https://github.com/webpack/webpack/commit/18ae73dad4bb761593a9f5529a182601e1b57520). This explains why this seems to pop up randomly for some people and not others. I didn’t see it until I added a split point at a Home component.

A workaround is to use an entry point name short enough that it always wins in this comparison.

On dev server:

app.use(webpackHotServerMiddleware(compiler, { chunkName: "m" }));

Webpack server config:

// old
{
  entry: [entry],
}

// new
{
  entry: {
    m: [entry],
  },
}

[garrettmac]

im on the latest and just ran into this issue with these change, it must be my config with how im using webpack-dev-server. I just need to wait a bit and refresh when starting up my server.