moduscreateorg / react-dynamic-route-loading-es6

Auto chunking and dynamic loading of routes with React Router and Webpack 2

React Router Dynamic Route Loading w/ Webpack 2 Chunks

Webpack 2 automatically splits routes in chunks (small bundles) and loads them on demand.

See the demo

Contains

• Webpack 2.2
• React 0.15
• Babel 6.x

Features

• Tree shaking
• Code Splitting
• Hot Module Replacement
• ES6 Source debugging in Chrome with sourcemaps
• React Router
• Yarn-friendly

##System Requirements Before installing the dependencies, make sure your system has the correct Node and Npm versions, otherwise you will get errors.

• Node 6.x.x
• Npm 3.x.x

Setup

$ npm install

Running

$ npm start

Build

$ npm run build

react-dynamic-route-loading-es6's Issues

Why you export routes as a function

I don't understand, why routes.js as exported as an function?

nested route

How do you configured nested route? I tried this way

{
      path: 'dashboard/crud',
      getComponent(location, cb) {
        System.import('./entries/crud')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    },
    {
      path: 'dashboard/crud/:id',
      getComponent(location, cb) {
        System.import('./entries/crud')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    }

still got error of Warning: [react-router] Location "crud/5" did not match any routes

Getting "You may need an appropriate loader" error after adding external code dependency

Hi,

this is not an issue with the code in this repo but rather an issue with the next step for this solution. When trying to import an external code as a dependency, and then importing it in one of the routes I get the "You may need an appropriate loader" on the external code where it tries to return some JSX code, it seems like it doesn't recognise JSX code inside of that module that's brought in as a dependency, I'm not an expert on webpack so maybe there is an extra step that I'm missing here?

Any help?

Do you mind if I reference this?

I'm creating a video for Egghead.io about Webpack 2 code splitting and this was a great practical example of code splitting. This is what I have now. It's at the very end of my lesson: https://youtu.be/3H-xuMymSY0

Feedback on PRPL implementation

@grgur Nice work. Looking at the current Helmet branch, here's some quick feedback reading through the source:

It appears routes are being 'preloaded' through script but without using link rel='preload'. Pardon me if you're using it but I couldn't find it. One way to load scripts using preload would be with a pattern like this one. Alternatively, you could use HTML Webpack Plugin to inject preload directives into your pages.

PRPL also recommends precaching routes. The easiest way to get this setup with Webpack would either be using https://www.npmjs.com/package/sw-precache-webpack-plugin in your Webpack config or directly using sw-precache in your npm scripts (e.g after your app is built, just run it against the static directory).

Getting errors when I ran the project

Hi, I would like to help with server-rendering, but getting following errors when running the project.

ERROR in ./general.scss
Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/extract-text-webpack-plugin/loader.js?{"id":1,"omit":1,"remove":true}!style-loader!css-loader!sass-loader!/Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/general.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @charset "UTF-8";
| @import "./variables";
|

ERROR in ./components/List/list.scss
Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/extract-text-webpack-plugin/loader.js?{"id":1,"omit":1,"remove":true}!style-loader!css-loader!sass-loader!/Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/components/List/list.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "client/variables";
|
| .list {

ERROR in ./components/Header/header.scss
Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/extract-text-webpack-plugin/loader.js?{"id":1,"omit":1,"remove":true}!style-loader!css-loader!sass-loader!/Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/components/Header/header.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "client/variables";
|
| .header-container {

ERROR in ./containers/App/style.scss
Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/extract-text-webpack-plugin/loader.js?{"id":1,"omit":1,"remove":true}!style-loader!css-loader!sass-loader!/Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/containers/App/style.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .viewport {
|     margin-top:2.4em;
| }

ERROR in ./components/Toolbar/toolbar.scss
Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/extract-text-webpack-plugin/loader.js?{"id":1,"omit":1,"remove":true}!style-loader!css-loader!sass-loader!/Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/components/Toolbar/toolbar.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "client/variables";
|
| .navbar {

ERROR in ./components/Toolbar/toolbar.scss
Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/extract-text-webpack-plugin/loader.js?{"id":1,"omit":1,"remove":true}!style-loader!css-loader!sass-loader!/Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/components/Toolbar/toolbar.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "client/variables";
|
| .navbar {

ERROR in ./components/Toolbar/toolbar.scss
Module build failed: ModuleParseError: Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/components/Toolbar/toolbar.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "client/variables";
|
| .navbar {
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:207:34
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:164:10
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:365:3
    at iterateNormalLoaders (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:206:10)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:197:4
    at Storage.provide (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:53:20)
    at CachedInputFileSystem.readFile (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:160:24)
    at processResource (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:194:11)
    at iteratePitchingLoaders (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:153:10)
    at runLoaders (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:357:2)
    at NormalModule.doBuild (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:131:2)
    at NormalModule.build (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:179:15)
    at Compilation.buildModule (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/Compilation.js:127:9)
    at Compilation.<anonymous> (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/Compilation.js:404:8)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:74:13
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/tapable/lib/Tapable.js:123:70)
    at onDoneResolving (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:49:11)
    at onDoneResolving (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:165:6)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:161:6
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3694:9
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:356:16
    at iteratorCallback (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:936:13)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:840:16
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3691:13
    at apply (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:21:25)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:56:12
    at NormalModuleFactory.resolveRequestArray (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:213:32)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3686:9
    at eachOfArrayLike (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:941:9)
    at eachOf (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:991:5)
    at _parallel (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3685:5)

ERROR in /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/extract-text-webpack-plugin/loader.js?{"id":1,"omit":1,"remove":true}!style-loader!css-loader!sass-loader!/Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/components/Toolbar/toolbar.scss doesn't export content

ERROR in ./containers/App/style.scss
Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/extract-text-webpack-plugin/loader.js?{"id":1,"omit":1,"remove":true}!style-loader!css-loader!sass-loader!/Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/containers/App/style.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .viewport {
|     margin-top:2.4em;
| }

ERROR in ./containers/App/style.scss
Module build failed: ModuleParseError: Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/containers/App/style.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .viewport {
|     margin-top:2.4em;
| }
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:207:34
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:164:10
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:365:3
    at iterateNormalLoaders (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:206:10)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:197:4
    at Storage.provide (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:53:20)
    at CachedInputFileSystem.readFile (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:160:24)
    at processResource (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:194:11)
    at iteratePitchingLoaders (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:153:10)
    at runLoaders (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:357:2)
    at NormalModule.doBuild (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:131:2)
    at NormalModule.build (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:179:15)
    at Compilation.buildModule (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/Compilation.js:127:9)
    at Compilation.<anonymous> (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/Compilation.js:404:8)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:74:13
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/tapable/lib/Tapable.js:123:70)
    at onDoneResolving (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:49:11)
    at onDoneResolving (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:165:6)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:161:6
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3694:9
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:356:16
    at iteratorCallback (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:936:13)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:840:16
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3691:13
    at apply (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:21:25)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:56:12
    at NormalModuleFactory.resolveRequestArray (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:213:32)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3686:9
    at eachOfArrayLike (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:941:9)
    at eachOf (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:991:5)
    at _parallel (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3685:5)

ERROR in /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/extract-text-webpack-plugin/loader.js?{"id":1,"omit":1,"remove":true}!style-loader!css-loader!sass-loader!/Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/containers/App/style.scss doesn't export content

ERROR in ./general.scss
Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/extract-text-webpack-plugin/loader.js?{"id":1,"omit":1,"remove":true}!style-loader!css-loader!sass-loader!/Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/general.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @charset "UTF-8";
| @import "./variables";
|

ERROR in ./general.scss
Module build failed: ModuleParseError: Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/general.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @charset "UTF-8";
| @import "./variables";
|
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:207:34
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:164:10
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:365:3
    at iterateNormalLoaders (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:206:10)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:197:4
    at Storage.provide (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:53:20)
    at CachedInputFileSystem.readFile (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:160:24)
    at processResource (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:194:11)
    at iteratePitchingLoaders (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:153:10)
    at runLoaders (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:357:2)
    at NormalModule.doBuild (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:131:2)
    at NormalModule.build (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:179:15)
    at Compilation.buildModule (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/Compilation.js:127:9)
    at Compilation.<anonymous> (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/Compilation.js:404:8)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:74:13
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/tapable/lib/Tapable.js:123:70)
    at onDoneResolving (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:49:11)
    at onDoneResolving (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:165:6)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:161:6
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3694:9
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:356:16
    at iteratorCallback (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:936:13)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:840:16
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3691:13
    at apply (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:21:25)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:56:12
    at NormalModuleFactory.resolveRequestArray (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:213:32)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3686:9
    at eachOfArrayLike (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:941:9)
    at eachOf (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:991:5)
    at _parallel (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3685:5)

ERROR in /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/extract-text-webpack-plugin/loader.js?{"id":1,"omit":1,"remove":true}!style-loader!css-loader!sass-loader!/Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/general.scss doesn't export content

ERROR in ./components/Header/header.scss
Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/extract-text-webpack-plugin/loader.js?{"id":1,"omit":1,"remove":true}!style-loader!css-loader!sass-loader!/Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/components/Header/header.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "client/variables";
|
| .header-container {

ERROR in ./components/Header/header.scss
Module build failed: ModuleParseError: Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/components/Header/header.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "client/variables";
|
| .header-container {
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:207:34
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:164:10
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:365:3
    at iterateNormalLoaders (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:206:10)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:197:4
    at Storage.provide (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:53:20)
    at CachedInputFileSystem.readFile (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:160:24)
    at processResource (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:194:11)
    at iteratePitchingLoaders (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:153:10)
    at runLoaders (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:357:2)
    at NormalModule.doBuild (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:131:2)
    at NormalModule.build (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:179:15)
    at Compilation.buildModule (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/Compilation.js:127:9)
    at Compilation.<anonymous> (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/Compilation.js:404:8)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:74:13
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/tapable/lib/Tapable.js:123:70)
    at onDoneResolving (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:49:11)
    at onDoneResolving (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:165:6)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:161:6
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3694:9
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:356:16
    at iteratorCallback (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:936:13)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:840:16
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3691:13
    at apply (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:21:25)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:56:12
    at NormalModuleFactory.resolveRequestArray (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:213:32)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3686:9
    at eachOfArrayLike (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:941:9)
    at eachOf (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:991:5)
    at _parallel (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3685:5)

ERROR in /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/extract-text-webpack-plugin/loader.js?{"id":1,"omit":1,"remove":true}!style-loader!css-loader!sass-loader!/Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/components/Header/header.scss doesn't export content

ERROR in ./components/List/list.scss
Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/extract-text-webpack-plugin/loader.js?{"id":1,"omit":1,"remove":true}!style-loader!css-loader!sass-loader!/Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/components/List/list.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "client/variables";
|
| .list {

ERROR in ./components/List/list.scss
Module build failed: ModuleParseError: Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/components/List/list.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "client/variables";
|
| .list {
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:207:34
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:164:10
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:365:3
    at iterateNormalLoaders (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:206:10)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:197:4
    at Storage.provide (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:53:20)
    at CachedInputFileSystem.readFile (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:160:24)
    at processResource (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:194:11)
    at iteratePitchingLoaders (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:153:10)
    at runLoaders (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:357:2)
    at NormalModule.doBuild (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:131:2)
    at NormalModule.build (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModule.js:179:15)
    at Compilation.buildModule (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/Compilation.js:127:9)
    at Compilation.<anonymous> (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/Compilation.js:404:8)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:74:13
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/tapable/lib/Tapable.js:123:70)
    at onDoneResolving (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:49:11)
    at onDoneResolving (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:165:6)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:161:6
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3694:9
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:356:16
    at iteratorCallback (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:936:13)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:840:16
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3691:13
    at apply (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:21:25)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:56:12
    at NormalModuleFactory.resolveRequestArray (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/lib/NormalModuleFactory.js:213:32)
    at /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3686:9
    at eachOfArrayLike (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:941:9)
    at eachOf (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:991:5)
    at _parallel (/Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/webpack/node_modules/async/dist/async.js:3685:5)

ERROR in /Users/csekharveera/Sites/react-dynamic-route-loading-es6/node_modules/extract-text-webpack-plugin/loader.js?{"id":1,"omit":1,"remove":true}!style-loader!css-loader!sass-loader!/Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/components/List/list.scss doesn't export content
Child extract-text-webpack-plugin:
        + 1 hidden modules

    ERROR in ./components/Toolbar/toolbar.scss
    Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/components/Toolbar/toolbar.scss Unexpected character '@' (1:0)
    You may need an appropriate loader to handle this file type.
    | @import "client/variables";
    |
    | .navbar {
Child extract-text-webpack-plugin:
       [0] ./containers/App/style.scss 261 bytes {0} [built] [failed] [1 error]

    ERROR in ./containers/App/style.scss
    Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/containers/App/style.scss Unexpected token (1:0)
    You may need an appropriate loader to handle this file type.
    | .viewport {
    |     margin-top:2.4em;
    | }
Child extract-text-webpack-plugin:
       [0] ./general.scss 266 bytes {0} [built] [failed] [1 error]

    ERROR in ./general.scss
    Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/general.scss Unexpected character '@' (1:0)
    You may need an appropriate loader to handle this file type.
    | @charset "UTF-8";
    | @import "./variables";
    |
Child extract-text-webpack-plugin:
        + 1 hidden modules

    ERROR in ./components/Header/header.scss
    Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/components/Header/header.scss Unexpected character '@' (1:0)
    You may need an appropriate loader to handle this file type.
    | @import "client/variables";
    |
    | .header-container {
Child extract-text-webpack-plugin:
        + 1 hidden modules

    ERROR in ./components/List/list.scss
    Module parse failed: /Users/csekharveera/Sites/react-dynamic-route-loading-es6/client/components/List/list.scss Unexpected character '@' (1:0)
    You may need an appropriate loader to handle this file type.
    | @import "client/variables";
    |
    | .list {

How to connect Redux?

I see your actions folder but I don't see how you've connected Redux in this example. I'm having trouble getting it working in my adaptation so that's why I'm wondering how it should be done.

How to lazy load only the child routes modules for the route user goes to

Shouldnt the lazy load work like it should preload only the routes for the that the user might take from its current path.

While the code of yours preloads all the chunks whether they are child of the route or not.

e.g.

If the Main Route is / with child routes /A, /B, /C

and the route /A having child routes /A/1, /A/2

the app should preload A,B,C chunk when on route /
and it should preload 1,2 chunk when on route /A

Can you suggest me how could we implement that

Support CSS code Splitting

The https://burning-heat-4609.firebaseapp.com/ website only split the JS code,

But sometime different router have huge CSS, Maybe we can support CSS code splitting.

Any Thought?

SyntaxError when builded, can't understand why

cloning your react-dynamic-route-loading-es6
when trying npm start

have ERROR in ./client/pages/Home/index.js
Module build failed: SyntaxError: Unexpected token (13:2)

  11 | 
  12 | export default () => (
> 13 |   <article className="home">
     |   ^
  14 |     <Header title="Home" className="header-dark" />
  15 |     <List columns={2} items={twoColListItems} />
  16 |   </article>

@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server index pages/Home

full console

`[vasil@localhost webpack_split]$ sudo npm start

> [email protected] start /home/vasil/workplace/webpack_split
> webpack-dev-server --config webpack.config.js

Project is running at http://localhost:3000/
webpack output is served from /
Content not from webpack is served from ./client
404s will fallback to /index.html
(node:11765) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: d36e34181bf36fbc7888
Version: webpack 2.2.0
Time: 2610ms
               Asset       Size  Chunks                    Chunk Names
           bundle.js    2.23 kB       0  [emitted]         js
    vendor.bundle.js    1.02 MB       1  [emitted]  [big]  vendor
       bundle.js.map  102 bytes       0  [emitted]         js
vendor.bundle.js.map     1.2 MB       1  [emitted]         vendor
          index.html  429 bytes          [emitted]         
chunk    {0} bundle.js, bundle.js.map (js) 1.75 kB {1} [initial] [rendered]
 [./index.js] ./client/index.js 595 bytes {0} [built] [failed] [1 error]
 [./pages/Home/index.js] ./client/pages/Home/index.js 1.09 kB {0} [built] [failed] [1 error]
    [0] multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server index pages/Home 64 bytes {0} [built]
chunk    {1} vendor.bundle.js, vendor.bundle.js.map (vendor) 936 kB [entry] [rendered]
 [../node_modules/ansi-regex/index.js] ./~/ansi-regex/index.js 135 bytes {1} [built]
 [../node_modules/fbjs/lib/ExecutionEnvironment.js] ./~/fbjs/lib/ExecutionEnvironment.js 1.06 kB {1} [built]
 [../node_modules/react-dom/index.js] ./~/react-dom/index.js 59 bytes {1} [built]
 [../node_modules/react-dom/lib/ReactDOM.js] ./~/react-dom/lib/ReactDOM.js 5.14 kB {1} [built]
 [../node_modules/react/lib/React.js] ./~/react/lib/React.js 2.69 kB {1} [built]
 [../node_modules/react/lib/ReactPropTypes.js] ./~/react/lib/ReactPropTypes.js 15.8 kB {1} [built]
 [../node_modules/react/react.js] ./~/react/react.js 56 bytes {1} [built]
 [../node_modules/strip-ansi/index.js] ./~/strip-ansi/index.js 161 bytes {1} [built]
    [1] multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server react react-dom 64 bytes {1} [built]
 [../node_modules/url/url.js] ./~/url/url.js 23.3 kB {1} [built]
 [../node_modules/webpack-dev-server/client/index.js?http:/localhost:3000] (webpack)-dev-server/client?http://localhost:3000 4.66 kB {1} [built]
 [../node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 856 bytes {1} [built]
 [../node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.57 kB {1} [built]
 [../node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {1} [built]
 [../node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.02 kB {1} [built]
     + 241 hidden modules

ERROR in ./client/pages/Home/index.js
Module build failed: SyntaxError: Unexpected token (13:2)

  11 | 
  12 | export default () => (
> 13 |   <article className="home">
     |   ^
  14 |     <Header title="Home" className="header-dark" />
  15 |     <List columns={2} items={twoColListItems} />
  16 |   </article>

 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server index pages/Home

ERROR in ./client/index.js
Module build failed: SyntaxError: Unexpected token (8:2)

   6 | 
   7 | render(
>  8 |   <Root />,
     |   ^
   9 |   document.getElementById('root')
  10 | );
  11 | 

 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server index pages/Home
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks  Chunk Names
    index.html  568 kB       0  
    chunk    {0} index.html 541 kB [entry] [rendered]
     [../node_modules/html-webpack-plugin/lib/loader.js!./index.ejs] ./~/html-webpack-plugin/lib/loader.js!./client/index.ejs 675 bytes {0} [built]
     [../node_modules/lodash/lodash.js] ./~/lodash/lodash.js 540 kB {0} [built]
     [../node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
     [../node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Failed to compile.

`

how would i implement dynamic-routes-loading of components?

Sorry about this newbie question but I'm my routes currently looks like this:

import React from 'react'
import { Router, Route, IndexRoute } from 'react-router'
import { MainContainer, HomeContainer, FeedContainer } from 'containers'
import {Error404} from 'components'

export default function getRoutes (checkAuth, history, errorAuth) {
  return (
      <Router history={history}>
        <Route path='/' component={MainContainer}>
          <IndexRoute component = {HomeContainer} onEnter = {checkAuth}/>
          <Route path='feed' component = {FeedContainer} onEnter = {checkAuth}/>
          <Route path='*' component = {Error404} />
        </Route>
      </Router>
  )
}

which i'm using in index.js:

const App = () => (
    <MuiThemeProvider>
      <Provider store = {store}>
        {getRoutes(checkAuth, history, errorAuth)}
      </Provider>
    </MuiThemeProvider>
    )

   ReactDOM.render(
      <App/>,
   document.getElementById('app')

npm start throws error

1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info prestart [email protected]
6 info start [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec start script
9 verbose stack Error: [email protected] start:`webpack-dev-server --history-api-fallback --hot --progress --port 3000`
9 verbose stack Exit status 1
9 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:217:16)
9 verbose stack     at emitTwo (events.js:87:13)
9 verbose stack     at EventEmitter.emit (events.js:172:7)
9 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
9 verbose stack     at emitTwo (events.js:87:13)
9 verbose stack     at ChildProcess.emit (events.js:172:7)
9 verbose stack     at maybeClose (internal/child_process.js:829:16)
9 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
10 verbose pkgid [email protected]
11 verbose cwd E:\Farmers\react-dynamic-route-loading-es6
12 error Windows_NT 6.1.7601
13 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
14 error node v4.5.0
15 error npm  v2.15.9
16 error code ELIFECYCLE
17 error [email protected] start:`webpack-dev-server --history-api-fallback --hot --progress --port 3000`
17 error Exit status 1
18 error Failed at the [email protected] start script 'webpack-dev-server --history-api-fallback --hot --progress --port 3000'.
18 error This is most likely a problem with the react-router-dynamic-routes-webpack2 package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error     webpack-dev-server --history-api-fallback --hot --progress --port 3000
18 error You can get information on how to open an issue for this project with:
18 error     npm bugs react-router-dynamic-routes-webpack2
18 error Or if that isn't available, you can get their info via:
18 error
18 error     npm owner ls react-router-dynamic-routes-webpack2
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

I am unable to start the server. Can you provide some input on this issue. It would be great if you could provide steps to resolve this. @moduscreate

error: options/query provided without loader (use loader + options) in {

After I pull the project, when I run npm run start, the error occurs, log is here

Error: options/query provided without loader (use loader + options) in {
  "test": {},
  "use": "file-loader",
  "query": {
    "name": "[name].[ext]"
  }
}

so I think the . html rule

should be

      {
        test: /\.html$/,
        use: [{
          loader:'file-loader',
          query: {
            name: '[name].[ext]'
          }
        }],
      },

Finally, thank you for you example. 😄

Chunk.entry was removed. Use has Runtime()

i was try your demo, but find an erroy with "Chunk.entry was removed. Use has Runtime()", do you know this error? and how to fix it?

Server Side rendering example?

This medium post and this repo are the cleanest examples of code splitting I've found, so thank you!

One thing I'd like to request is an example of a server side implementation, where the initial state is set by the server and returned to the client with the appropriate bundles.

Invalid configuration object.

When i try to run a npm script after install i always get:

Invalid configuration object. webpack-dev-server has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'inject'. These properties are valid:
   object { hot?, hotOnly?, lazy?, host?, filename?, publicPath?, port?, socket?, watchOptions?, headers?, clientLogLevel?, key?, cert?, ca?, pfx?, pfxPassphrase?, inline?, public?, https?, contentBase?, watchContentBase?, open?, features?, compress?, proxy?, historyApiFallback?, staticOptions?, setup?, stats?, reporter?, noInfo?, quiet?, serverSideRender?, index?, log?, warn? }

what is inject supposed to do? i can't find a doc about that property.