3

Im trying to use react loadable with server side rendering.

My babel plugins config

 "plugins": [
      "syntax-dynamic-import",
      "dynamic-import-node",
      "react-loadable/babel",
      [
        "import-inspector",
        {
          "serverSideRequirePath": true,
          "webpackRequireWeakId": true
        }
      ],
      "transform-react-remove-prop-types",
      "transform-react-inline-elements",
      "transform-react-constant-elements"
    ]

server response during rendering, with:

  console.log(modules);
  const bundles = getBundles(stats, modules);
  console.log(bundles);

gets:

[ 'HomePage' ]
[ undefined ]

i guess my error comes from react-loadable.json which has one of the keys undefined

  "undefined": [
    {
      "id": 7,
      "name": "./node_modules/react-intl/lib/index.es.js",
      "file": "main.a77d1cb1913eab1806a7.js"
    },
    {
      "id": 19,
      "name": "./node_modules/redux/es/index.js",
      "file": "main.a77d1cb1913eab1806a7.js"
    },
    {
      "id": 52,
      "name": "./node_modules/redux-saga/es/internal/sagaHelpers/index.js",
      "file": "main.a77d1cb1913eab1806a7.js"
    }
  ]

but i can figure out how it becomes undefined if i have webpackChunkName and modules defined like this:

export default Loadable({
  loader: () => import(/* webpackChunkName: "HomePage" */ './index'),
  loading: () => null,
  modules: ['HomePage'],
});

maybe someone had similar problem or know any solution?

ewief
  • 536
  • 3
  • 9
  • Hey did you ever solve this @ewief? – Thomas Jul 06 '18 at 17:09
  • i managed to solve it. Now its all working because react-loadable fixed compatibility issues with webpack4 @Thomas – ewief Sep 08 '18 at 07:53
  • @ewief Can you share what was your fix? I have similar problem – fiddlest Mar 04 '19 at 16:46
  • @fiddlest instead of using relative path for import: import('./index') i used absolute path import('containers/HomePage') and it fixed the issue. As react-loadable is basically not supported now i moved to loadable-components. – ewief Mar 06 '19 at 19:04
  • @ewief I am using webpack alias for path. Are you using it to ? react-loadable is abandoned ? – fiddlest Mar 06 '19 at 20:22
  • @fiddlest im using `resolve.modules`. react-loadable doesnt accept any issues and is no longer recommended in docs by react team also last update was `7 months ago` – ewief Mar 07 '19 at 09:30
  • Thanks @ewief I should move to loadable-components as well. Its a lot of work to change .. – fiddlest Mar 07 '19 at 16:39

0 Answers0