Code Splitting with react-loadable gives Error : Cannot find module "."

Question

I'm using react-loadable v4.0.4 and webpack v3.5.1.

Here is my code,

import Dashboard from '../../scenes/dashboard/dashboard';    
import ReactLoadable from 'react-loadable';
...

const yoPath = 'src/components/scenes/dashboard/dashboard';

const DashboardWrap = ReactLoadable({
    loading: Dashboard,
    loader: () => {
        return new Promise((resolve, reject) =>
            require.ensure(
               [],
               (require) =>  resolve(require(yoPath)),
               (error) => reject(error),
               'dashboardChunk'
            )
         )
    }
});

And using react-router-dom v4.1.2, I've set Route as follows,

<Switch>
...
<Route exact path='/dashboard' component={DashboardWrap} />
...
</Switch>

I'm able to build the chunks for the respective component with the name dashboardChunk.

But while loading that component I'm getting the issues as follows.

In the console,

And the chunkfile,

Please let me know if I'm doing anything wrong.

Aniruddha Shevle · Accepted Answer · 2017-09-08 11:25:47Z

4

I basically wanted to do code splitting, for that I've just done the following and it works fine.

I've created a common component(wrapper component) as follows,

import React, { Component } from 'react';

class Async extends Component {
    componentWillMount = () => {
        this.props.load.then((Component) => {
            this.Component = Component
            this.forceUpdate();
        });
    }

    render = () => (
        this.Component ? <this.Component.default /> : null
    )
}

export default Async;

Then I've used above component as follows,

export const AniDemo = () => <Async load={import(/* webpackChunkName: "aniDemoChunk" */ "../../scenes/ani-demo/AniDemo.js")} />
export const Dashboard = () => <Async load={import(/* webpackChunkName: "dashboardChunk" */ "../../scenes/dashboard/Dashboard.js")} />

And using the above, I've made the changes in route as follows,

<Route exact path="/ani-demo" component={AniDemo} />
<Route exact path="/dashboard" component={Dashboard} />

With the help of the above changes that I made, I'm able to create chunks properly with the names that I've mentioned in the comments inside import statements ie aniDemoChunk.js and dashboardChunk.js respectively.

And these chunks load only when the respective component is called ie aniDemoChunk.js is loaded on browser only when AniDemo component is called or requested. Similarly for the Dashboard component respectively.

Note: If anyone is getting error re:Unexpected token import. So to support import() syntax just replace import to System.import() or else use babel-plugin-syntax-dynamic-import.

edited Sep 8, 2017 at 11:25

answered Sep 7, 2017 at 20:36

Aniruddha Shevle

4,9694 gold badges28 silver badges40 bronze badges

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

1 Comment

Torrezzzz Over a year ago

Used this code. After including babel plugin also am getting the unexpected token import error. Tried system import that also not working. Using webpack 3.11 and babel-plugin 6.18

bjrnt · Accepted Answer · 2017-08-23 06:59:17Z

1

Webpack must be able to determine the imported path during static analysis. If you pass an argument into require, this is not possible.

It is best to put the actual path into require.ensure, i.e.

require.ensure(
  ['src/components/scenes/dashboard/dashboard']
  require => 
  resolve(require('src/components/scenes/dashboard/dashboard').default)
  error => reject(error),
  'dashboardChunk'
)

or use the newer dynamic import syntax. With the newer syntax you could simplify the above into:

Loadable({ 
  loader: () => import(/* webpackChunkName: "dashboardChunk" */ 'src/components/scenes/dashboard/dashboard')
  loading: MyLoader
})

Also, the loading argument should be a component to display while your asynchronous load is taking place, e.g. some kind of loading animation.

answered Aug 23, 2017 at 6:59

bjrnt

2,8623 gold badges31 silver badges44 bronze badges

1 Comment

Aniruddha Shevle Over a year ago

I've put the actual path as well inside require.ensure. Still won't work. And thanks for your suggestion.

Collectives™ on Stack Overflow

Code Splitting with react-loadable gives Error : Cannot find module "."

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related