MODULE_NOT_FOUND when running in development mode with SSR & webpack-hot-server-middleware

[skyuplam]

Hi there,

I have got the following error during the server side rendering in development mode.

{ Error: Cannot find module './vendors~account~general.chunk.js'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Function.requireEnsure [as e] (/srv/project/public/server/main.js:49:25)
    at loadable_components__WEBPACK_IMPORTED_MODULE_0___default.modules (webpack:///./src/components/index.js?:7:68)
    at Function.load (/srv/project/node_modules/loadable-components/src/loadable.js:26:44)
    at eval (webpack:///./node_modules/loadable-components/dist/loadable-components.server.cjs.js?:183:28)
    at walkTree (webpack:///./node_modules/loadable-components/dist/loadable-components.server.cjs.js?:113:13)
    at walkTree (webpack:///./node_modules/loadable-components/dist/loadable-components.server.cjs.js?:133:11)
    at walkTree (webpack:///./node_modules/loadable-components/dist/loadable-components.server.cjs.js?:133:11)
    at walkTree (webpack:///./node_modules/loadable-components/dist/loadable-components.server.cjs.js?:133:11)
    at eval (webpack:///./node_modules/loadable-components/dist/loadable-components.server.cjs.js?:158:13)
    at forEachSingleChild (/srv/project/node_modules/react/cjs/react.development.js:858:8)
    at traverseAllChildrenImpl (/srv/project/node_modules/react/cjs/react.development.js:762:5)
    at traverseAllChildrenImpl (/srv/project/node_modules/react/cjs/react.development.js:778:23) code: 'MODULE_NOT_FOUND' }

It seems to me that getLoadableState unable to get the chunk file in webpack-dev-middleware or has problem with the webpack-hot-server-middleware when code splitting is enabled in the server build.(?)

I am currently using a workaround by disabling the code splitting in the server build using limit-chunk-count-plugin, i.e.

new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })

[gregberge]

It is difficult to figure out what is the problem without your full project. I think files are missing and Webpack cannot find them. Since getLoadableState call the same load method on client and server, it should not cause any problem.

[skyuplam]

Okay, I have created a demo based on the example in this repo.

• demo

You can run the example as the following:

cd example 
yarn dev  # (npm run dev)

And then visit http://localhost:3000

[gregberge]

The problem is relative to webpack-hot-server-middleware it seems to not work with Code Splitting. You should ask help on this repository. If you remove it everything works.

[skyuplam]

Okay, I got it, and actually the code splitting can sololy be turned off in the server config by using LimitChunkCountPlugin plugin, as stated in my first post.