Rails Webpacker React: /bin/webpack-dev-server The command moved into a separate package: @webpack-cli/serve

Question

Today I create a fresh Rails webpacker app with command:

$ rails new my-app --webpacker=react -d mysql

The fresh app generated smoothly until I tried to run:

$ ./bin/webpack-dev-server

The webpack-cli return a message:

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) :

I tried to select yes but the installation of webpack-cli is not success with message:

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @webpack-cli/serve@1.5.2
info All dependencies
└─ @webpack-cli/serve@1.5.2
Done in 2.11s.
TypeError: Class constructor ServeCommand cannot be invoked without 'new'
    at runWhenInstalled (/home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
    at /home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:124:15
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

and when I run ./bin/webpack-dev-server command I get error messages:

/home/yohanes/Projects/my-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/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
    at promptForInstallation (/home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:140:10)
    at /home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/cli.js:32:43
    at Object.<anonymous> (/home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)

Here is my package.json:

{
  "name": "my-app",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.14.5",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.2",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "turbolinks": "^5.2.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^4.0.0"
  }
}

and my node.js version

$ node -v
v14.17.5

Answer 1

For now, temporarily I solve it by using the previous version:

"devDependencies": {
  "webpack-dev-server": "^3.11.2"
}

Update: The webpack-cli & webpack-dev-server at devDependencies of fresh package.json generated by using rails new my-app --webpacker=react are:

"dependencies": {
  ...
  "webpack-cli": "^3.3.12"
  ...
},
"devDependencies": {
  "webpack-dev-server": "^4.0.0"
}

If we see from here, we found that webpack-dev-server v.4.0.0 depends on "webpack-cli": "^4.7.2" which is incompatible with fresh rails webpacker package configurations that use "webpack-cli": "^3.3.12" as dependency.

Usually we can check webpack-cli info by using command npx webpack-cli info. But now when I try, I got an error and found a warning:

$ npx webpack-cli info
...
warning " > @webpack-cli/info@1.3.0" has incorrect peer dependency "webpack-cli@4.x.x".
...
TypeError: Class constructor InfoCommand cannot be invoked without 'new'
    at runWhenInstalled (/home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
    at /home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:124:15
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
...

For now, the only configurations that work with my environment only:

"dependencies": {
  ...
  "webpack-cli": "^3.3.12"
  ...
},
"devDependencies": {
  "webpack-dev-server": "^3.11.2"
}

Update: Please see DHH comment here

Case close.