debugging webpack config with react

Question

I get running into several errors every time I try to start my application. I would really love some help debugging this.

These are my errors::

Refused to execute script from 'http://127.0.0.1:8080/scripts/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

GET http://127.0.0.1:8080/scripts/bundle.js net::ERR_ABORTED 404 (Not Found)

Here is my webpack config file:

var path = require('path');

module.exports = [
    {
      entry: './assets/stylesheets/app.scss',
      output: {
        // This is necessary for webpack to compile
        // But we never use style-bundle.js
        path: path.join(__dirname, 'public/scripts'),
        filename: 'style-bundle.js',
      },      
      devServer: {
        contentBase: "./public",
        hot: true
      },
      module: {
        rules: [{
          test: /\.scss$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: 'bundle.css',
              },
            },
            { loader: 'extract-loader' },
            { loader: 'css-loader' },
            {
              loader: 'sass-loader',
              options: {
                includePaths: ['./node_modules'],
              }
            },
          ]
        }]
      },
    },
    {
      entry: "./src/app.js",
      output: {
        path: path.join(__dirname, 'public/scripts'),
        filename: "bundle.js"
      },
      devServer: {
        contentBase: "./public",
        hot: true
      },
      module: {
        loaders: [{
          test: /\.js$/,
          loader: 'babel-loader',
          query: {
            presets: ['env','react']
          }
        }]
      },
    }
  ];

Is there anything that I am missing????

Do you have multiple server processes running at the same time? If so, kill the processes and start it up only one time. — Adam

user10411608 user10411608 · Accepted Answer · 2018-10-19T11:03:37

I'm able to simulate the same 404 Error with a different config. Long story short:

did you run webpack-dev-server?
is your package.json OK?
is the related html file (index.html) OK? Mind the script tag with bundle.js and the path
check and fix the contentBase with devServer at webpack.config.js
module.exports - you only need the devServer once.

Example: devServer: { contentBase: path.join(__dirname, 'public/scripts'), hot: true },

The contentBase has to have a full path like that.

debugging webpack config with react

1 Answers