Unable to load '@webpack-cli/serve' command

Describe the bug

RedwoodJS's dev server uses webpack-dev-server under the hood. It broke as soon as @webpack-cli/serve v1.6 was released.

Redwood users start the dev server with yarn rw dev. It runs this command:

cd "${rwjsPaths.web.base}" && yarn cross-env NODE_ENV=development RWJS_WATCH_NODE_MODULES=${
  watchNodeModules ? '1' : ''
} webpack serve --config "${webpackDevConfig}" ${forward}`

Which resolves to something like:

$ /Users/dom/projects/redwood/_sandbox/my-redwood-app/node_modules/.bin/cross-env NODE_ENV=development 
RWJS_WATCH_NODE_MODULES= webpack serve --config /Users/dom/projects/redwood/_sandbox/my-redwood-app/node_modules/@redwoodjs/core/config/webpack.development.js

Our webpack development config can be found here; it's merged with webpack.common.js, so I've included that as well:

What is the current behavior?

Currently, with the new release of @webpack-cli/serve, the dev server doesn't start up and throws:

web | [webpack-cli] Unable to load '@webpack-cli/serve' command
      [webpack-cli] TypeError: options.forEach is not a function

To Reproduce

Steps to reproduce the behavior:

create a v0.37.2 redwood project using yarn create redwood-app my-redwood-app
run yarn rw dev
observe the error in the console

All together:

$ yarn create redwood-app my-redwood-app
$ cd my-redwood-app
$ yarn rw dev
$ ...
$ web | [webpack-cli] Unable to load '@webpack-cli/serve' command
      [webpack-cli] TypeError: options.forEach is not a function

Expected behavior

The dev server starts up successfully on localhost:8910.

Screenshots

The dev server broken:

The dev server working:

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: macOS 11.1
    CPU: (8) x64 Apple M1
    Memory: 127.65 MB / 8.00 GB
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /opt/homebrew/bin/yarn
    npm: 7.3.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 94.0.4606.71
    Safari: 14.0.2
  Monorepos:
    Yarn Workspaces: 1.22.10

Additional context

Here's the bug report in redwoodjs/redwood: redwoodjs/redwood#3522
Here's our temporary fix: redwoodjs/redwood#3524

I also experienced this issue. Multiple reports from other people with the same error.

Manually pinning (and setting resolution) this package to v1.52.0 is the workaround.

Hi, i get a similar issue when i run browserDevelopmentRun target via gradle, which calls @webpack-cli/serve. I was tinkering around with KotlinJs.
Seems, that 1.6.0 broke the build. Until then, everything worked fine for me.

[webpack-cli] Unable to load '@webpack-cli/serve' command [webpack-cli] TypeError: options.forEach is not a function [webpack-cli] TypeError: options.forEach is not a function at WebpackCLI.makeCommand (D:\Workspace\clsky.de\build\js\node_modules\webpack-cli\lib\webpack-cli.js:173:21) at ServeCommand.apply (D:\Workspace\clsky.de\build\js\node_modules\webpack-cli\node_modules\@webpack-cli\serve\lib\index.js:41:19) at loadCommandByName (D:\Workspace\clsky.de\build\js\node_modules\webpack-cli\lib\webpack-cli.js:907:35) at async Command.<anonymous> (D:\Workspace\clsky.de\build\js\node_modules\webpack-cli\lib\webpack-cli.js:1462:17) at async Promise.all (index 0) at async WebpackCLI.run (D:\Workspace\clsky.de\build\js\node_modules\webpack-cli\lib\webpack-cli.js:1500:9) at async runCLI (D:\Workspace\clsky.de\build\js\node_modules\webpack-cli\lib\bootstrap.js:11:9)

Remove @webpack-cli/serve from your package.json (https://github.com/redwoodjs/redwood/blob/main/packages/core/package.json#L30), don't use this package directly or bump this together with webpack-cli, otherwise you will get these problems.

Even we fix small incompatibility between package (but it is internal package, you will not find information about usage this in docs), it still will be problem for your because you are pin dependencies https://github.com/redwoodjs/redwood/blob/main/packages/core/package.json#L30, I strongly recommend to avoid pinning deps, your have lock file to prevent installation new version, but unpinning allow developers fix these problems

Anyway feel free to feedback

I am not sure how this advice helps. My package.json is

    "webpack": "4.46.0",
    "webpack-cli": "4.8.0",
    "webpack-dev-server": "4.1.1",
    "webpack-manifest-plugin": "3.0.0",
    "webpack-merge": "4.2.2",

and running

node_modules/.bin/webpack-dev-server

yesterday resulted in the dev server starting. Today it results in

[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function
    at WebpackCLI.makeCommand (/.../node_modules/.pnpm/webpack-cli@4.8.0_714d72df2bebb3ac089d7453aabd5d57/node_modules/webpack-cli/lib/webpack-cli.js:173:21)

@Artur- try to update lock file (and transitive deps) or maybe you have global install webpack-cli?

Oh I have deleted lock files multiple times. What is supposed to change?

webpack-cli should stay 4.8.0 as specified, it depends on "@webpack-cli/serve": "^1.5.2", so it brings in @webpack-cli/serve 1.6.0 and the two are apparently not compatible?

Yep, because it is internal package you should have webpack-cli 4.9.0 and do not have @webpack-cli/serve in your package.json, in lock file it should be 1.6.0

I am not using webpack-cli 4.9.0. I am using webpack-cli 4.8.0

Surely you cannot be saying that it is OK that 4.8.0 stops working because 4.9.0 is available?

@Artur- ~~Can you provide reproducible example? I really can't reproduce locally~~ Your problem - lock file was updated i.e. now you have @webpack-cli/serve@1.6.0, but uses old verison of webpack-cli@4.8.0, @webpack-cli/serve is internal package and should be updated together with webpack-cli

Looks like we have small regression here, but if we revert it, it will create another breaking change, so my recommendation - bump webpack-cli@4.9.0 and update lock file, also check you don't have @webpack-cli/serve in package.json directly.

Sorry for this

Thanks, if the minor versions of the packages truly should go hand in hand maybe you can use ~ instead of ^ to avoid this in the future and still be able to make internal breaking changes

It really shouldn't have happened (but happens 😄 ), for future major release we refactor our architecture to avoid these problems

Grateful for your help here @alexander-akait And no need to apologize about regressions happening — only have sympathy from me!

Your problem - lock file was updated i.e. now you have @webpack-cli/serve@1.6.0, but uses old verison of webpack-cli@4.8.0, @webpack-cli/serve is internal package and should be updated together with webpack-cli

^^ This does not work in testing.

To clarify the behavior I was experiencing:

using webpack-cli v4.8: Because the ^ is used in package.json, in the background @webpack-cli/serve v1.6 was installed because semver. So I suspect (without looking at the code) this could propagate backwards to previous versions.
using webpack-cli v4.9: same error and can confirm was using @webpack-cli/serve@1.6.0

So I don't see another way to prevent this other than the workaround in the OP. For our circumstances, telling people to remove a package from yarn.lock is not viable.

Question: Could you release a patch of webpack-cli, e.g. v4.8.1, that pins "@webpack-cli/serve": "1.5.2" — no ^ so there won't be semver issue?

Lastly, I'm sorry but it wasn't clear if there's a fix coming so I'm not sure why this issue was closed?

using webpack-cli v4.9: same error and can confirm was using @webpack-cli/serve@1.6.0

Double check this, run npm ls webpack-cli and npm ls @webpack-cli/serve@1.6.0

Question: Could you release a patch of webpack-cli, e.g. v4.8.1, that pins "@webpack-cli/serve": "1.5.2" — no ^ so there won't be semver issue?

It will be very bad, I prefer to avoid it

Anyway if you need to help fastly please try to provide reproducible steps, our CI for lastest version for webpack v4 and webpack v5 are green...

And how @webpack-cli/serve appears in your deps, we never ask that in our docs...

And how @webpack-cli/serve appears in your deps, we never ask that in our docs...

Just to clarify, we did this only to fix the bug we were experiencing.

Sorry that the steps to reproduce above weren't accurate—we released a patch after posting this issue. Here's steps to reproduce, including a video showing exactly what I see on my machine:

$ yarn global add create-redwood-app@0.37.2
$ create-redwood-app my-redwood-app
$ cd my-redwood-app
$ yarn rw dev
$ ...
$ web | [webpack-cli] Unable to load '@webpack-cli/serve' command
$ web | [webpack-cli] TypeError: options.forEach is not a function

webpack-cli-reproduction.mp4

Thanks, I will looking at this tomorrow (busy right now), maybe do patch release to avoid problem

Thank you @alexander-akait Anything @jtoar and I can do to help — please just let us know. We're open source maintainers as well and don't take your effort (or webpack-cli) for granted.

I just followed you on Twitter in case DM's (or to get on a real-time call) would be helpful to you. You can reach me via DM https://twitter.com/thedavidprice

Overall, I think the semver ^ is the reason this is a cascading issue:

webpack-cli/packages/webpack-cli/package.json

Line 35 in 74089ce

"@webpack-cli/serve": "^1.6.0",

imho I'd highly recommend pinning each dependency in that package.json

Sorry for delay, will have time tomorrow, top on my TODO

@jtoar Here #2990 (comment) is the same problem as I described above, webpack-cli is 4.8.0, but @webpack-cli/serve is 1.6.0 (you need update webpack-cli to 4.9.0 version), I can do patch release and release 4.8.1, but it will not help and will not solve the problem, because you pin your dev deps (strongly recommend avoid it, lock files were created to avoid installation new versions on the each installation, but pinning them doesn't allow developers get fixes, especial security, which released as patch), looks at node_modules/@redwoodjs/internal/package.json, and you will see "webpack-cli": "4.8.0",, to be honestly I don't understand how I can help to fix problem, yes, we do small breaking change in internal package, sorry for this, but I think will be better to update webpack-cli to the latest stable version, i.e. 4.9.0. Feel free to feedback.

Any update on this, especially for V.5.58?

Answer above

Hi, i get a similar issue when i run browserDevelopmentRun target via gradle

This statement in my build.gradle.kts fixes the issue for me

rootProject.plugins.withType(org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootPlugin::class.java) {  
    rootProject.the<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension>().versions.webpackCli.version = "4.9.0"
}

used 4.9.0 instead of 4.8.0 fix me the problem...

☝️ same here

[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function

FYI, two things you need to do in package.json:

remove @webpack-cli/serve
upgrade webpack-cli to ^4.9.1 (or try the latest one)

update your package.json
"webpack-cli": "4.9.0",
"webpack-dev-server": "^4.4.0",

update your package.json "webpack-cli": "4.9.0", "webpack-dev-server": "^4.4.0",

No production canister_ids.json found. Continuing with local
[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 'watchContentBase'. These properties are valid:
object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

My fix:

package.json

"webpack-cli": "4.9.1",
"webpack-dev-server": "^4.5.0"

webpack.config.js - modify devServer settings to:

// proxy /api to port 8000 during development
  devServer: {
    proxy: {
      "/api": {
       target: "http://127.0.0.1:8000",
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          "^/api": "/api",
        },
      },
    },
    hot: true,
    static: path.resolve(__dirname, "./src/hello_assets")  },
};

My fix:

package.json

"webpack-cli": "4.9.1",
"webpack-dev-server": "^4.5.0"

webpack.config.js - modify devServer settings to:

// proxy /api to port 8000 during development
  devServer: {
    proxy: {
      "/api": {
       target: "http://127.0.0.1:8000",
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          "^/api": "/api",
        },
      },
    },
    hot: true,
    static: path.resolve(__dirname, "./src/hello_assets")  },
};

Hi! any help please?

I have two package.json under my web app repository https://github.com/DrThouraya/regards-frontend/tree/master/webapp.
The first one is under the "webapp" directory and the second one is under the web pack-config-front..
so, which one to change?
FYI: I have installed npm -v=5.7.1 and node -v=8.10.0
and I got an error message when trying to run this command:

npm run start:withpreprod

I got also an error message when typing `or

