webpack code splitting with require.ensure doesn't work on the server side

[vbilici]

Hi,
I am trying to implement a lazy component loading system over the react-redux example. I built a lazy loading component which works perfectly fine on browser side. But if i try to load the route directly from server, node.js throws an error:

An unhandled exception occurred while processing the request. Exception: Call to Node module failed with error: Error: Cannot find module './1.webpack-output.js' at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Function.requireEnsure as e
at Object.getComponent (C:\Dev\tests\frontend-net-core\ClientApp\boot-server.js:230:34)
at getComponentsForRoute (C:\Dev\tests\frontend-net-core\node_modules\react-router\lib\getComponents.js:29:16)
at C:\Dev\tests\frontend-net-core\node_modules\react-router\lib\getComponents.js:41:5
at C:\Dev\tests\frontend-net-core\node_modules\react-router\lib\AsyncUtils.js:84:5
at Array.forEach (native)
MoveNext

and here is my router config:
`const rootRoute ={
component: Layout,

childRoutes: [
{
 path: '/',
 component: Home
 },
{
 path: '/counter',
 component: Counter 
 },
{
 path: '/fetchdata',
 component: FetchData ,
 childRoutes: [
{
 path: ':startDateIndex'
 }
 ]
 },
{
 path: '/lazy',
 getComponent(nextState, cb){
 require.ensure([],
 (require) =>{
 cb(null, require('./components/lazy').default);
 });
 }
 }
]

}`

I think this is a bug with the aspnet-webpack module but I couldn't be sure about it.

[SteveSandersonMS]

I think this is a bug with the aspnet-webpack module

If you can track down a specific bug, please let us know!

From this report I don't have reason to think there's any bug. It just sounds like your custom lazy-loading solution is going to need to account for running on the server in some way that's different from running on the client. In general they are not the same.

One good way of debugging your solution would be to try running Webpack so it builds the same code as it would build for server-side prerendering, but writing it to disk so you can inspect it. Then you might be able to figure out why your Webpack config isn't producing the correct output for code to be executed inside Node. See the "appendix" part of this comment for build instructions.

Hope this helps. Please do open another issue with details if you can identify a bug!

[vbilici]

Thank you @SteveSandersonMS for the reply. After a detailed study of the aspnet-webpack module now I understand better why this case fails.

Problem:
aspnet-webpack module uses the memory-fs as outputFileSystem. and return only the main chunk for executing. This ok if you are not using require.ensure but, if you try to require other chunks inside require.ensure, it tries to look to disk instead of memory. That's why it cannot find the module.

My solution:
in the LoadViaWebpack file inside aspnet-webpack module i added this:

 var compiler = webpack(webpackConfig);

 global.__webpackCompiler = compiler; //added line

 compiler.outputFileSystem = new MemoryFS();
 compiler.run(function (err, stats){
 ....

so i can access to memory-fs inside my custom require module.
But as you can see there are some caveats:

1. i have to modify LoadViaWebPack file and the changes will be lost on every new update
2. putting it to global may not be the best idea

Maybe compiler object can be exposed to boot-server file as a parameter?

Waiting for your opinions.
Thanks.

[vbilici]

Ok, I found another solution.
I split prerender config file from the default one and added define plugin:

webpack.config.ssr.js

 ...
 plugins: [
 ExtractCss,
 new ExternalsPlugin({type: 'commonjs', include: /node_modules/ }),
 new webpack.DefinePlugin({
 __DEV__: isDevelopment,
 __WEBPACK_SERVER__: true
 })
 ],
 ...

and in the code:
clientApp/routes.js

 ...
{
 path: '/lazy',
 getComponent(nextState, cb){
 debugger;
 if (__WEBPACK_SERVER__){
 cb(null, require('./componentsLazy/lazy').default);
 } else{
 require.ensure([],
 (require) =>{
 cb(null, require('./componentsLazy/lazy').default);

 });
 }

 }
 }

Views/Home/index.chtml:

<div id="react-app" asp-prerender-module="ClientApp/boot-server"
 asp-prerender-webpack-config="webpack.config.ssr.js"
 ">
 Loading...
</div>

Tested on development mode, production mode and published to IIS server.

But if you have a better solution please let me know.
Thanks.