Cannot find module (on the server side)

[hrasoa]

Works on client, but cannot find module on server side:

.babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }],
    "es2015",
    "react",
    "stage-3"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

webpack.config

[{
  name: 'client',
  target: 'web',
  entry: {
    bundle: [
      'react-hot-loader/patch',
      'webpack-hot-middleware/client',
      'webpack/hot/only-dev-server',
      path.join(srcDir, 'index.js')
    ],
    vendor: vendor
  },
  output: {
    path: webpackProdConfig.output.path,
    chunkFilename: '[name].js',
    filename: '[name].js',
    publicPath: '/'
  }
  ...
},
{
  name: 'server',
  target: 'node',
  entry: path.resolve(__dirname, '../server/serverRenderer.js'),
  output: {
    path: webpackProdConfig.output.path,
    filename: '[name].js',
    chunkFilename: '[name].js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader', 'eslint-loader'],
        exclude: /node_modules/
      }
    ]
  }
  ...
}]

AsyncAbout/index.js

import { asyncComponent } from 'react-async-component';

export default asyncComponent({
  resolve: () => new Promise(resolve =>
    require.ensure([], (require) => {
      resolve(require('./About'));
    }, 'about')
  )
});

AsyncAbout/About.js

import React from 'react';

export default () => <h1>About</h1>;

Compilation output:

Child client:
    chunk    {0} post-page.js, post-page.js.map (post-page) 5.57 kB {2} [rendered]
    chunk    {1} about.js, about.js.map (about) 610 bytes {2} [rendered]
    chunk    {2} bundle.js, bundle.js.map (bundle) 305 kB {3} [initial] [rendered]
    chunk    {3} vendor.js, vendor.js.map (vendor) 1.22 MB [entry] [rendered]
Child server:
    chunk    {0} post-page.js (post-page) 5.57 kB {2} [rendered]
    chunk    {1} about.js (about) 610 bytes {2} [rendered]
    chunk    {2} main.js (main) 1.21 MB [entry] [rendered]
webpack: Compiled successfully.

Files are served with dev-server so they are not written to disk.

After navigating to http://localhost:3000/about, got this error on the server side:

Failed to resolve asyncComponent
{ Error: Cannot find module './about.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] (/var/www/public/main.js:41:25)
    at /var/www/public/main.js:18928:34
    at resolve (/var/www/public/main.js:18927:12)
    at getResolver (/var/www/public/main.js:25629:24)
    at AsyncComponent.resolveModule (/var/www/public/main.js:25719:16)
    at doResolve (/var/www/public/main.js:25671:25) code: 'MODULE_NOT_FOUND' }

[hrasoa]

Closing as this is related to webpack dev server configuration.

[Pranab16]

@hrasoa were you able to resolve it? I am facing the same problem with webpack-dev-middleware.

[hrasoa]

@Pranab16 I don't remember, but as what I see in code looks like the server config is wrong, it should compile only one file, not different chunks:

Child server:
    chunk    {0} post-page.js (post-page) 5.57 kB {2} [rendered]
    chunk    {1} about.js (about) 610 bytes {2} [rendered]
    chunk    {2} main.js (main) 1.21 MB [entry] [rendered]
webpack: Compiled successfully.

should render only:

Child server:
    chunk    {0} server.js
webpack: Compiled successfully.