Route based code splitting with webpack not working, Chunks not generated

Question

I'm trying to implement route based code splitting in my application on a nested route.

I want to break a main routes child routes into a chunk separate from the main chunk.

mainRoutes.js

... (other routes)
{
    path: '/dashboard',
    component: VDClient,
},
... (other routes)

VDClient.js

const renderVendorDashboard = () => {
    import(/* webpackChunkName: "vddesktop" */ './Root/index').then(VDApp => {
        return <VDApp />
    });
}

export default class VDClient extends Component {
    render() {
        renderVendorDashboard();
    }
}

Root/index.js

import vdRoutes from './vdRoutes'; // file similar to mainRoutes.js but contains the child routes for `/dashboard/` eg: `/dashboard/list`, `/dashboard/add` etc.

class VendorDashboard extends Component {
    componentWillMount() {
        ...
    }
    render() {
        ...
        <div>
            <Switch>
                {vdRoutes.map(route => routeWithSubRoutes(route, this.props.match.params, this.props.match.url))}
            </Switch>
        </div>
    }
}

After the build completes, I can see all chunks generated except the vddesktop chunk. Am I missing something here??

The other chunks that are generated don't contain the routes or the code of the /dashboard routes, which is the intended behaviour. All the imports are in order so I don't think that should be an issue here.

I've also tried using react-loadable, but that gives me a whole new level of issues unfortunately with webpack 4.

Refer: webpack 4 react loadable is not spliting vendor base on chucking point https://github.com/jamiebuilds/react-loadable/pull/110

Please let me know if I can provide some more info that might be helpful in solving this problem. It would be a huge help.

PlayMa256 · Accepted Answer · 2018-07-16 11:54:43Z

1

const renderVendorDashboard = () => {
    import(/* webpackChunkName: "vddesktop" */ './Root/index').then(VDApp => {
      const component = VDapp.default;
      return <component />
    });
}

export default class VDClient extends Component {
    render() {
        renderVendorDashboard();
    }
}

When using import, the result is wrapped on a default property.

answered Jul 16, 2018 at 11:54

PlayMa256

6,8512 gold badges40 silver badges58 bronze badges

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

2 Comments

Deepank Over a year ago

Thanks for the help, but it's still not working out. There isn't an error after I do this, but the vddesktop chunk still isn't created after my build completes. So when I try to hit the route, it says route not found. Can this not work due to server side rendering?

PlayMa256 Over a year ago

Probably, probably not. I've never touched ssr before, so i dont know

Collectives™ on Stack Overflow

Route based code splitting with webpack not working, Chunks not generated

mainRoutes.js

VDClient.js

Root/index.js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

mainRoutes.js

VDClient.js

Root/index.js

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related