System.import w/ expression within a target=node bundle

I’m submitting a bug report

Background
I used Webpack 2 to bundle my SSR React app. I bundle both the client and the server (i.e. target=web|node).

Within my configuration I am trying to use the dynamic module imports feature to do code splitting on my routes (i.e. System.import('../components/App/views/' + viewName + '/index.js')) . This code will get run my the node bundle, which fails.

Webpack version:
2.1.0-beta.25

Please tell us about your environment:
Mac OS 10.11.6 || Windows 7
Node 6.6.0

Current behavior:
I get the following error when running my app:

TypeError: __webpack_require__.e is not a function
    at webpackAsyncContext (C:\Projects\ctrlplusb\react-universally\build\server\webpack:\src\shared\components\App\views async ^\.[\](\w|\s|-|_)*[\]index\.js$:14:1)
    at Object.getComponent (C:\Projects\ctrlplusb\react-universally\build\server\webpack:\src\shared\routes\index.js:35:5)
    at getComponentsForRoute (C:\Projects\ctrlplusb\react-universally\node_modules\react-router\lib\getComponents.js:29:16)
    at C:\Projects\ctrlplusb\react-universally\node_modules\react-router\lib\getComponents.js:41:5
    at C:\Projects\ctrlplusb\react-universally\node_modules\react-router\lib\AsyncUtils.js:84:5
    at Array.forEach (native)

Expected/desired behavior:
The System.import should resolve without an error.

Steps to reproduce:
I don’t have a “minimal” example, however I have a fairly minimal example in my boilerplate app:
https://github.com/ctrlplusb/react-universally

Run the following commands:

git clone https://github.com/ctrlplusb/react-universally
cd react-universally
git checkout tags/v4.1.0
cp .env_example .env
npm install
npm run development

Then open your browser, the default location is http://localhost:1337. You should see the error message I described above.

Here is the System.import expression:

      new webpack.ContextReplacementPlugin(
        /components[\/\\]App[\/\\]views$/,
        new RegExp(String.raw`^\.[\\\/](\w|\s|-|_)*[\\\/]index\.js$`)
      ),

Research I performed

  • It fails on a unix/windows machine.
  • I am running a ContextReplacementPlugin instance on the dynamic path to make the regex matching less greedy. I removed this thinking it may be causing the error but it had no effect.
  • When I introduced System.import statements that contained full paths, rather than a dynamic one (e.g. System.import('../components/App/views/Home/index.js') the application ran without errors on a Window system.
  • I created a simple client side only (i.e. target=web) app and placed a System.import containing a dynamic expression within this app. This also ran with no problem.

Language:
ES6/7

Author: Fantashit

1 thought on “System.import w/ expression within a target=node bundle

  1. Egg on my face!!!

    I am so sorry @sokra and @bebraw this is completely my fail.

    Erroneous webpack configuration causing the issue:

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

    Doh! Looks like this will override any attempt for a System.import to do dynamic chunking.

Comments are closed.