React可加载在JSON中分配错误的文件导致丢失块

Question

我正在根据example in the repo使用react-loadable和razzle进行服务器端渲染，当我尝试添加另一条动态加载的路由时，我遇到一些奇怪的行为。

在我的App.jsx 中，我的可加载组件设置如下：

const DirectoryCatLocPage = Loadable({
  loader: () => import(/* webpackChunkName: "directoryCatLocPage" */ './pages/directory'),
  loading: () => null
});

const CostGuidePage = Loadable({
  loader: () => import(/* webpackChunkName: "costGuidePage" */ './pages/CostGuide'),
  loading: () => null
});

const App = () => (
  <ThemeProvider theme={theme}>
    <Switch>
      <Route
        exact
        path="/:categorySlug/:state/:suburb"
        component={DirectoryCatLocPage}
      />
      <Route
        exact
        path="/costs/:slug"
        component={CostGuidePage}
      />
    </Switch>
  </ThemeProvider>
);

当我运行yarn：build时，我可以在 build / react-loadable.json

中看到以下条目

"./pages/CostGuide": [
    {
      "id": "8bgI",
      "name": "./src/pages/CostGuide/index.jsx",
      "file": "static/js/costGuidePage.c75f9bef.chunk.js",
      "publicPath": "http://localhost:3020/static/js/costGuidePage.c75f9bef.chunk.js"
    },
    {
      "id": "8bgI",
      "name": "./src/pages/CostGuide/index.jsx",
      "file": "static/js/costGuidePage.c75f9bef.chunk.js.map",
      "publicPath": "http://localhost:3020/static/js/costGuidePage.c75f9bef.chunk.js.map"
    }
  ],
"./pages/directory": [
    {
      "id": "bWjE",
      "name": "./src/pages/directory/index.js",
      "file": "static/js/costGuidePage.c75f9bef.chunk.js",
      "publicPath": "http://localhost:3020/static/js/costGuidePage.c75f9bef.chunk.js"
    },
    {
      "id": "bWjE",
      "name": "./src/pages/directory/index.js",
      "file": "static/js/costGuidePage.c75f9bef.chunk.js.map",
      "publicPath": "http://localhost:3020/static/js/costGuidePage.c75f9bef.chunk.js.map"
    }
  ],

如您所见，两个页面都指向costGuidePage块。结果，directoryCatLocPage块被完全跳过。

我已经能够将问题的范围缩小到两个页面中都使用的某些共享组件。如果我从其中一个页面中删除了这两个组件并运行yarn：build，则会按预期生成块，您可以在 build / react-loadable.json 中看到正确的文件：

  "./pages/CostGuide": [
    {
      "id": "8bgI",
      "name": "./src/pages/CostGuide/index.jsx",
      "file": "static/js/costGuidePage.7a9c8adf.chunk.js",
      "publicPath": "http://localhost:3020/static/js/costGuidePage.7a9c8adf.chunk.js"
    },
    {
      "id": "8bgI",
      "name": "./src/pages/CostGuide/index.jsx",
      "file": "static/js/costGuidePage.7a9c8adf.chunk.js.map",
      "publicPath": "http://localhost:3020/static/js/costGuidePage.7a9c8adf.chunk.js.map"
    }
  ],
  "./pages/directory": [
    {
      "id": "bWjE",
      "name": "./src/pages/directory/index.js",
      "file": "static/js/directoryCatLocPage.e1fa4e52.chunk.js",
      "publicPath": "http://localhost:3020/static/js/directoryCatLocPage.e1fa4e52.chunk.js"
    },
    {
      "id": "bWjE",
      "name": "./src/pages/directory/index.js",
      "file": "static/js/directoryCatLocPage.e1fa4e52.chunk.js.map",
      "publicPath": "http://localhost:3020/static/js/directoryCatLocPage.e1fa4e52.chunk.js.map"
    }
  ],

我看不到页面中包含共享组件如何导致react-loadable混淆文件。