npm run build:production npm run build:plugins
`

Thanks in advance.

Run npm ls webpack-cli and npm ls webpack-dev-server

npm ls webpack-cli
Hi @alexander-akait ,
for npm ls webpack-cli, I got --> ERR! invalid: webpack-cli@4.6.0
and for npm ls webpack-dev-server , no error message --> webpack-dev-server@3.11.3

Update webpack-cli to the latest stable version

Update webpack-cli to the latest stable version

done! but I still getting the same error when typing npm run start:withpreprod ..

What is Node.js version? Looks your version is not supported that https://github.com/webpack/webpack/blob/main/lib/cli.js#L67

What is Node.js version? Looks your version is not supported that https://github.com/webpack/webpack/blob/main/lib/cli.js#L67

my node version is 8.10.0
The manual that I am using asked me to install nodejs 8.10 and npm 5.7.1 to can test the frontend repository locally..

I am afraid your manual is outdated, minimum supported Node.js version is 10.13 https://github.com/webpack/webpack/blob/main/package.json#L113, but I strongly recommend to use the latest LTS, i.e. 16.13.1

if you look in their "package.json" file, they indicate https://github.com/DrThouraya/regards-frontend/blob/master/webapp/package.json

"engines": { "node": ">=6.11.2", "npm": ">=3.10.10"

so which one, do I have to follow please?

Versions are wrong, you can't use 6.11.2 node with webpack v5

it helped me
"webpack-cli": "^4.9.1",

Hi and thank you for your answer, and what about node and npm versions and webpack-dev-server? Thank you!

Hi and thank you for your answer, and what about node and npm versions and webpack-dev-server? Thank you!

"webpack": "5.28.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "3.11.2"

npm --version
6.14.13

node --version
v14.17.3

npm install --save-dev webpack-cli working for me