0

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.

Deepank
  • 717
  • 2
  • 8
  • 15

1 Answers1

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.

PlayMa256
  • 6,603
  • 2
  • 34
  • 54
  • 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? – Deepank Jul 17 '18 at 02:40
  • Probably, probably not. I've never touched ssr before, so i dont know – PlayMa256 Jul 17 '18 at 11:24