webpack: Error: Refused to execute script from 'xxxx/app.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Hi guys, I update the webpack to beta.23, when I run it in development every thing fine, but once I run it in production, the error occurs:

Refused to execute script from ‘http://127.0.0.1:8080/dist/vendor.30ac4c9b26b20f70918e.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.

I don’t know why, anyone has idea for this?

Here’s my webpack config :

/* eslint-disable */

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var StyleLintPlugin = require('stylelint-webpack-plugin');

var nodeEnv = process.env.NODE_ENV || 'development';
var isDev = nodeEnv !== 'production';

var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools.config')).development(isDev);

// Setting the plugins for development/prodcution
function getPlugins() {
  var plugins = [];

  plugins.push(
    // Setup global variables for app
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify(nodeEnv) },
      __CLIENT__: JSON.stringify(true),
      __SERVER__: JSON.stringify(false),
      __DEV__: JSON.stringify(isDev),
    }),
    // Style lint
    new StyleLintPlugin({
      syntax: 'scss',
      failOnError: styleLintFailOnError,
    }),
    new webpack.NoErrorsPlugin(),
    webpackIsomorphicToolsPlugin
  );

  var eslintFailOnError = true; // Disable js lint error terminating here
  var styleLintFailOnError = true;  // Disable style lint error terminating here
  var postcssParams = [autoprefixer({ browsers: ['last 2 versions'] })];

  if (isDev) {
    plugins.push(
      new webpack.LoaderOptionsPlugin({
        options: {
          eslint: {
            failOnError: eslintFailOnError,
          },
          postcss: postcssParams,
          debug: true,
        }
      }),
      new webpack.IgnorePlugin(/webpack-stats\.json$/),
      new webpack.HotModuleReplacementPlugin()
    );
  } else {
    plugins.push(
      new webpack.LoaderOptionsPlugin({
        options: {
          eslint: {
            failOnError: eslintFailOnError,
          },
          postcss: postcssParams,
          debug: false,
          minimize: true,
        }
      }),
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        filename: '[name].[chunkhash].js',
        minChunks: Infinity,
      }),
      new ExtractTextPlugin({ filename: '[name].[chunkhash].css', allChunks: true }),
      new webpack.optimize.UglifyJsPlugin({
        compress: { screw_ie8: true, warnings: false },
        output: { comments: false },
        sourceMap: false,
      }),
      new webpack.optimize.OccurrenceOrderPlugin(true),
      new webpack.optimize.DedupePlugin()
    );
  }

  return plugins;
}

// Setting  the entry for development/prodcution
function getEntry() {
  var entry;

  if (isDev) {
    entry = {
      app: [
        'webpack-hot-middleware/client',
        'react-hot-loader/patch',
        './src/client.js',
      ],
    };
  } else {
    entry = {
      app: './src/client.js',
      // Register vendors here
      vendor: [
        'babel-polyfill',
        'react', 'react-dom', 'react-addons-shallow-compare',
        'redux', 'react-redux',
        'redux-thunk',
        'immutable',
        'redux-immutable',
        'react-router',
        'react-router-redux',
        'react-helmet',
        'axios',
      ],
    };
  }

  return entry;
}

// Setting webpack settings
module.exports = function (CSSModules) {
  return {
    cache: isDev,
    // debug: isDev,
    devtool: isDev ? 'cheap-module-eval-source-map' : 'hidden-source-map',
    context: path.join(__dirname, '../..'),
    entry: getEntry(),
    output: {
      path: path.join(__dirname, '../../public/dist'),
      publicPath: '/dist/',
      filename: isDev ? '[name].[hash].js' : '[name].[chunkhash].js',
      chunkFilename: '[name].[chunkhash].js',
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loaders: ['babel', 'eslint'],
          query: {
            cacheDirectory: isDev,
          },
        },
        { test: /\.json$/, loader: 'json' },
        {
          test: /\.css$/,
          loader: isDev ?
            'style!css?localIdentName=[name]__[local].[hash:base64:5]&' + (CSSModules ? 'modules' : '') + '&sourceMap&-minimize&importLoaders=1!postcss'
            : ExtractTextPlugin.extract({ fallbackLoader: 'style', loader: 'css?' + (CSSModules ? 'modules' : '') + '&sourceMap&importLoaders=1!postcss' }),
        },
        {
          test: /\.scss$/,
          loader: isDev ?
            'style!css?localIdentName=[name]__[local].[hash:base64:5]&' + (CSSModules ? 'modules' : '') + '&sourceMap&-minimize&importLoaders=2!postcss!sass?outputStyle=expanded&sourceMap'
            : ExtractTextPlugin.extract({ fallbackLoader: 'style', loader: 'css?' + (CSSModules ? 'modules' : '') + '&sourceMap&importLoaders=2!postcss!sass?outputStyle=expanded&sourceMap&sourceMapContents' }),
        },
        { test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
        { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
        { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
        {
          test: webpackIsomorphicToolsPlugin.regular_expression('images'),
          // Any image below or equal to 10K will be converted to inline base64 instead
          loaders: [
            'url?limit=10240',
            'image-webpack?bypassOnDebug',  // Using for image optimization
          ],
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.jsx', '.json'],
      modules: [
        'src',
        'node_modules',
      ],
    },
    plugins: getPlugins(),
  };
};

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 20 (2 by maintainers)

Most upvoted comments

Hello @sokra,

I fixing it by remove the ‘eslint-loader’ from my config, close this issue.

@udahari For me it happened since I have two different set of servers load balancing my request. And they didn’t have same files.

I think we are unnecessarily disturbing others on this thread. You mind taking this conversation somewhere else?

@Aftabnack I think I have the same problem, So how do you solve the issue ? I have restart the webpack but still have the issue.

@udahari For me the issue was that the file that was requested didn’t exist on the server. And it was serving the fallback index.html instead. I mistook it to think the contentHash wasn’t consistent across multiple rebuilds.

Spend several hours on this. Realised that there was a service open on 8080 port and webpack-dev-server --hot --progress --inline --config webpack/hot-dev.config.js --host 0.0.0.0 didn’t throw any errors, but silenced and showed compile was successful. I killed the service and it worked!

Never mind. It is because I have multiple instances of servers serving the app.

All of them are built separately, and for some reason, using contentHash is not giving same output on both of them.

Does the file exists at this location? If yes, it’s a server configuration issue. If no, where is the file?