Unable to load '@webpack-cli/serve' command. TypeError: devServerFlags is not iterable

[nspyke]

After upgrading from v1.5 to v1.7 I get the following error when running encore dev-server

$ npx encore dev-server
Running webpack-dev-server ...

[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: devServerFlags is not iterable
    at /home/nik/dev/fleetman-app/node_modules/@webpack-cli/serve/lib/index.js:28:43
    at WebpackCLI.makeCommand (/home/nik/dev/fleetman-app/node_modules/webpack-cli/lib/webpack-cli.js:104:31)
    at ServeCommand.apply (/home/nik/dev/fleetman-app/node_modules/@webpack-cli/serve/lib/index.js:10:19)
    at loadCommandByName (/home/nik/dev/fleetman-app/node_modules/webpack-cli/lib/webpack-cli.js:626:35)
    at Command.<anonymous> (/home/nik/dev/fleetman-app/node_modules/webpack-cli/lib/webpack-cli.js:1091:23)
    at Command.listener [as _actionHandler] (/home/nik/dev/fleetman-app/node_modules/webpack-cli/node_modules/commander/index.js:922:31)
    at Command._parseCommand (/home/nik/dev/fleetman-app/node_modules/webpack-cli/node_modules/commander/index.js:1503:14)
    at Command.parse (/home/nik/dev/fleetman-app/node_modules/webpack-cli/node_modules/commander/index.js:1292:10)
    at Command.parseAsync (/home/nik/dev/fleetman-app/node_modules/webpack-cli/node_modules/commander/index.js:1318:10)
    at WebpackCLI.run (/home/nik/dev/fleetman-app/node_modules/webpack-cli/lib/webpack-cli.js:1123:28)

My webpack.config.js file is

const Encore = require('@symfony/webpack-encore')
const MomentLocalesPlugin = require('moment-locales-webpack-plugin')

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev')
}

Encore
  // directory where compiled assets will be stored
  .setOutputPath('public/build/')
  // public path used by the web server to access the output path
  .setPublicPath('/build')
  // only needed for CDN's or sub-directory deploy
  // .setManifestKeyPrefix('build/')

  /*
   * ENTRY CONFIG
   *
   * Each entry will result in one JavaScript file (e.g. app.js)
   * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
   */
  .addEntry('app', './assets/modules/app/index.ts')
  .addEntry('admin', './assets/modules/admin/index.ts')
  .addEntry('user', './assets/modules/user/index.ts')
  .addStyleEntry('email', './assets/modules/email/index.scss')
  .addStyleEntry('print', './assets/modules/print/index.scss')

  // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
  .enableStimulusBridge('./assets/controllers.json')

  // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
  .splitEntryChunks()

  // will require an extra script tag for runtime.js
  // but, you probably want this, unless you're building a single-page app
  .enableSingleRuntimeChunk()

  /*
   * FEATURE CONFIG
   *
   * Enable & configure other features below. For a full
   * list of features, see:
   * https://symfony.com/doc/current/frontend.html#adding-more-features
   */
  .cleanupOutputBeforeBuild()
  .enableBuildNotifications()
  .enableSourceMaps(!Encore.isProduction())

  // Enables Sass/SCSS support
  .enableSassLoader()

  // Enable PostSCSS support
  .enablePostCssLoader()

  // Enable TypeScript
  .enableTypeScriptLoader()

  // Enable Vue
  .enableVueLoader(() => {}, { runtimeCompilerBuild: true })

  // Enable hashed filenames (e.g. app.abc123.css)
  .enableVersioning(Encore.isProduction())

  // applies integrity="..." attributes on your script & link tags
  .enableIntegrityHashes(Encore.isProduction())

  .configureBabel((config) => {
    config.plugins.push('@babel/plugin-proposal-class-properties')
  })

  // enables @babel/preset-env polyfills
  .configureBabelPresetEnv((config) => {
    config.useBuiltIns = 'usage'
    config.corejs = 3
  })

  .autoProvidejQuery()
  .addPlugin(new MomentLocalesPlugin())

module.exports = Encore.getWebpackConfig()

Both dev and prod builds work fine.

[Kocal]

What's your package.json?

[nspyke]

