React / Webpack / TypeScript-无法动态导入组件

Question

I have dynamic imports working perfectly fine for node_modules, however I am unable to get this to work for React components. These are just compiled into the file that is dependent on them.

I have no idea what could be the cause of this and don't know how I could debug the splitting.

Not sure if it's relevant, but the React component is larger than 30kb.

I did update my tsconfig.json to support code splitting:

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

I don't have anything of relevance configured for dynamic code splitting in my webpack.config.js besides maybe the output:

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

And this works perfectly fine for a node_module dependency which is asynchronously loaded:

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

However this does not work for my React component which is just compiled into the entry file:

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

What could be the cause of this?

Answer 1

Turns out there was another component that had a (non-async) dependency to the same component which is why webpack decided to compile it. Still don't know how to properly debug this with webpack...