react-loadable Chunks loaded but code not executed

Question

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})

Gluttonize

Nice to see you fixed it. Have you heard of React lazy & suspense? You can use it instead of relying on third party react-loadable – Swadeshi

React.Lazy is cool but is doest support server-side rendering reactjs.org/docs/code-splitting.html#reactlazy – Kasey

Answer 1

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

Sulfonmethane