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

chobo2

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

Omri Luzon

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/

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

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

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

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

Refused to execute script because strict MIME type checking is enabled

Error on minification in console "Refused to execute because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled"

Refused to apply style from '' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

Refused to apply style from 'URL' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

Refused to apply style from [Link] because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

"Refused to apply style from because its MIME type "('font/woff2')" is not a supported stylesheet MIME type, and strict MIME checking is enabled"

Refused to execute script, strict MIME type checking is enabled?

Refused to execute script from '..../angular.min.js' because its MIME type ('application/octet_stream') is not executable, and strict MIME type check

Refused to apply style because its MIME type "text/html" is not supported stylesheet MIME type, and strict MIME checking is enabled

(Node Express)Refused to apply style because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

Refused to apply style from... because its MIME type ('text/html') is not a supported style-sheet MIME type, and strict MIME checking is enabled

Refused to execute script from '*.ts' because its MIME type ('video/vnd.dlna.mpeg-tts') is not executable

Refused to execute script from 'url' because its MIME type ('image/jpeg') is not executable

MIME type ('application/json') is not executable, and strict MIME type checking is enabled

Webpack dev server throws error - Refused to execute script because its MIME type ('text/html') is not executable

Importing jQuery plugin into Angular 2+ Refused to execute script because its MIME type ('text/html') is not executable

Rewrite requests from loopback to angular2 (Refused to execute script because its MIME type ('text/html') is not executable)

Chrome and Spring security: Refused to execute script from 'http://<server url>/assets/app.js' because its MIME type ('') is not executable

Tensorboard is showing a blank page (Refused to execute script from 'http://localhost:6006/index.js' because its MIME type)

Refused to execute *path_to_bundle* as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type

Refused to apply style because its MIME type ('text/html') is not a supported stylesheet MIME type

Refused to apply style from 'http://localhost:3000/style.css' because its MIME type ('text/html')

Node refused to apply style because its MIME type ('text/html') is not a supported stylesheet MIME

Disable Chrome strict MIME type checking

Refused to display style because MIME type

Webpack + React.lazy + nested routing: Refused to apply style from '*/css/main.css' because its MIME type ('text/html')