Rails Webpacker React：/bin/webpack-dev-server 命令移到单独的包中：@webpack-cli/serve

Question

今天我用命令创建了一个全新的 Rails webpacker 应用：

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

新鲜的应用程序顺利生成，直到我尝试运行：

$ ./bin/webpack-dev-server

webpack-cli 返回一条消息：

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，但是 webpack-cli 的安装不成功并显示消息：

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)

当我运行./bin/webpack-dev-server 命令时，我收到错误消息：

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

这是我的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"
  }
}

和我的 node.js 版本

$ node -v
v14.17.5

Answer 1

暂时用之前的版本解决一下：

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

更新： 使用rails new my-app --webpacker=react生成的新鲜package.json的webpack-cli和webpack-dev-serverdevDependencies分别是：

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

如果我们从here来看，我们发现webpack-dev-server v.4.0.0依赖于"webpack-cli": "^4.7.2"，这与使用"webpack-cli": "^3.3.12"作为依赖的fresh rails webpacker包配置不兼容。

通常我们可以使用命令npx webpack-cli info 来检查webpack-cli 的信息。但是现在我一试，就报错了，发现警告：

$ 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)
...

目前，仅适用于我的环境的唯一配置：

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

更新： 请看DHH评论here

结案。