I am getting the following error in the browser console when trying to live reload / HMR on Webpack. It occurs after I make a save after a file change.

[HMR] Update failed: Error: Failed to fetch update manifest Internal Server Error

The react app I'm setting up is currently running off port 8000, could this be the reason it's failing?

Interestingly when I have 'writeToDisk: true' set it seems to work, but I get a build up of a ton of hot update js files which clog the source directory so this is not optimal.

I'm sure there is something fairly simple I'm missing. Any help would be fantastic.

Thank you.

Here is my webpack config:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = function(_env, argv) {
  const isProduction = argv.mode === "production";
  const isDevelopment = !isProduction;

  return {
    devtool: isDevelopment && "cheap-module-source-map",
    entry: [
        "./src/index.js",
        "./src/app.scss"
    ],
    output: {
      path: path.resolve(__dirname, "../client/assets/"),
      filename: "js/main.js",
      publicPath: "/"
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        cacheDirectory: true,
                        cacheCompression: false,
                        envName: isProduction ? "production" : "development"
                    }
                 }
            },
            {
                test: /\.s[ac]ss$/i,
                exclude: /node_modules/,
                use: [
                  // Creates `style` nodes from JS strings
                  "style-loader",
                  // Translates CSS into CommonJS
                  "css-loader",
                  // Compiles Sass to CSS
                  "sass-loader",
                ],
              },
        ]
    },
    resolve: {
        extensions: [".js", ".jsx"]
    },
    plugins: [
        isProduction &&
        new MiniCssExtractPlugin({
            filename: "main.css",
            chunkFilename: "main.chunk.css"
        })
    ].filter(Boolean),
    devServer: {
        contentBase: path.join(__dirname, "../client/assets/js"),
        publicPath: "/",
        port: '8080',
        press: true,
        hot: true,
        // writeToDisk: true,
        watchContentBase: true
     }  
  };
};```

I am getting the following error in the browser console when trying to live reload / HMR on Webpack. It occurs after I make a save after a file change.

[HMR] Update failed: Error: Failed to fetch update manifest Internal Server Error

The react app I'm setting up is currently running off port 8000, could this be the reason it's failing?

Interestingly when I have 'writeToDisk: true' set it seems to work, but I get a build up of a ton of hot update js files which clog the source directory so this is not optimal.

I'm sure there is something fairly simple I'm missing. Any help would be fantastic.

Thank you.

Here is my webpack config:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = function(_env, argv) {
  const isProduction = argv.mode === "production";
  const isDevelopment = !isProduction;

  return {
    devtool: isDevelopment && "cheap-module-source-map",
    entry: [
        "./src/index.js",
        "./src/app.scss"
    ],
    output: {
      path: path.resolve(__dirname, "../client/assets/"),
      filename: "js/main.js",
      publicPath: "/"
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        cacheDirectory: true,
                        cacheCompression: false,
                        envName: isProduction ? "production" : "development"
                    }
                 }
            },
            {
                test: /\.s[ac]ss$/i,
                exclude: /node_modules/,
                use: [
                  // Creates `style` nodes from JS strings
                  "style-loader",
                  // Translates CSS into CommonJS
                  "css-loader",
                  // Compiles Sass to CSS
                  "sass-loader",
                ],
              },
        ]
    },
    resolve: {
        extensions: [".js", ".jsx"]
    },
    plugins: [
        isProduction &&
        new MiniCssExtractPlugin({
            filename: "main.css",
            chunkFilename: "main.chunk.css"
        })
    ].filter(Boolean),
    devServer: {
        contentBase: path.join(__dirname, "../client/assets/js"),
        publicPath: "/",
        port: '8080',
        press: true,
        hot: true,
        // writeToDisk: true,
        watchContentBase: true
     }  
  };
};```

• javascript
• node.js
• webpack

1 Answer 1

Found the solution if anyone in the future is as hopeless as I was!

The bundled js file needed to be imported into the html on the same port that the webpack dev server was running. Here is my updated webpack config:

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = function(_env, argv) {
  const isProduction = argv.mode === "production";
  const isDevelopment = !isProduction;

  return {
    devtool: isDevelopment && "cheap-module-source-map",
    mode: 'development',
    entry: [
        "./src/index.js",
        "./src/app.scss"
    ],
    output: {
      path: path.resolve(__dirname, "../client/assets/"),
      filename: "js/main.js",
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        cacheDirectory: true,
                        cacheCompression: false,
                        envName: isProduction ? "production" : "development"
                    }
                 }
            },
            {
                test: /\.s[ac]ss$/i,
                exclude: /node_modules/,
                use: [
                  // Creates `style` nodes from JS strings
                  "style-loader",
                  // Translates CSS into CommonJS
                  "css-loader",
                  // Compiles Sass to CSS
                  "sass-loader",
                ],
              },
        ]
    },
    resolve: {
        extensions: [".js", ".jsx"]
    },
    plugins: [
        isProduction &&
        new MiniCssExtractPlugin({
            filename: "main.css",
            chunkFilename: "main.chunk.css"
        })
    ].filter(Boolean),
    devServer: {
        port: '8080',
        hot: true,
        press: true,
     }  
  };
};

and here is my html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
    </div>
    <script src="http://localhost:8080/js/main.js"></script>
</body>
</html>

Hope this helps someone somewhere in the future.