Refused to execute script from because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled
Solution 1
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/
Solution 2
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..
Solution 3
Maybe you are pointing incorrectly
<script src="utils.js"></script> // NOT ok. Refused to execute script..MIME
<script src="js/utils.js"></script> // OK
Solution 4
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!
Solution 5
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.
chobo2
Updated on April 25, 2020Comments
-
chobo2 about 4 years
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