MIME type ('text/html') is not executable, and strict MIME type checking is enabled

Question

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

I am using react-router and i got this error while using

<Route path="/edit/:id" component={EditExpensePage} />

it is working fine with just /edit but giving error on /edit/:id. I don't understand why this is happening. Here are the files: This is the AppRouter file.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, Link, NavLink } from 'react-router-dom';
import Header from './../components/Header';
import ExpenseDashboardPage from './../components/ExpenseDashboardPage';
import AddExpenses from './../components/AddExpensePage';
import EditExpensePage from './../components/EditExpensePage';
import NotFoundPage from './../components/NotFoundPage';
import HelpPage from './../components/HelpPage';

const AppRouter = () => (
  <BrowserRouter>
  <div>
    <Header />
    <Switch>
      <Route path="/" component={ExpenseDashboardPage} exact={true} />
      <Route path="/create" component={AddExpenses} />
      <Route path="/edit/:id" component={EditExpensePage} />
      <Route path="/help" component={HelpPage} />
      <Route component={NotFoundPage} />
    </Switch>
  </div>
</BrowserRouter>
);

export default AppRouter;

This is the EditExpenses file:

import React from 'react';

const EditExpensePage = (props) => {
  console.log(props);
  return (
    <div>
      <p>Edit your expenses Here</p>
    </div>
  );  
}

export default EditExpensePage;

Here is my Webpack config file:

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

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader'
      }
    }, {
      test: /\.s?css$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    historyApiFallback: true
  }
}

And also the index.html file generated by new HtmlWebpackPlugin

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Expensify</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div id="app"></div>
  <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

Please Help me in resolving this issue.

type should be `application/javascript`, not `text/javascript`. — Sulthan, Apr 02 '18 at 19:37
What does your server code look like? I've seen this error when I had `X-Content-Type-Options: nosniff` in my response headers. If you go to your developer tools and look at the request for `/edit/bundle.js`, what is the content-type for the response? And is there a `X-Content-Type-Options` set? — Anthony N, Apr 08 '18 at 16:04
I had the same issue. [This SO solution](https://stackoverflow.com/a/48568560/6131799) worked for me. — Matt Hahn, Sep 17 '18 at 19:49

score 11 · Answer 1 · answered Apr 08 '18 at 15:59

11

Try changing

<script type="text/javascript" src="bundle.js"></script>

To

<script type="text/javascript" src="/bundle.js"></script>

answered Apr 08 '18 at 15:59

Chris Wilding

551
3
10

score 8 · Answer 2 · answered Dec 19 '19 at 05:47

8

Adding Public Path in output of webpack.config.js works:

output: {
      path: `${__dirname}/dist`,
      filename: 'bundle.js',
      publicPath: '/',
    }

answered Dec 19 '19 at 05:47

Rishabh kataria

81
1
1

Just experienced the same issue as the OP, and this has fixed it. – Yyyeey Jun 13 '23 at 11:44

score 4 · Answer 3 · answered Jan 04 '23 at 06:24

4

try

"homepage": ".",

inside package.json as mentioned in create-react-app docs.

P.s: Maybe my answer is late, but hopefully, useful for those who cannot solve the issue yet

answered Jan 04 '23 at 06:24

Mukhriddin Shakhriyorov

316
2
10

score 2 · Answer 4 · answered Mar 05 '19 at 01:15

Check the network tab in DevTools to see what the path of the requested network asset is that is coming back as text/html, then try to load it in a regular web browser.

In my case it was an error message, not javascript coming back, hence the wrong mimeType.

The bundle was failing to build for another reason (a TypesScript error in my case) and the devServer was returning an error rather than the js file the application was expecting.

score 1 · Answer 5 · answered Jul 15 '18 at 04:15

1

Try changing webpack.config.js add publicPath

output: {
   path: path.join(__dirname, 'public'),
   filename: 'bundle.js',
   publicPath: '/',        
}

answered Jul 15 '18 at 04:15

user10082953

11
1

score 1 · Answer 6 · answered May 01 '20 at 12:33

1

Can be due to many different issues, mine was solved by this (even though this wasn't needed in my other app...) loading a bundle.js file from webpack changes mime type to text/html

answered May 01 '20 at 12:33

Steven Anderson

455
6
13

score 1 · Answer 7 · answered Jun 10 '21 at 10:48

1

FWIW, I had this error too (I'm using Angular). In my case, it was because the HTML file was trying to load the JS file and it was no longer there - hence the actual contents returned were the root HTML page and not the JS file (because of using angular hash routing).

This was due to the browser using the old cached HTML file - which pointed to a bundled JS file (i.e. main.ABCD1234.js) which was from the old build, and hence really wasn't on my hosting site.

My solution was to get the browser to download the latest HTML file which pointed to the correct JS file :).

answered Jun 10 '21 at 10:48

RichS

3,097
30
26

Hello. I'm having the same issue. How did you get the browser to download the updated file? I can do it by refreshing the page but do you know how to prevent it looking for the missing file in the first place? – strttn Aug 15 '22 at 09:40
Cache busting is a huge black-art. It depends a lot on what systems you are using. – RichS Sep 30 '22 at 11:22
Ha, yeah, caches are painful but sadly, essential. I'm using Angular and hosting on Firebase. I get the issue every time I upload a new build. I've already tried telling the browser not to cache index.html in the hope that that'll force it to re-look for all of the dependencies but it doesn't seem to work. – strttn Sep 30 '22 at 15:57

score 0 · Answer 8 · answered Apr 27 '23 at 08:17

0

I experienced this error on a vpn with netskope enabled. Coming off the vpn fixed it.

answered Apr 27 '23 at 08:17

Matt Doran

2,050
2
16
18

MIME type ('text/html') is not executable, and strict MIME type checking is enabled

8 Answers8