React / Webpack / TypeScript - компоненты не импортируются динамически - PullRequest
Новая
       5

React / Webpack / TypeScript - компоненты не импортируются динамически

0 голосов
/ 23 ноября 2018

У меня динамический импорт, который отлично работает для node_modules, однако я не могу заставить его работать для компонентов React.Они просто скомпилированы в файл, который зависит от них.

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

Не уверенесли это уместно, но компонент React имеет размер более 30 КБ.

Я обновил свой tsconfig.json для поддержки разбиения кода: 

{
  "allowSyntheticDefaultImports": true,
  "target": "es5",
  "module": "esnext",
  "moduleResolution": "node",
}

У меня не настроено ничего релевантного длядинамическое разбиение кода в моем webpack.config.js помимо, возможно, вывода: 

output: {
    path: path.join(__dirname, "wwwroot"),
    publicPath: "/wwwroot/",
    filename: "[name].js"
},

И это прекрасно работает для зависимости node_module, которая асинхронно загружается: 

private async loadComponent(): Promise<void> {
    const NivoBar = await import(/* webpackChunkName: "nivo-bar" */ "@nivo/bar");
    this.setState({ bar: NivoBar.Bar });
}

Однако это делаетне работает для моего компонента React, который только что скомпилирован в файл ввода: 

private async loadComponent(): Promise<void> {
    const fup = await import(/* webpackChunkName: "fileuploadpopup" */ "portal/components/fileUpload/FileUploadPopup");
    this.setState({ fileUploadPopup: fup.default });
}

Что может быть причиной этого?

1 Ответ

0 голосов
/ 28 ноября 2018

Оказалось, что был другой компонент, который имел (не асинхронную) зависимость от того же компонента, поэтому webpack решил скомпилировать его.До сих пор не знаю, как правильно отладить это с помощью веб-пакета ...

...