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

Question

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"

not sure why you are getting the error but just to note you can use a JSX element to set up your routes instead of an object that gets unmanageably large. — pizzarob
– pizzarob, Commented Aug 3, 2016 at 0:48
Yea I'm aware of the jsx element for router, I find object notation cleaner and easier to read — nuway
– nuway, Commented Aug 3, 2016 at 15:05

Mihir · Accepted Answer · 2016-08-14 18:44:15Z

2

+50

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.

answered Aug 14, 2016 at 18:44

Mihir

1281 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nuway Over a year ago

this does seem to solve it. What do you think was the problem?

Mihir Over a year ago

So there were couple of issue with existing code. 1) Dependencies were not updated with webpack2 2) HTML absolute path. After resolving them and adding child routes it seems to be working fine. If this solves your issue would be great if you can accept this answer. Thanks.

nuway Over a year ago

It turned out that it was failing because I didn't specify publicPath to be '/'. I think the rest was good. thanks Mihir

Ashwani Panwar · Accepted Answer · 2019-07-03 11:20:14Z

0

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: '/'.

answered Jul 3, 2019 at 11:20

Ashwani Panwar

4,6763 gold badges53 silver badges78 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related