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

7
votes

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.

6
reactjsreact-router
type should be application/javascript, not text/javascript. – Sulthan
No, it is not working with application/javascript too. – kamal11
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
I had the same issue. This SO solution worked for me. – Matt Hahn

6 Answers

7
votes

Try changing 

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

To

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

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

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

Try changing webpack.config.js add publicPath 

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

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.

1
votes

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 :).

0
votes

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