Webpack5 + @storybook/lit 6.3.0-alpha.24 unable to start

Describe the bug When running start-storybook for @storybook/lit using the Webpack5 builder the following error occurs after it reaches ~10%:

ValidationError: Invalid options object. Dev Middleware has been initialized using an options object that does not match the API schema.
ERR!  - options has an unknown property 'watchOptions'. These properties are valid:
ERR!    object { mimeTypes?, writeToDisk?, methods?, headers?, publicPath?, stats?, serverSideRender?, outputFileSystem?, index? }
ERR!     at validate (/Users/rniznik/Documents/pharos/node_modules/schema-utils/dist/validate.js:104:11)
ERR!     at wdm (/Users/rniznik/Documents/pharos/node_modules/webpack-dev-middleware/dist/index.js:29:29)
ERR!     at Object.start (/Users/rniznik/Documents/pharos/node_modules/@storybook/core-server/dist/cjs/manager/builder.js:146:51)
ERR!     at async Promise.all (index 1)
ERR!     at async storybookDevServer (/Users/rniznik/Documents/pharos/node_modules/@storybook/core-server/dist/cjs/dev-server.js:114:28)
ERR!     at async buildDevStandalone (/Users/rniznik/Documents/pharos/node_modules/@storybook/core-server/dist/cjs/build-dev.js:109:31)
ERR!     at async buildDev (/Users/rniznik/Documents/pharos/node_modules/@storybook/core-server/dist/cjs/build-dev.js:150:5)
ERR!  ValidationError: Invalid options object. Dev Middleware has been initialized using an options object that does not match the API schema.
ERR!  - options has an unknown property 'watchOptions'. These properties are valid:
ERR!    object { mimeTypes?, writeToDisk?, methods?, headers?, publicPath?, stats?, serverSideRender?, outputFileSystem?, index? }
ERR!     at validate (/Users/rniznik/Documents/pharos/node_modules/schema-utils/dist/validate.js:104:11)
ERR!     at wdm (/Users/rniznik/Documents/pharos/node_modules/webpack-dev-middleware/dist/index.js:29:29)
ERR!     at Object.start (/Users/rniznik/Documents/pharos/node_modules/@storybook/core-server/dist/cjs/manager/builder.js:146:51)
ERR!     at async Promise.all (index 1)
ERR!     at async storybookDevServer (/Users/rniznik/Documents/pharos/node_modules/@storybook/core-server/dist/cjs/dev-server.js:114:28)
ERR!     at async buildDevStandalone (/Users/rniznik/Documents/pharos/node_modules/@storybook/core-server/dist/cjs/build-dev.js:109:31)
ERR!     at async buildDev (/Users/rniznik/Documents/pharos/node_modules/@storybook/core-server/dist/cjs/build-dev.js:150:5) {
ERR!   errors: [
ERR!     {
ERR!       keyword: 'additionalProperties',
ERR!       dataPath: '',
ERR!       schemaPath: '#/additionalProperties',
ERR!       params: [Object],
ERR!       message: 'should NOT have additional properties',
ERR!       schema: false,
ERR!       parentSchema: [Object],
ERR!       data: [Object]
ERR!     }
ERR!   ],
ERR!   schema: {
ERR!     type: 'object',
ERR!     properties: {
ERR!       mimeTypes: [Object],
ERR!       writeToDisk: [Object],
ERR!       methods: [Object],
ERR!       headers: [Object],
ERR!       publicPath: [Object],
ERR!       stats: [Object],
ERR!       serverSideRender: [Object],
ERR!       outputFileSystem: [Object],
ERR!       index: [Object]
ERR!     },
ERR!     additionalProperties: false
ERR!   },
ERR!   headerName: 'Dev Middleware',
ERR!   baseDataPath: 'options',
ERR!   postFormatter: null
ERR! }

Believe watchOptions is a Webpack4 option.

To Reproduce

1. Run start-storybook for @storybook/lit with the Webpack5 builder
2. Notice the error

System

Environment Info:

  System:
    OS: macOS 11.2.3
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.15.1/bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Edge: 90.0.818.56
    Firefox: 88.0.1
    Safari: 14.0.3
  npmPackages:
    @storybook/addon-a11y: ^6.3.0-alpha.24 => 6.3.0-alpha.24 
    @storybook/addon-actions: ^6.3.0-alpha.24 => 6.3.0-alpha.24
    @storybook/addon-backgrounds: ^6.3.0-alpha.24 => 6.3.0-alpha.24 
    @storybook/addon-controls: ^6.3.0-alpha.24 => 6.3.0-alpha.24 
    @storybook/addon-docs: ^6.3.0-alpha.24 => 6.3.0-alpha.24 
    @storybook/addon-google-analytics: ^6.3.0-alpha.22 => 6.3.0-alpha.22 
    @storybook/addon-postcss: ^2.0.0 => 2.0.0 
    @storybook/addon-storysource: ^6.3.0-alpha.24 => 6.3.0-alpha.24 
    @storybook/addon-viewport: ^6.3.0-alpha.24 => 6.3.0-alpha.24 
    @storybook/addons: ^6.3.0-alpha.24 => 6.3.0-alpha.24 
    @storybook/builder-webpack5: ^6.3.0-alpha.24 => 6.3.0-alpha.24 
    @storybook/lit: ^6.3.0-alpha.24 => 6.3.0-alpha.24 
    @storybook/react: ^6.3.0-alpha.24 => 6.3.0-alpha.24 
    @storybook/source-loader: ^6.3.0-alpha.24 => 6.3.0-alpha.24 
    @storybook/theming: ^6.3.0-alpha.24 => 6.3.0-alpha.24 

Additional context Add any other context about the problem here.

[shilman]

I’ve updated the comment to clarify that it’s not actually a recommendation. It was a response to lots of people trying to use resolutions and running into problems. If you can run it without resolutions, that’s better.

[shilman]

sweet! glad to hear it! 🚀