{
  "version": "2.0.0",
  "licence": "UNLICENSED",
  "private": true,
  "repository": {},
  "devDependencies": {
    "@api-platform/client-generator": "^0.7.3",
    "@openapitools/openapi-generator-cli": "^2.2.2",
    "@symfony/stimulus-bridge": "^2.1.0",
    "@symfony/stimulus-bridge-types": "^1.0.0",
    "@symfony/webpack-encore": "^1.5.0",
    "@types/bootstrap": "3.4.0",
    "@types/datatables.net": "^1.10.19",
    "@types/jquery": "^3.5.0",
    "@types/jquery.validation": "^1.16.6",
    "@types/lodash": "^4.14.168",
    "@types/sortablejs": "^1.10.6",
    "@typescript-eslint/eslint-plugin": "^4.11.1",
    "@typescript-eslint/parser": "^4.11.1",
    "@vue/compiler-sfc": "^3.2.11",
    "autoprefixer": "^10.2.6",
    "core-js": "^3.15.1",
    "inky-cli": "^1.0.1",
    "moment-locales-webpack-plugin": "^1.2.0",
    "node-sass": "^7.0.1",
    "node-sass-tilde-importer": "^1.0.2",
    "postcss": "^8.2.2",
    "postcss-loader": "^4.0.0",
    "regenerator-runtime": "^0.13.2",
    "sass-loader": "^12.4.0",
    "standard": "^16.0.4",
    "stylelint": "^13.11.0",
    "stylelint-config-sass-guidelines": "^7.0.0",
    "ts-standard": "^11.0.0",
    "ts-loader": "^8.1.0",
    "typescript": "~4.2.4",
    "vue-loader": "^16.5.0",
    "vue-template-compiler": "^2.6.12",
    "webpack-notifier": "^1.6.0"
  },
  "dependencies": {
    "@stripe/stripe-js": "^1.15.1",
    "admin-lte": "^2.3.11",
    "autosize": "^4.0.2",
    "axios": "^0.21.1",
    "basiclightbox": "^5.0.4",
    "bootstrap": "^3.4.1",
    "bootstrap-datepicker": "^1.6.4",
    "bootstrap-sass": "^3.4.1",
    "change-case": "^4.1.2",
    "chart.js": "^2.9.4",
    "filepond": "^4.29.1",
    "filepond-plugin-file-validate-type": "^1.2.6",
    "filepond-plugin-image-preview": "^4.6.10",
    "foundation-emails": "^2.2.1",
    "jquery": "^3.2.1",
    "jquery-validation": "^1.19.3",
    "lodash": "^4.17.0",
    "moment": "^2.18.1",
    "select2": "^4.0.13",
    "sortablejs": "^1.13.0",
    "stimulus": "^2.0.0",
    "stringify-object": "^3.3.0",
    "sweetalert": "^2.1.2",
    "symfony-ts-router": "^1.0.6",
    "vue": "^3.2.11",
    "vue-filepond": "^7.0.0"
  },
  "scripts": {
    "lint-js": "standard --verbose",
    "lint-ts": "ts-standard --verbose",
    "lint-scss": "stylelint assets/**/*.scss",
    "fix-scss": "stylelint --fix assets/**/*.scss",
    "fix-js": "standard --fix",
    "fix-ts": "ts-standard --fix",
    "dev": "encore dev-server",
    "dev:build": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production",
    "build:progress": "encore production --progress",
    "email-css": "node-sass --importer=node_modules/node-sass-tilde-importer assets/modules/email/index.scss assets/css/email.css",
    "generate:openapi": "openapi-generator-cli generate -g typescript-axios -c assets/openapi-codegen.yaml -o assets/modules/api/openapi -i assets/modules/api/openapi.schema.json --skip-validate-spec --api-package apis --model-package models --model-name-suffix Interface",
    "generate:graphql": "graphql-codegen -c assets/graphql-codegen.yaml",
    "generate:interfaces": "generate-api-platform-client -g typescript http://localhost:8000/api assets/modules/api"
  },
  "browserslist": [
    "defaults",
    "ie 11"
  ],
  "standard": {
    "env": {
      "jquery": true,
      "browser": true,
      "amd": true
    },
    "ignore": [
      "public",
      "**/*.ts"
    ]
  },
  "ts-standard": {
    "env": {
      "browser": true,
      "amd": true
    },
    "ignore": [
      "**/*.js",
      "public",
      "assets/shims*.ts"
    ]
  },
  "stylelint": {
    "extends": "stylelint-config-sass-guidelines",
    "rules": {
      "selector-max-id": 1,
      "selector-max-compound-selectors": null,
      "max-nesting-depth": 4,
      "selector-no-qualifying-type": null
    }
  },
  "engines": {
    "yarn": "YARN NO LONGER USED - use npm instead. e.g. Instead of 'yarn dev', use 'npm run dev'"
  }
}

[Kocal]

In your lockfile, can you try to update webpack-cli and @webpack-cli/serve dependencies?

[nspyke]

Yea, that fixed it. However, as I haven't specified it as a root dependency, I would have expected Encore to have specified that the newer version was required and NPM would have updated it accordingly.

[nspyke]

The package.json of this project currently specifies "webpack-cli": "^4"

I was on webpack-cli version 4.5, and the upgrade took me to 4.9.1 And, serve was version 1.3.0 and now upgraded to 1.6.0

I'm not sure what the exact versions that this bug was caused by, but we should tighten the versioning requirements I think to fix this bug

[weaverryan]

I'm ok with tightening the version requirements. Ideally, we could find out WHAT version minimums we need of each. But I also saw someone just hit this problem.

[stof]

@weaverryan as this is a dependency and not a peer dependency (or our weird behavior where we rely on devDependency ranges to define optional peer dependency ranges), we don't actually care. yarn and npm will always install the latest version of the dependency, as the npm ecosystem does not try to find a set of dependencies matching all input constraints (as packages are not forced to be installed only once). So I would go for ^4.9.1

[vidyakore]

In your lockfile, can you try to update webpack-cli and @webpack-cli/serve dependencies?

how to do this? because I have just started with TypeScript and getting the same error in another project, can you please help?