React loadable назначает неверный файл в json, что приводит к отсутствию чанка

Question

Я использую реагирующую загрузку с 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 / Reaction-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 полностью пропускается.

Мне удалось сузить источник проблемы до некоторых общих компонентов, которые используются на обеих страницах. Если я удаляю эти 2 компонента с одной из страниц и запускаю yarn: build, порции генерируются, как и ожидалось, и вы можете увидеть правильные файлы в build / реагировать-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"
    }
  ],

Я не вижу, как включение общего компонента на страницу может привести к тому, что реагирующая загрузка перепутает файлы.