can you explain the error, 'Refused to execute script'? What about my workaround?

Question

I have the following error when I go to the path localhost:3000/home/:

GET http://localhost:3000/home/main.js net::ERR_ABORTED 404 (Not Found)

Refused to execute script from 'http://localhost:3000/home/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

If I delete the trailing /, it will work and the app will load without errors—without the Home component, but the app will still work.

Here is my route in React:

<Routes>
    <Route path="/home/:id" element={<Home />} />
</Routes>

Part of my webpack config:

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    assetModuleFilename: 'assets/[name][ext]',
  },
  devtool: 'source-map',
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'dist'),
    },
    port: 3000,
    open: true,
    hot: true,
    compress: true,
    historyApiFallback: true,
  },

I was able to fix the error by adding <base href="/" /> in head of the index.html file.

Can someone explain what that is, and whether it normal to fix the error like that?

can you explain the error, 'Refused to execute script'? What about my workaround?

0 Answers0