Webpack Dev Server Throws Error - Refused To Execute Script Because Its Mime Type ('text/html') Is Not Executable

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 passportjs library

Solution 1:

Looking into Webpack further we should be clear about what Webpack is and what it is used for. Webpack is front end tool, it will build front end projects and has the capability of managing tasks similar to gulp/grunt. It can be a server to serve static content. But what it is not is a full fledged back end server. You can't easily build back end API and manage complex routing. This includes things like login functionality. Instead of reinventing the wheel, use Webpack as a dev tool to easily modify and see the updated result for web design. And if you need more functionality integrate Webpack by running it in watch mode and run the back end server at the same time and setup a proxy so that Webpack will defer to the back end server for complex routing. You can use any back end technology, though Webpack is built on Common.js library so integrating it into node.js and express seems to be the easiest because they are part of a javascript ecosystem.

If I could comment I would, anyhow, I was reading through the webpack docs for the DevServer and I Think that the server is responding with the incorrect MIME type possibly because it isn't finding the bundle.js script where it is expecting it. I noticed the console output being 'http://localhost:8090/auth/bundle.js' and in the documentation the dev server expects it in the root. I think that if bundle.js is really in the auth directory that you may need to tell the server where it is with the publicPath option.

output: {
  filename: 'bundle.js',
  sourceMapFilename: '[file].map',
  path: path.resolve('build/js/),// moves the bundle.js out of the root
  publicPath: '/auth/' // it is recommended that the publicPath is declared in both output and devServer// publicPath links the path of bundle.js to this path in the html.
},
devServer: {
  contentBase: path.resolve(__dirname), // New
  historyApiFallback: true,
  publicPath: "/auth/"// Both publicPath options should be the same as what is in your html loading the scripts
},

As I understand the webpack dev server, the bundle.js is not written to disc. It is served virtually.

Now with all of this there is a need to either proxy the already built node.js server or build one to handle just the api you need to use. Webpack provides a dev middleware module to use as middleware in a basic node.js express server. You can see the basics of the middleware here. What you really need to start with from the documentation is installing via npm webpack-dev-middleware and express

npm install --save-dev webpack-dev-middleware express

Then create a new server file like index.js in the root of the project because you already have a server.js. Now create the basic server that you need with only the routing and packages you need to handle the api calls.

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

This is from the webpack website and you will need to do your own api routing. And you would run the project like a normal node project and it should handle the bundle.js requests.

And let's not forget that there is a plubin for koa koa-webpack-dev.I haven't personally used koa, but if you need it you can see how to use it here.

Solution 2:

i had a similar issue and thought i'd post my solution incase anyone had the same. basically, i was trying to refresh my app on a dynamic subroute, localhost:3000/route/dynamicRoute, and it was throwing a similar error to what's mentioned in the question. 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');
constHtmlWebpackPlugin = require('html-webpack-plugin');
constCleanWebpackPlugin = 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: [
  newCleanWebpackPlugin([outputDirectory]),
  newHtmlWebpackPlugin({
   template: './public/index.html',
   favicon: './public/favicon.ico'
  })
 ]
};