Stuck at [HMR] Waiting for update signal from WDS

Hello,

I don’t succeed to make this plug work.

This is my config:

// webpack.config.js
/* eslint-disable no-empty, prefer-named-capture-group, require-unicode-regexp, max-lines-per-function */
const path = require("path")
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const CopyWebpackPlugin = require("copy-webpack-plugin")
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin")
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer")

const babelConfig = require("./__webpack__/webpack.babel-config")
const { envVars } = require("./__webpack__/webpack.helpers")

const customMedia = require("./media-queries.json")

const SRC_DIR = path.resolve(__dirname, "src")
const PUBLIC_DIR = path.resolve(__dirname, "public")
const DIST_DIR = path.resolve(__dirname, "dist")

module.exports = (env) => ({
  mode: "development",

  // the source
  entry: [`${SRC_DIR}/index.js`],

  // the destination
  output: {
    path: DIST_DIR,
    filename: "index.js",
    publicPath: "/",
  },

  resolve: {
    fallback: {
      path: false,
    },
    alias: {
      "~": `${SRC_DIR}`, // thanks to that, we can use import xxx = '~/file'
    },
  },

  // active devtools
  // devtool: "cheap-module-inline-source-map",
  devtool: "source-map",

  // server
  devServer: {
    https: envVars[env.stage].API_URL.startsWith("https"),
    port: envVars[env.stage].API_URL.startsWith("https") ? 443 : 8080,
    historyApiFallback: true,
    host: env.host,
    hot: true,
    hotOnly: true,
  },

  // plugins
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
      favicon: "public/favicon.ico",

      stage: JSON.stringify(env.stage),

      crispToken: JSON.stringify(envVars[env.stage].CRISP_TOKEN),
      segmentToken: JSON.stringify(envVars[env.stage].SEGMENT_TOKEN),
    }),

    new CopyWebpackPlugin({
      patterns: [
        {
          from: PUBLIC_DIR,
          to: DIST_DIR,
        },
      ],
    }),

    new webpack.DefinePlugin({
      STAGE: JSON.stringify(env.stage),

      SENTRY_TOKEN: JSON.stringify(envVars.SENTRY_TOKEN),
      MOCKS_ENABLED: JSON.stringify(envVars.MOCKS_ENABLED),

      API_URL: JSON.stringify(envVars[env.stage].API_URL),
      CRISP_TOKEN: JSON.stringify(envVars[env.stage].CRISP_TOKEN),
      CSRF_TOKEN_COOKIE_NAME: JSON.stringify(
        envVars[env.stage].CSRF_TOKEN_COOKIE_NAME,
      ),
      JOURNAL_URL: JSON.stringify(envVars[env.stage].JOURNAL_URL),
      LOGIN_URL: JSON.stringify(envVars[env.stage].LOGIN_URL),
    }),

    new BundleAnalyzerPlugin({
      analyzerMode: "static",
      openAnalyzer: false,
      reportFilename: "../bundle-report.html",
    }),

    new ReactRefreshWebpackPlugin(),
  ],

  // what will be used for each type of code
  module: {
    rules: [
      // javascript
      {
        enforce: "pre",
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "eslint-loader",
          },
          {
            loader: "stylelint-custom-processor-loader",
            options: {
              emitWarning: true,
            },
          },
        ],
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: babelConfig,
      },

      // files
      {
        test: /\.(woff|woff2|eot|ttf)$/,
        type: "asset/inline",
      },

      // styles
      {
        enforce: "pre",
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  ["stylelint"],
                  ["postcss-reporter", { clearReportedMessages: true }],
                ],
              },
            },
          },
        ],
      },

      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              modules: false,
              importLoaders: 1,
              import: true,
            },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  ["autoprefixer"],
                  ["postcss-custom-media", { importFrom: [{ customMedia }] }],
                ],
              },
            },
          },
        ],
      },

      {
        test: /\.module\.css$/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              modules: true,
              importLoaders: 1,
              localIdentName: "[path][name]--[local]-___[hash:base64:5]",
              import: true,
            },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  ["autoprefixer"],
                  ["postcss-custom-media", { importFrom: [{ customMedia }] }],
                ],
              },
            },
          },
        ],
      },

      // images
      {
        test: /.*\.(gif|png|jpe?g|svg)$/i,
        type: "asset/resource",
      },
    ],
  },
})

and

// webpack.babel-config.js

module.exports = {
  presets: [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        runtime: "automatic",
        importSource: "@emotion/react",
      },
    ],
  ],
  plugins: [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-optional-chaining",
    "babel-plugin-styled-components",
    [
      "@emotion/babel-plugin",
      {
        sourceMap: true,
        autoLabel: "dev-only",
        labelFormat: "[dirname]-[filename]--[local]",
        cssPropOptimization: true,
      },
    ],
    "react-refresh/babel",
  ],
}

Any reason why?

I use webpack 5.

Thanks!

[pmmmwh]

@pmmmwh I’m not sure to understand exactly what does browserlist do there as target but yeah totally! I only use target: webin dev mode. I let webpack by default about that for prod mode. 😃

It’s a new mode in Webpack where they would tweak the bundled output depending on browserslist queries, so if you use browserslist it could create bundles that are more optimised for your targets.

It’s basically the web target but with additional optimisations sprinkled on top, but since it doesn’t match the literal string web it confuses WDS.

[pmmmwh]

This is actually a bug from webpack-dev-server - when web is omitted they somehow would default to browserlist and that messes with HMR injection. If you still want to use the default, maybe you can only set the web target when you are in development mode.