Refused to execute script from because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled

Question

I am trying to setup react routing which works when I click on something on my site the route works, however if I open a new tab and copy that url. I get

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

webpack.config

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "index_bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.s?css$/,
        use: [
          {
            loader: "style-loader" // creates style nodes from JS strings
          },
          {
            loader: "css-loader" // translates CSS into CommonJS
          },
          {
            loader: "sass-loader" // compiles Sass to CSS
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    })
  ],
  devServer: {
    historyApiFallback:{
      index:'/dist/index.html'
    },
  }
};

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider  } from 'mobx-react';
import { useStrict } from 'mobx';
import createBrowserHistory from 'history/createBrowserHistory';
import {syncHistoryWithStore } from 'mobx-react-router';
import { Router } from 'react-router'

import AppContainer from './components/App';

const browserHistory = createBrowserHistory();

import stores from '../src/stores/Stores';

const history = syncHistoryWithStore(browserHistory, stores.routingStore);

ReactDOM.render(
    <Provider {... stores}>
        <Router history={history}>
           <AppContainer />
        </Router>
    </Provider>,      
       document.getElementById('app')
);

stores

import {RouterStore} from 'mobx-react-router';

const routingStore = new RouterStore();
const stores = {
    routingStore
}

export default stores;

I also tried historyApiFallback: true

Adnan · Answer 1 · 2019-02-18T05:40:57.117

20

Just edit webpack config by editing this:

    devServer: {
                 historyApiFallback: true
               }

And also add this to public/index.html:

     <base href="/" />

This should do the trick..

edited Feb 18 '19 at 05:40

answered Jun 14 '18 at 07:38

Adnan

1,589
11
17

7

The part with `` is not necessary if you add this in webpack config: `output: { publicPath: '/' }` – LWY Oct 29 '18 at 17:19
1

Added both - then it was fixed. – Imdad Feb 17 '19 at 22:33
I my case i needed both to fix my problem. – Adnan Feb 18 '19 at 05:39
years without using stack overflow, logged here just to say thank for this answer. – Lucas Merencia Aug 17 '23 at 02:11

Omri Luzon · Accepted Answer · 2018-04-10T18:52:12.930

7

Your webpack config is malformed. So your devServer is returning the fallback html file instead of the bundle.

Hence why the script is served with the ('text/html') MIME type.

devServer: {
    historyApiFallback:{
      index:'/dist/index.html'
    },
  }

You probably meant something like this:

devServer: {
  historyApiFallback: true
}

https://webpack.js.org/configuration/dev-server/

edited Apr 10 '18 at 18:52

answered Apr 10 '18 at 18:34

Omri Luzon

3,975
6
20
29

1

I'm having a similar issue but its not resolved by the use of historyApiFallback. This issue looks like it refers to Webpack 3 though, not Webpack 4. – Underwater_developer Apr 18 '18 at 23:06
@Underwater_developer If you are using webpack-dev-server, it's **most likely** because of historyApiFallback serving you the html file instead of a script. I can't help you more than that without more details. – Omri Luzon Apr 19 '18 at 03:06
1

https://stackoverflow.com/questions/45133342/nested-react-router-4-routes-not-working-on-webpack-3 There is some *magic* html tag that corrected this for me *shrug* – Underwater_developer Apr 19 '18 at 16:17

Dan Alboteanu · Answer 3 · 2018-12-22T14:00:58.647

4

Maybe you are pointing incorrectly

<script src="utils.js"></script>        // NOT ok. Refused to execute script..MIME

<script src="js/utils.js"></script>    // OK

edited Dec 22 '18 at 14:00

answered Jun 15 '18 at 20:53

Dan Alboteanu

9,404
1
52
40

score 3 · Answer 4 · answered May 08 '18 at 20:05

I recently had to add the following to the headers as part of a security audit resolution

X-Content-Type-Options: nosniff

After that i started getting these errors. I am yet to figure out a permanent solution for this. The pages seems to be working though. The noise in the console is just annoying!

score 1 · Answer 5 · answered Oct 11 '18 at 00:13

I got the same exact error and find out that I need to change my script in

index.html

from

  <script src="App.js"></script>

to

  <script src="/App.js"></script>

so if you have a "." or nothing in front of your file, just replace it with "/". I hope this helps you or someone else.

score 0 · Answer 6 · answered Aug 28 '18 at 18:04

0

Another thing that can cause this is if the contentBase property is not set correctly. This came up for us in that we were requesting a JS file but getting a 404 and the 404 "page" served by webpack-dev-server comes back as text/html.

answered Aug 28 '18 at 18:04

icfantv

4,523
7
36
53

score 0 · Answer 7 · answered Apr 24 '19 at 14:25

In my case, I encountered this issue because the build process did not actually build the JavaScript bundle.

The build just emitted a warning instead of an error(!), and so this issue was only found when the build was pushed to a staged deployment environment.

Hence to fix this issue I fixed the problem with the bundle not being built.

score 0 · Answer 8 · answered Apr 12 '22 at 11:04

0

Okay if someone came here for a possible solution, I found another one for my case. Add --no-module flag to your npm script. My problem was on production build, so in my case under the package.json;

"build": "vue-cli-service build --no-module",

answered Apr 12 '22 at 11:04

AlpSenel

190
1
12

Refused to execute script from because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled

8 Answers8

Linked