3

我正在尝试将 react loadable 与服务器端渲染一起使用。

我的 babel 插件配置

 "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"
    ]

渲染期间的服务器响应，其中：

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

得到：

[ 'HomePage' ]
[ undefined ]

我想我的错误来自react-loadable.json哪个键之一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"
    }
  ]

但是如果我有这样定义的模块，我可以弄清楚它是如何变得未定义的webpackChunkName：

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

也许有人有类似的问题或知道任何解决方案？

4

0 回答 0