'setupMiddlewares' error after upgrade to 5.0.0-rc.2

[alimony]

Version

5.0.0-rc.2

Environment info

Environment Info:

  System:
    OS: macOS 11.5.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 16.13.0 - /usr/local/Cellar/node@16/16.13.0/bin/node
    Yarn: 3.1.0 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/Cellar/node@16/16.13.0/bin/npm
  Browsers:
    Chrome: 97.0.4692.71
    Edge: Not Found
    Firefox: 96.0
    Safari: 14.1.2
  npmPackages:
    @sentry/vue: ^6.16.1 => 6.16.1 
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.1.1 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  5.0.0-rc.2 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  5.0.0-rc.2 
    @vue/cli-plugin-babel: ~5.0.0-rc.2 => 5.0.0-rc.2 
    @vue/cli-plugin-eslint: ~5.0.0-rc.2 => 5.0.0-rc.2 
    @vue/cli-plugin-router: ~5.0.0-rc.2 => 5.0.0-rc.2 
    @vue/cli-plugin-typescript: ~5.0.0-rc.2 => 5.0.0-rc.2 
    @vue/cli-plugin-unit-jest: ~5.0.0-rc.2 => 5.0.0-rc.2 
    @vue/cli-plugin-vuex:  5.0.0-rc.2 
    @vue/cli-service: ~5.0.0-rc.2 => 5.0.0-rc.2 
    @vue/cli-shared-utils:  5.0.0-rc.2 
    @vue/compiler-core:  3.2.26 
    @vue/compiler-dom:  3.2.26 
    @vue/compiler-sfc: ^3.2.26 => 3.2.26 
    @vue/compiler-ssr:  3.2.26 
    @vue/component-compiler-utils:  3.3.0 
    @vue/devtools-api:  6.0.0-beta.20 
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0 
    @vue/eslint-config-typescript: ^9.1.0 => 9.1.0 
    @vue/reactivity:  3.2.26 
    @vue/reactivity-transform:  3.2.26 
    @vue/runtime-core:  3.2.26 
    @vue/runtime-dom:  3.2.26 
    @vue/server-renderer:  3.2.26 
    @vue/shared:  3.2.26 
    @vue/test-utils: ^2.0.0-rc.18 => 2.0.0-rc.18 
    @vue/vue3-jest: ^27.0.0-alpha.4 => 27.0.0-alpha.4 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^8.3.0 => 8.3.0 
    jest-serializer-vue:  2.0.2 
    typescript: ^4.5.4 => 4.5.4 
    vue: ^3.2.26 => 3.2.26 
    vue-eslint-parser:  8.0.1 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  17.0.0 (15.9.8)
    vue-router: ^4.0.12 => 4.0.12 
    vue-style-loader:  4.1.3 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

• Upgrade existing project to Vue CLI 5.0.0-rc.2
• Run e.g. yarn serve

What is expected?

No errors.

What is actually happening?

I get the following error:

$ yarn serve
 INFO  Starting development server...
[1%] setup (initialize)
 ERROR  ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
         - options has an unknown property 'setupMiddlewares'. 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? }
ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'setupMiddlewares'. 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? }
    at validate (/Users/markus/Documents/getpublished.xyz/node_modules/schema-utils/dist/validate.js:105:11)
    at new Server (/Users/markus/Documents/getpublished.xyz/node_modules/webpack-dev-server/lib/Server.js:31:5)
    at serve (/Users/markus/Documents/getpublished.xyz/node_modules/@vue/cli-service/lib/commands/serve.js:183:20)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

---

setupMiddlewares was introduced in webpack-dev-server 4.7.0 but Vue CLI does not require that minimum version.

[haoqunjiang]

Thanks for reporting! A workaround, for now, would be reinstalling the dependencies so that yarn can resolve to the latest version of webpack-dev-server.

[horans]

Rerun npm install was not helping for my case. Had to fallback to @vue/cli-service@v5.0.0-rc.1 to make it work.

[SebastianPfliegel]

Had the same issue. Deleting both node_modules and package-lock.json did the trick before running npm install.

[chuckntaylor]

Just had the same error. I can confirm that deleting node_modules and package-lock.json before running npm install resolved the issue.

[phapdinh]

the setupMiddlewares option was added in webpack 4.7.0 https://webpack.js.org/configuration/dev-server/#devserversetupmiddlewares so I had to upgrade my webpack-cli for it to work