Problem with `webpack-cli` & Live Reload Feature

[FilipWozniak]

I followed the instructions about live reloading (reading "Live Reload" chapter) whilst trying to implement that feature in brand new Django/Wagtail/Vue/Webpack applications, but after executing npm run start, I keep getting the same error message.

devServer: {
  host: "0.0.0.0",
  port: 9091,
  headers: {
      "Access-Control-Allow-Origin": "*",
  },
  writeToDisk: true,
  watchFiles: [
      Path.join(__dirname, '../../gphn/**/*.py'),
      Path.join(__dirname, '../../gphn/**/*.html'),
  ]
}

System: MacOS Monterey Version of npm: 8.1.2 Version of Node: 16.13.2

"webpack": "^5.50.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"

Am I overlooking something very obvious?

[michael-yin]

@FilipWozniak

Please try to remove writeToDisk and watchFiles and see if it works.

Some config might vary in different Webpack related packages.

Thx.

[michael-yin]

@FilipWozniak

I just checked this issue on my local env.

Please upgrade to "webpack-dev-server": "^4.7.2"

And then use config below

  devServer: {
    host: "0.0.0.0",
    port: 9091,
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
    devMiddleware: {
      writeToDisk: true,
    },
    watchFiles: [
      Path.join(__dirname, '../../django_app/**/*.py'),
      Path.join(__dirname, '../../django_app/**/*.html'),
    ],
  },

[FilipWozniak]

@michael-yin

It works like a charm! Thank you very much 🙂

I still can't believe that it took you less than half an hour... 😉