CODEWITHSUNDEEP
node.jswebpackwebpack-dev-server
JJ F
JJ F

Reputation: 1539

Webpack dev server not reloading

Suddenly webpack-dev-server is not reloading upon changes in the sources any more. HRM is loaded correctly, but changing the source code does not trigger a hot reload any more. Previously it was working fine.

I found multiple people were asking in Stackoverflow about the same problem. Each of them was solved with a different solution, what I tried but none of them worked for me. Therefore this is not a duplicated question since I tried the already provided solution but none worked for me.

I tried clean the packages and reinstall all of them I tried to use different paths into the "entry" of webpack configuration

webpack.config.js:

var path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

const webpack = require('webpack')

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  resolve: {
      extensions: [".ts", ".tsx", ".js"]
    },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },

    plugins: [
          new HtmlWebpackPlugin({
            title: "test app",
            filename: "./index.html",
            template: "src/index.html",
            inject: "body",
          }),
          new CopyWebpackPlugin([{ from: 'assets', to: 'assets'}]),
          new webpack.DefinePlugin({
              VERSION:     JSON.stringify(process.env.npm_package_version),
      }),
      new webpack.HotModuleReplacementPlugin({

      }),
    ],

  devServer: {
    contentBase: path.join(__dirname, 'dist'),
compress: true,
host: "localhost",
port: 9000,
hot: true,
disableHostCheck: true,
  },
  module: {
    rules: [
    { test: /\.(tsx)?$/, 
      loader: "ts-loader",
        exclude: path.join(__dirname, 'node_modules'),
    },
    {test: /\.css$/, use: ['style-loader',{loader:'css-loader',     options:{}}]}
    ],
  },
  node: {
fs: 'empty'
  }

};

I expect the HRM is working as usual.

Upvotes: 1

Views: 1407

Answers (2)

Filip Dupanović
Filip Dupanović

Reputation: 33640

HMR depends on webpack being notified of filesystem events and in my personal experiences host-specific issues related to watching files have been the sole issue for HMR and compiler watching not working as expected.

At the time of writing, watching might silently fail due to system limits. Additionally, some environments need to be configured to use polling.

There's a related document on Watch and WatchOptions that provide more details on how to configure webpack. Additionally, chokidar, which is delegated to, provides alternative means for configuration, such as CHOKIDAR_USEPOLLING from the process' environment.

Upvotes: 0

JJ F
JJ F

Reputation: 1539

I started working again suddenly and without any apparent reason. I did not modify any configuration file or source file and now, running the dev server will hot-reload properly upon changes in the source code.

I can therefore conclude it is not an error in any configuration files of the project but might be related to the implementation itself of the dev server or the operating system not passing by the changes in files?

Upvotes: 1

Related Questions