BrowseRouter MIME type error

Question

I have react application with react-router, how you can see in the title, I use BrowserRouter, and have the following error (image):

Refused to apply style from 'http://localhost:8000/public/login/main.bfa4608...css' because its MIME type {'text/html'} is not a supported stylesheet, and strict MIME checking is enforced.

Refused to execute script from 'http://localhost:8000/public/login/manifest.b925636...js' because its MIME type {'text/html'} is not executable, and strict MIME checking is enforced.

Refused to execute script from 'http://localhost:8000/public/login/main.bfa4608...js' because its MIME type {'text/html'} is not executable, and strict MIME checking is enforced.

It occurs when I reload page /public/login/, if I reload page on /public, or redirect from /public to /public/login/– all works correctly. So it is looks like error appears only on sub routes.

I found another solution for the first error, writing this on Webpack's dev settings (image):

devServer: {
    historyApiFallback: {
        disableDotRule: true
    }
},

But this generated another error (image):

Uncaught syntax error: Unexpected token '<'

Uncaught syntax error: Unexpected token '<'

And also noticed I was getting an, HTML instead of a js file (screenshot)

Answer 1

The problem is that webpack is trying to serve the route:

localhost:8080/path/subpath

as if it were a folder, since the default configuration is to serve from the current working directory. As you found out (and the whole reason I'm writing this response is to transcribe the content of your picture) you need to set webpack's server to serve only from the root directory (e.g in configs/webpack/common.js):

module.exports = {
    ...
    output: {
        publicPath: '/'
    }
}