CODEWITHSUNDEEP
reactjswebpackcode-splittingreact-loadable
Deepank
Deepank

Reputation: 747

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

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.

Upvotes: 0

Views: 990

Answers (1)

PlayMa256
PlayMa256

Reputation: 6841

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.

Upvotes: 1

Related Questions