Dynamically / lazily loaded chunks throw an error about webpack-hot-server-middleware

[amangeot]

I think I get a similar error when I import my files dynamically
It works fine with a static import:
import ExploreView from './containers/ExploreView'

but with a dynamic import:

import Loadable from 'react-loadable'
export const ExploreView = Loadable({
  loader: () => import(/* webpackChunkName: "explore" */ './containers/ExploreView'),
  loading: () => null,
})

Error: Cannot find module './2.serverRenderer.js'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Function.requireEnsure [as e] (C:\Users\Adrien\Documents\Dev\front-end-ssr\dist\server\webpack:\webpack\bootstrap 134319b5727946bc9a01:39:1)
at loader (C:\Users\Adrien\Documents\Dev\front-end-ssr\dist\server\webpack:\src\universal\routes\explore\index.js:9:17)
at C:\Users\Adrien\Documents\Dev\front-end-ssr\node_modules\react-loadable\lib\index.js:28:12
at capture (C:\Users\Adrien\Documents\Dev\front-end-ssr\node_modules\react-loadable\lib\index.js:21:17)
at load (C:\Users\Adrien\Documents\Dev\front-end-ssr\node_modules\react-loadable\lib\index.js:27:18)
at new LoadableComponent (C:\Users\Adrien\Documents\Dev\front-end-ssr\node_modules\react-loadable\lib\index.js:149:15)
at C:\Users\Adrien\Documents\Dev\front-end-ssr\node_modules\react-dom\lib\ReactCompositeComponent.js:294:18
at measureLifeCyclePerf (C:\Users\Adrien\Documents\Dev\front-end-ssr\node_modules\react-dom\lib\ReactCompositeComponent.js:75:12)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (C:\Users\Adrien\Documents\Dev\front-end-ssr\node_modules\react-dom\lib\ReactCompositeComponent.js:293:16)
at ReactCompositeComponentWrapper._constructComponent (C:\Users\Adrien\Documents\Dev\front-end-ssr\node_modules\react-dom\lib\ReactCompositeComponent.js:279:21)
at ReactCompositeComponentWrapper.mountComponent (C:\Users\Adrien\Documents\Dev\front-end-ssr\node_modules\react-dom\lib\ReactCompositeComponent.js:187:21)
at Object.mountComponent (C:\Users\Adrien\Documents\Dev\front-end-ssr\node_modules\react-dom\lib\ReactReconciler.js:45:35)

[StevenLangbroek]

(I'm investigating clearing the require cache after compile as an alternative solution)

[masad-frost]

As you can see in the start script. I have to run npm run build before npm run serve

[richardscarrott]

@masad-frost that link doesn't seem to work... I tried out the master branch however and can't reproduce that error, even when removing npm run build -- --env.server from npm run start... have you worked around the problem?

[masad-frost]

Weird, I'm still getting the same error, even made sure I reinstalled my node_modules.

I think maybe you didn't delete the dist folder after you removed npm run build -- --env.server?

Honestly prebuilding doesn't bother me that much, but I just finding intriguing and a bit worried there might be an underlying problem.

It could also be an Angular issue, where it doesn't properly resolve modules in memory files. Here's a pastebin when going to localhost:3000/lazy.

[masad-frost]

Seems like I found a solution for my problem but it only works for my Angular chunks. If I use module-map-ngfactory-loader it should solve my problem. That module resolves dynamically imported modules before starting the Angular server.

I'm not sure what you can do about import() and similar functions (i.e. react-loadable), but I'm sure there's a way to resolve them early if this becomes an issue. Maybe something likes this

let module;
if (process.BROWSER) {
  module = import('path-to-module');
} else {
  module = require('module');
}

[skyuplam]

I found the same error in smooth-code/loadable-components. Appearently it doesn't work with code splitting.

gregberge/loadable-components#74

[vovkasm]

Same problem. Root cause is that this module evaluated only entry from webpack's memory-fs. And evaluated code contains require('chunk-module-name'), but there is not such file, because it is exists only in webpack's memory-fs.
I plan to do some experiments with hook-in node require subsystem to allow loading from memory-fs, but not immediately, because of lack of free time now.
Fast hack seems to enable writing files on disk, something like:

app.use(devMiddleware(multiCompiler, { publicPath, serverSideRender: true, writeToDisk: true })) // <-- here
app.use(hotMiddleware(clientCompiler))
app.use(hotServerMiddleware(multiCompiler, { serverRendererOptions: { outputPath } }))

[clempat]

On our side we were using write-file-webpack-plugin. Which make this error disappear probably the same way as the solution above BUT now node does not refresh the bundles. I see the changes done in my output directory but not on the express response. @vovkasm are you getting the same issue ?

[vovkasm]

@clempat Yes, of course! Node will not reload files that required with same name... it cache all requires.

[StevenLangbroek]

Hey @vovkasm, colleague of @clempat here :). We tumbled down this rabbit-hole together. We found a working solution (we had a suspicion the require cache was the issue), adding a [hash] substitution to the output.filename, but that leaves us with another issue: massive build-up of amount of files on disk. Do you have any thoughts on how to automate clean-up in the hot-server middleware? Something like "hang on to old stats object, on compile clean-up references in there before propagating changes"?

[StevenLangbroek]

Alright, so I fixed the issue, but it's a rather brute-force approach:

• Add [hash] to output.filename for server, put them in an easily cleanable folder
• When creating multicompiler, find by name: server
• Hook into beforeCompile and rimraf the whole folder built to

2 questions:

1. Can anybody think of any unintended side-effects?
2. Can we incorporate this into this package? If not, I'd gladly contribute docs.

[vovkasm]

One note only. Clearing all files may be dangerous (depending on configuration), because other tools can generate files in the same folder.

I still think that proper way to handle this will be to inject custom require hook that can require files from memory-fs.

[StevenLangbroek]

I'm not even sure what's causing the issue tbh. It's not the require cache, as you're using require-from-string...

[StevenLangbroek]

I still think that proper way to handle this will be to inject custom require hook that can require files from memory-fs.

Yeah I definitely agree with this. Writing to file isn't exactly the way to go...

because other tools can generate files in the same folder.

The nice thing is that if it uses webpack, it'll be put back in place after a successful compile...

[StevenLangbroek]

@vovkasm Should we try to involve someone from webpack core to figure out the right way to do this?

[StevenLangbroek]

Any word on this @vovkasm? I'd love to help but am unsure how to continue...

[komlevv]

@masad-frost @richardscarrott this issue should probably stay open.

Getting same Error: Cannot find module '..' when using React.lazy(()=> import (...))

@vovkasm were you able to solve this?