title: Refused to execute script from bundle.js because its MIME type
body: <p>Hello I'm new to react and I'm trying to attach express framework with react, I followed this tutorial: <a href="https://blog.hellojs.org/setting-up-your-react-es6-development-environment-with-webpack-express-and-babel-e2a53994ade" rel="nofollow noreferrer">https://blog.hellojs.org/setting-up-your-react-es6-development-environment-with-webpack-express-and-babel-e2a53994ade</a> but when I run the server I'm getting the following error:</p>
  
  <blockquote>
    <p>Failed to load resource: the server responded with a status of 404
    (Not Found) localhost/:1 </p>
    
    <p>Refused to execute script from
    '<a href="http://localhost:3000/dist/bundle.js" rel="nofollow noreferrer">http://localhost:3000/dist/bundle.js</a>' because its MIME type
    ('text/html') is not executable, and strict MIME type checking is
    enabled.</p>
  </blockquote>
  
  <p>I have been searching this error for two days now and I haven't find a solution. I think the problem is that the bundle.js is not being created by webpack, I would like to now why is this happening </p>
  
  <p>My project directory is the following:</p>
  
  <p><a href="https://i.stack.imgur.com/GNPIz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GNPIz.jpg" alt="root"></a></p>
  
  <p>My config webpack file:</p>
  
  <pre><code>var webpack = require('webpack');
  var path = require('path');
  
  module.exports = {
      entry: './client/index.js',
      output: {
        path: __dirname,
        filename: 'bundle.js',
        publicPath: '/client/assets/'
      },
      module: {
          loaders: [
            {
              test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                include: path.join(__dirname, 'client'),
                exclude: /node_modules/,
                query: {
                  presets: ['es2015', 'react', 'stage-0']
                }
              },
              {
                test: /\.css$/,
                loader: 'css-loader'
              }
          ]
      },
  };
  </code></pre>
  
  <p>server.js, where I create the express instance:</p>
  
  <pre><code>const path = require('path')
  const express = require('express')
  
  module.exports = {
    app: function () {
      const app = express();
      const indexPath = path.join(__dirname, 'indexDep.html');
      const publicPath = express.static(path.join(__dirname, '../dist'));
  
      app.use('/dist', publicPath);
      app.get('/', function (_, res) { res.sendFile(indexPath) });
  
      return app;
    }
  }
  </code></pre>
  
  <p>And app.js, where I'm running the server:</p>
  
  <pre><code>const Server = require('./server.js')
  const port = (process.env.PORT || 3000)
  const app = Server.app()
  
  if (process.env.NODE_ENV !== 'production') {
    const webpack = require('webpack')
    const webpackDevMiddleware = require('webpack-dev-middleware')
    const webpackHotMiddleware = require('webpack-hot-middleware')
    const config = require('../webpack.dev.config.js')
    const compiler = webpack(config)
  
    app.use(webpackHotMiddleware(compiler))
    app.use(webpackDevMiddleware(compiler, {
      noInfo: true,
      publicPath: config.output.publicPathdist
    }))
  }
  
  app.listen(port)
  console.log(`Listening at http://localhost:${port}`)
  </code></pre>