`./bin/webpack-dev-server` doesn't work with rails 6.1.4.1

[nukerr]

Steps to reproduce

1. Create a new rails 6.1.4.1 project : rails new <project name> -d=postgresql.
2. Run ./bin/webpack-dev-server.

The command moved into a separate package: @webpack-cli/serve
Would you like to install serve? (That will run yarn add -D @webpack-cli/serve) (yes/NO) : yes

3. An error is thrown.

TypeError: Class constructor ServeCommand cannot be invoked without 'new'
    at runWhenInstalled (/home/user/app/node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
    at /home/user/app/node_modules/webpack-cli/bin/utils/prompt-command.js:124:15
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

Expected behavior

Webpack dev server running correctly without error.

Actual behavior

./bin/webpack-dev-server output:

home/user/app/node_modules/webpack-cli/bin/utils/prompt-command.js:46
	return func(...args);
	       ^

TypeError: Class constructor ServeCommand cannot be invoked without 'new'
    at runWhenInstalled (/home/user/app//node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
    at promptForInstallation (/home/user/app/node_modules/webpack-cli/bin/utils/prompt-command.js:140:10)
    at /home/user/app/node_modules/webpack-cli/bin/cli.js:32:43
    at Object.<anonymous> (/home/user/app/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)

System configuration

Rails version: 6.1.4.1
Ruby version: 3.0.2

[AhmedNadar]

I have similar issue with ./bin/webpack-dev-server and Rails 6.1.4.1.

Webpacker behavior

$ ./bin/webpack-dev-server
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'watchOptions'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

Webpacker configuration

In config/webpacker.yml

watch_options:
  ignored: '**/node_modules/**'

Package.json

"dependencies": {
        "@rails/webpacker": "^6.0.0-rc.1",
        "webpack-cli": "^4.8.0",
        "webpack-dev-server": "^4.0.0",
},
"devDependencies": {
        "@webpack-cli/serve": "^1.5.2",
}

System configuration

Rails version: 6.1.4.1
Ruby version: 3.0.0
Gemfile gem 'webpacker', git: 'https://github.com/rails/webpacker.git'

[intrip]

Which NodeJS version are you using?

[ndrean]

Same pb. Mine is v14.15.1. Just run webpack-cli to get this error.

[toddsiegel]

Same here. This got me back up and running again.

diff --git a/package.json b/package.json
index 23e15fa..3f7788d 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,6 @@
   },
   "version": "0.1.0",
   "devDependencies": {
-    "webpack-dev-server": "^4.0.0"
+    "webpack-dev-server": "3.11.2"
   }
 }

[johnpitchko]

@toddsiegel tried your solution but encountered this error:

/Users/johnpitchko/Code/blog/node_modules/webpack-cli/bin/utils/prompt-command.js:46
	return func(...args);
	       ^

TypeError: Class constructor ServeCommand cannot be invoked without 'new'
    at runWhenInstalled (/Users/johnpitchko/Code/blog/node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
    at promptForInstallation (/Users/johnpitchko/Code/blog/node_modules/webpack-cli/bin/utils/prompt-command.js:140:10)
    at /Users/johnpitchko/Code/blog/node_modules/webpack-cli/bin/cli.js:32:43
    at Object.<anonymous> (/Users/johnpitchko/Code/blog/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)

[toddsiegel]

These are all the relevant webpack(er) versions I am running on a new Rails 6.1.4.1 app. Hope this helps.

"dependencies": {
  ... 
  "@rails/webpacker": "5.4.2",
  "webpack": "^4.46.0",
  "webpack-cli": "^3.3.12"
},
"devDependencies": {
  "webpack-dev-server": "3.11.2"
}

[hahmed]

This looks like it's a webpack (likely a webpack-cli) issue... I wonder if this is relevant webpack/webpack-cli#2272 (comment)?

I can also confirm that creating a new rails app with node --version 15.0.1 I also get the same issue as OP.

@AhmedNadar your issue is slightly different, looks like you have webpack cli working but have a config issue.

Looks like watch_options should be changed to static, see the setup docs here https://webpack.js.org/configuration/dev-server/

watch_options:
      ignored: '**/node_modules/**'

[brenogazzola]

I've upgraded one of my projects from 5 to 6 and stumbled on most of the errors listed here, so...

@nukerr I understand you are creating a new project, but could you please follow these steps from the upgrade guide? I think they might finish installing the files/configurations that are currently missing.

yarn add @rails/webpacker@6.0.0-rc.1 --exact
bundle exec rails webpacker:install

@AhmedNadar Webpacker 6 relies on a new version of webpack, which has some incompatible configurations with the previous one. Did you just upgrade from Webpacker 5 and kept your old configuration files that were in config/webpack?

@johnpitchko This looks like you downgraded the package but are still using the version 4 binary. I've had this problem before and it usually takes some fiddling telling yarn to remove the dev server and then install it back to fix:

yarn remove webpack-dev-server
yarn add webpack-dev-server@3.11.2 --exact

[dhh]

webpack-dev-server is not compatible with Webpacker 5.x. You'll need Webpacker 6.0 for compatibility. Otherwise go back to webpacker-dev-server 3.x.

[h0jeZvgoxFepBQ2C]

webpack-dev-server is not compatible with Webpacker 5.x. You'll need Webpacker 6.0 for compatibility. Otherwise go back to webpacker-dev-server 3.x.

would be great to mention this in an upgrade guide. And what is the replacement for the webpack-dev-server? Thanks!

[ArasayRB]

You can watch this article that explain how fix it: https://tundaapo.medium.com/the-web-as-a-means-of-communication-starting-with-rails-c10aa28b4fc2