CODEWITHSUNDEEP
javascriptreactjswebpackreact-routerwebpack-dev-server
nuway
nuway

Reputation: 2384

Webpack 2 + React - nested routes when code splitting with System.import

I have an app that's based of http://moduscreate.com/code-splitting-for-react-router-with-es6-imports/ article. I've added some children routes and now my router config is as such:

function errorLoading(err) {
  console.error('Dynamic page loading failed', err);
}

function loadRoute(cb) {
  console.log('load route called');
  return (module) => cb(null, module.default);
}

const obj = {
  component: App,
  childRoutes: [
    {
      path: '/',
      getComponent(location, cb) {
        System.import('pages/Home')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    },
    {
      path: '/gsgs',
      getComponent(location, cb) {
        System.import('pages/Gsgs')
          .then(loadRoute(cb))
          .catch(errorLoading);
      },
      childRoutes: [
        {
          path: 'go',
          getComponent(location, cb) {
            System.import('pages/Gsgs/Home.js')
              .then(loadRoute(cb))
              .catch(errorLoading);
          },
        }
      ]
    },
    {
      path: '/about',
      getComponent(location, cb) {
        System.import('pages/About')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    },
  ]
};

/index, /about and /gsgs routes trigger dynamic code loading just fine. But /gsgs/go triggers a 404 with

bundle.js:2 Dynamic page loading failed Error: Loading chunk 0 failed.(…)

What am I doing wrong? Im using 

"webpack": "^2.1.0-beta.4",
"webpack-dev-server": "^2.0.0-beta"

Upvotes: 9

Views: 2418

Answers (2)

Ashwani Panwar
Ashwani Panwar

Reputation: 4608

Check your config file, (in my case webpack.config.dev.js file) and check publicPath and set it to '/'. Ex : publicPath: '/' .

You need to set it in output like this

output: { path: __dirname, filename: 'app.js', publicPath: '/', /*publicPath: 'http://0.0.0.0:8000/',*/ }

I was getting this error

   `http://0.0.0.0:8000/0.app.js
    Error: "Loading chunk 0 failed."`

and it resolved by changing publicPath: 'http://0.0.0.0:8000/' To publicPath: '/'.

Upvotes: 0

Mihir
Mihir

Reputation: 128

I have tried to reproduce the issue on the blog post and seems something is wrong. I have tried to fix that and I am not able to see that error any more.

You can refer to this commit which has changes against the current master and I am able to load child route dynamically.

Let me know if you face issues again. It would be great if you can have sample repo which can reproduce the issue, I will be glad to debug.

Happy to Help.

Upvotes: 2

Related Questions