webpack config recordPath is mandatory

[Roman Maleev]

Documentation Is:

• Missing
• Needed
• Confusing
• Not Sure?

Please Explain in Detail...

Please mention in documentation that webpack config recordPath is mandatory to enable HMR in some cases.
I use HMR together with mini-css-extract-plugin and css-loader.
Took me a while to figure it out...

Your Proposal for Changes

Mention in Installation & Usage that webpack config recordPath might be mandatory when using together with other loaders

[Glen Mailer]

This isn’t something i’ve ever run into, and i’ve never set that config param.

If you can narrow down the scenario and why it’s needed, a PR would be accepted.

[Roman Maleev]

I have a quite complex configuration and unfortunately it only works when recordsPath is set.
Found some info that might be related:
https://github.com/webpack/docs/wiki/configuration#output
https://webpack.js.org/configuration/other-options/#recordspath

[Roman Maleev]

Here is my webpack config:

  const config = {
    mode: 'development',
    target: 'web',
    devtool: 'eval',
    entry: {
      app: [
        'webpack-hot-middleware/client?reload=true&timeout=60000',
        './src/client/index.tsx'
      ],
    },
    resolve: {
      modules: ['./src', './node_modules'],
      extensions: ['.js', '.ts', '.tsx'],
    },
    output: {
      path: '/static/',
      filename: '[name].js',
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: [
            {
              loader: 'thread-loader',
              options: {
                workers: cpus - 1,
                poolTimeout: Infinity,
              },
            },
            {
              loader: 'cache-loader',
            },
            {
              loader: 'babel-loader',
              options: {
                plugins: ['react-hot-loader/babel'],
              },
            },
            'webpack-module-hot-accept',
            { loader: 'ts-loader', options: { happyPackMode: true } },
          ],
          include: './src',
        },
        {
          test: /\.scss$/,
          use: [
            'css-hot-loader',
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: { sourceMap: false },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: false,
                plugins: [
                  autoprefixer({
                    browsers: ['last 2 versions', 'ie >= 10'],
                    cascade: false,
                  }),
                ],
              },
            },
            {
              loader: 'sass-loader',
              options: { sourceMap: CSS_SOURCEMAPS },
            },
          ],
        },
        {
          test: /\.(ttf|eot|svg|jpg|gif|png|woff(2)?)(\?[a-z0-9]+)?$/,
          loader: 'file-loader',
        },
      ],
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new MiniCssExtractPlugin({
        allChunks: true,
        filename: '[name].css',
      }),
    ],
    optimization: {
      noEmitOnErrors: true,
      splitChunks: {
        name: true,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            chunks: 'all',
            name: 'vendor',
            enforce: true,
            reuseExistingChunk: true,
          },
        },
      }
    },
    performance: {
      maxEntrypointSize: 5000000,
      maxAssetSize: 3000000,
    },
  }

[Glen Mailer]

According to the note on https://github.com/webpack/docs/wiki/configuration#recordspath-recordsinputpath-recordsoutputpath this is something to do with the compiler being run multiple times, which is unusual.

[Roman Maleev]

Exactly, that's the case, I use my own file watchers with compiler.run and webpack-hot-middleware without webpack-dev-server in isomorphic app.

Also webpack-hot-middleware doesn't work together with memory-fs (as in official webpack example).

[Glen Mailer]

I'm going to close this issue as it doesn't seem to be related to hot-middleware specifically, and is a general webpack configuration issue in complex custom setups.