TypeError: serverRenderer is not a function

[arnoldjos]

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"

[ScriptedAlchemy]

Ahh I have seen this happen, I'm still not sure why it does this. There is a workaround though.

Let me test a few it out quickly

[ScriptedAlchemy]

Try creating a universalComponent file like this. There's an issue when universal tries to import itself.

The easy solution is to place the import in a utility file outside the directory you plan on importing

https://github.com/faceyspacey/universal-demo/tree/webpack-4/src

[threehams]

It's very likely an issue with webpack:
webpack/webpack#7516

webpack-hot-server-middleware expects a "main" chunk, but Webpack renames the chunk somewhat randomly when using LimitChunkCountPlugin. I have a PR to improve the error message for webpack-hot-server-middleware:
60frames/webpack-hot-server-middleware#75

This doesn't fix the issue, but it makes it more clear what's happening.

I have some work locally to infer the chunk name when there's only a single chunk, which would work around the Webpack issue. This would also rely on getting a PR merged into webpack-hot-server-middleware, though.

[ScriptedAlchemy]

I know a guy close to HOT stuff so I’ll ask him if he has an idea. In the meantime, just move the universal utility file up one directory so it doesn’t import it’s self. Check how I do it on the universal demo

[sharmam1]

@ScriptedAlchemy getting the same issue, even i kept my universal import outside of component directory

[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:
webpack/webpack#7516 (comment)

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 (webpack/webpack@18ae73d). 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],
  },
}

[ScriptedAlchemy]

@threehams thanks, this really was helpful!

[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.