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

Question

I use Webpack bundler and Webpack dev server for local development. The front-end is in React.js+Redux and the back-end in Node.js and koajs.

In back-end, I use pass

Answer 1

i had a similar issue and thought i'd post my solution incase anyone had a similar issue. basically, i was trying to refresh my app on a dynamic subroute, localhost:3000/route/dynamicRoute, and it was throwing a similar error. i solved my issue by adding publicPath: '/' to my output settings in my webpack config. the following is my webpack.config.js for reference.

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

const outputDirectory = 'dist';

module.exports = {
 entry: ['babel-polyfill', './src/client/index.js'],
 output: {
  path: path.join(__dirname, outputDirectory),
  filename: 'bundle.js',
  publicPath: '/'
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
     loader: 'babel-loader'
    }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  },
  {
   test: /\.(pdf|jpg|png|gif|svg|ico)$/,
    use: [
     {
      loader: 'url-loader'
     },
    ]
   }
 ]
},
devServer: {
  port: 3000,
  open: true,
  proxy: {
   '/api': 'http://localhost:8080'
  },
  historyApiFallback: true,
  contentBase: './public/index.html',
  hot: true
 },
 plugins: [
  new CleanWebpackPlugin([outputDirectory]),
  new HtmlWebpackPlugin({
   template: './public/index.html',
   favicon: './public/favicon.ico'
  })
 ]
};