0

I have the following code, where boxes.jsx should be dynamically loaded when a particular route is hit:

...
import Loadable from 'react-loadable';
const LoadableBoxes = Loadable({
    loader: () => import('../pages/boxes/boxes.jsx'),
    loading: () => <div>Loading</div>
});

class AppWrapperLoggedInContainer extends Component {
  ...
  render() {
    return (
      <AppWrapperLoggedIn>
        <Switch>
          <Route exact path={core.urls.pages.pathBoxes()} component={restricted(LoadableBoxes)} />
          <Route exact path={core.urls.pages.pathOrganiser()} component={restricted(Organizer)} />
          <Route component={Error404} />
        </Switch>
      </AppWrapperLoggedIn>
    );
  }
}

However, I can see that the file is being bundled by Webpack in the main app.*.js bundle and a separate bundle is not being dynamically loaded when I hit that route. Any ideas why this is not working - I have checked the codebase and the boxes.jsx file in not being imported anywhere else?

JoeTidee
  • 24,754
  • 25
  • 104
  • 149

1 Answers1

0

Dynamic import requires a module type and the corresponding module loader that conforms to ES2015 module system or higher. That's probably is not the case in your project so webpack ignores dynamic imports. Webpack supports the following module types: link. To support dynamic imports you would be looking at esnext.

winwiz1
  • 2,906
  • 11
  • 24
  • Not sure what you mean. – JoeTidee Oct 28 '19 at 22:41
  • When a dynamic import does work, that's because the module loader does the work. You need to choose the right loader. Practically the loader is chosen by selecting the module type. In your project/build find the corresponding setting and set it to `esnext`. For example, in Typescript this particular setting is called [`module`](https://www.typescriptlang.org/docs/handbook/compiler-options.html) and it should be set to `esnext`. In your project the similar setting would be called differently. – winwiz1 Oct 29 '19 at 03:54
  • I figured that as Webpack supported import()from v2 (I am using v4) then it should just work. – JoeTidee Oct 29 '19 at 21:03