CODEWITHSUNDEEP
javascriptreactjswebpackimportreact-loadable
chesterkmr
chesterkmr

Reputation: 321

react-loadable Chunks loaded but code not executed

I got an issue,attempting to use chunks in my react APP by using

react-loadable

Its works perfect in webpack-dev-server in development mode,but when im build project and serve it to server,async components loaded,but code in them not being executed. So page just renders with loaders which should be rendered until component will be loaded. No errors in console or something,everything is clear , chunk script is inserted to html head on load,and nothing happens :(

Example async component
import Loadable from 'react-loadable';
const AsyncComponent = Loadable({
  loader : () => (import('../../components/AsyncComponent')),
  loading : () => (<div>Loading....</div>),
});

and render

<Route path="/path/to/asynccomponent" render={() =>(<AsyncComponent />)} />

UPD : There was error passed to loading component TypeError: Cannot read property 'call' of undefined↵ at o (http://localhost:3000/assets/js/bundle-8866517f8f287a1d3c6b.js:1:318

Fixed it by installing

babel-plugin-syntax-dynamic-import

And update exctractCssPlugin options to

new exctactCss({filename : 'css/style.css' , allChunks: true})

Upvotes: 11

Views: 3075

Answers (1)

Shubham Sharma
Shubham Sharma

Reputation: 192

React Loadable should not be used anymore, because it is not being maintained.Alternative way can be using @loadable/component if you need SSR.

Upvotes: 0

Related Questions