reactjs – React with SSR and WebpackHotMiddleware

When I use Webpack Hot Middleware according to the document page

it always show the error, did I missing some configuration?

ReferenceError: __resourceQuery is not defined
    at Object.<anonymous> \node_modules\webpack-hot-middleware\client.js:17:1)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)

There is the following code:

webpack.config.js

module.exports = {
  target: 'node',
  mode: 'development',
  externals: [nodeExternals()],
  entry: ['webpack-hot-middleware/client', './server/index.js'],
  output: {
    filename: 'server.js',
    path: path.resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
            ],
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ]
};

index.js

const express = require('express');
const webpack = require('webpack');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const AppServer = require('../src/AppServer').default;

const app = express();
const PORT = process.env.PORT || 3001;

const config = require('../webpack.config');
const compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath,
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get("https://stackoverflow.com/", (req, res) => {
  const content = ReactDOMServer.renderToString(<AppServer />);
  const html = `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>React SSR</title>
      </head>
      <body>
        <div id="root">${content}</div>
      </body>
    </html>
  `;

  res.send(html);
});

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

webpack with the following version
“webpack”: “^5.89.0”,
“webpack-cli”: “^5.1.4”,
“webpack-hot-middleware”: “^2.25.4”,
“webpack-dev-middleware”: “^6.1.1”,

And about entry in module.exports, it say can add param after path
such as webpack-hot-middleware/client?path=/__what&timeout=2000&overlay=false
but it always show the error as following

Error: Cannot find module 'webpack-hot-middleware/client?path=/__what&timeout=2000&overlay=false'
Require stack:

Read more here: Source link