React Webpack Dev Server main.js not found

Question

I am using React with Webpack 4 and am developing with the webpack dev server. This works perfectly, however I have one issue.

The dev server creates a file "main.js". The problem arises when I am on the page /edit/1 for example.

historyApiFallback makes sure that I do not get a 404, but that my index.html is server. That works.

The problem is that when I am on /edit/1 the main.js file is not rendered as localhost:8080/main.js, but as localhost:8080/edit/main.js. This file is not rendered by the dev server so it returns a 404.

Is it possible to make main.js have the complete path? Or is there maybe another solution?

Thanks!

Answer 1

I was about to ask the same question (for vue) and found the answer somehow buried in here: historyApiFallback doesn't work in Webpack dev server

Just add to the webpack.config.js:

output: {
    publicPath: '/',
}, 

It took me way too long to find this... and it's not really intuitive. My now working webpack.config.js look like this:

module.exports = {
    // ...
    output: {
        publicPath: '/',
    },
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html'
    })],
    devServer: {
        historyApiFallback: true,
    }
}