Webpack 5: DevServer does not trigger recompile when files change despite HMR connecting successfully

Question

Webpack version

webpack: 5.65.0
webpack-cli: 4.9.1
webpack-dev-server 4.7.1

Hi all,

I am pretty new to coding and trying to set up a monolithic application using React on the Frontend and Hanami (a Ruby framework) on the Backend. I wanted to use Webpack to handle my .js and .jsx files because I was familiar with it from Ruby on Rails.

After several hours of configurations, I have managed to get Webpack to work and compile my javascript files successfully. However, I cannot get hot reloading to work.

I run webpack devserver together with my Hanami WEBrick server (on different ports) and Webpack Devserver compiles the files successfully and everything is correctly served on my Hanami server.

The console reports that I am successfully connected to HMR and it is enabled, as below:

However, whenever I make changes to any of my JS / JSX files that were processed by Webpack, they do not trigger a recompile. I only see the changes when I shut down and start my server again.

I tried different solutions from looking at the Webpack Github repo, as well as the documentation, but no luck.. Any ideas why the hot reload is not working?

Link to Github repo

Link to Github repo with the issue

Package.json

  "name": "sakellion",
  "version": "0.0.1",
  "type": "module",
  "private": true,
  "devDependencies": {
    "@babel/core": "^7.16.5",
    "@babel/preset-env": "^7.16.5",
    "@babel/preset-react": "^7.16.5",
    "babel-loader": "^8.2.3",
    "rails-erb-loader": "^5.5.2",
    "stats-webpack-plugin": "*",
    "webpack": "*",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "*"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "dependencies": {
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

Webpack.config.cjs file:

  StatsPlugin = require("stats-webpack-plugin");

var devServerPort = process.env.WEBPACK_DEV_SERVER_PORT,
  devServerHost = process.env.WEBPACK_DEV_SERVER_HOST,
  publicPath = process.env.WEBPACK_PUBLIC_PATH;

var config = {
  target: "web",
  entry: {
    index: path.join(
      __dirname,
      "apps",
      "web",
      "assets",
      "javascripts",
      "packs",
      "index.js"
    ),
    demo: path.join(
      __dirname,
      "apps",
      "web",
      "assets",
      "javascripts",
      "packs",
      "demo.js"
    ),
  },

  mode: "development",

  output: {
    path: path.join(__dirname, "public"),
    filename: "[name]-[chunkhash].js",
    publicPath: publicPath,
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      {
        test: /\.erb$/,
        enforce: "pre",
        loader: "rails-erb-loader",
      },
    ],
  },
  plugins: [new StatsPlugin("webpack_manifest.json")],
};

if (process.env.INBUILT_WEBPACK_DEV_SERVER) {
  config.devServer = {
    static: { directory: path.join(__dirname, "public") },
    client: {
      progress: true,
    },
    hot: true,
    watchFiles: ["./apps/web/assets/javascripts/**/*"],
    port: devServerPort,
    headers: { "Access-Control-Allow-Origin": "*" },
    // proxy: {
    //   "/": {
    //     target: `http://localhost:2300`,
    //     secure: false,
    //   },
    // },
  };
  config.output.publicPath = "//" + devServerHost + ":" + devServerPort + "/";
}

module.exports = config;

Thanks!

Webpack 5: DevServer does not trigger recompile when files change despite HMR connecting successfully

0 Answers0