reactjs - Webpack Code Splitting 'Loading chunk failed' error wrong file path

Question

I'm using React + Typescript with Webpack and I'm trying to load some of my react components when they are actually needed.

The issue is that when the chunk is requested via lazy loading I'm getting the following error:

Uncaught Error: Loading chunk 1 failed. (error: http://localhost:58988/1.chunk.js) at HTMLScriptElement.onScriptComplete (bootstrap:114)

This chunk is generated successfully and without any errors, it's just that the path is wrong - http://localhost:58988/1.chunk.js and it should be http://localhost:58988/dist/1.chunk.js

I've also tried using the newest React.lazy to lazy load react components but I'm getting the same issue. So, is there a way to tell the compiler how to resolve these file paths?

Here's some of the code:

MyComponent.tsx

import * as React from "react";
import * as ES5Promise from "promise";

export class MyComponent extends React.Component<{}, {}> {
    constructor(props) {
        super(props);
    }

    private readonly onLoadModuleClickHandler = (): void => {
        import("./Button").then((module) => {
            console.log(module);
        });
    }

    render() {
        return (
            <div>
                <input type="button" value="Load another module" onClick={this.onLoadModuleClickHandler}/>
            </div>
        );
    }
}

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "module": "esnext",
    "removeComments": false,
    "sourceMap": false,
    "target": "es5",
    "jsx": "react",
    "noEmit": true,
    "importHelpers": true,
    "lib": ["dom", "es5", "es2015.promise"]
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

webpack.config.js

module.exports = {
    entry: {
        "app": "./src/App.tsx"
    },
    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename: "[name].bundle.js",
        chunkFilename: "[name].chunk.js"
    },
    module: {
        rules: [
            {
                test: /.(ts|tsx)?$/,
                use: "awesome-typescript-loader",
                exclude: /node_modules/
            },
            {
                test: /.(css|less)?$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader?modules&localIdentName=[local]--[hash:base64:5]"
                }, {
                    loader: "less-loader"
                }]
            },
        ]
    },
    resolve: {
        extensions: [".js", ".jsx", ".ts", ".tsx", ".css", ".less"]
    }
};

Answer 1

That happens because output.publicPath by default is /.

Just update output.publicPath to point where you want it to be => /dist/.