Storybook build failing with `WebpackOptionsValidationError`
See original GitHub issueHi 👋 ,
I’m trying to run yarn storybook
on a fresh clone of the repository but it fails with WebpackOptionsValidationError
, specifically Module type to use for the module
.
Expected behavior Command should launch the storybook site.
Actual behavior
Command fails with WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
error.
Console log
➜ app git:(master) ✗ yarn storybook
yarn run v1.22.18
$ start-storybook -p 9009 -s public
info @storybook/react v5.3.19
info
info => Loading static files from: /Users/foo/_Data/Research/bitcoin/_lightning/lightning-terminal/app/public .
info => Loading presets
info => Loading presets
info => Loading custom babel config
info => Loading custom babel config
info => Loading custom manager config.
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack setup.
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.module.rules[2].oneOf[9].type should be one of these:
ERR! "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
ERR! -> Module type to use for the module
ERR! at webpack (/Users/foo/_Data/Research/bitcoin/_lightning/lightning-terminal/app/node_modules/@storybook/core/node_modules/webpack/lib/webpack.js:31:9)
ERR! at /Users/foo/_Data/Research/bitcoin/_lightning/lightning-terminal/app/node_modules/@storybook/core/dist/server/dev-server.js:116:50
ERR! at async Promise.all (index 1)
ERR! at async buildDevStandalone (/Users/foo/_Data/Research/bitcoin/_lightning/lightning-terminal/app/node_modules/@storybook/core/dist/server/build-dev.js:343:9)
ERR! at async buildDev (/Users/foo/_Data/Research/bitcoin/_lightning/lightning-terminal/app/node_modules/@storybook/core/dist/server/build-dev.js:415:3)
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.module.rules[2].oneOf[9].type should be one of these:
ERR! "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
ERR! -> Module type to use for the module
ERR! at webpack (/Users/foo/_Data/Research/bitcoin/_lightning/lightning-terminal/app/node_modules/@storybook/core/node_modules/webpack/lib/webpack.js:31:9)
ERR! at /Users/foo/_Data/Research/bitcoin/_lightning/lightning-terminal/app/node_modules/@storybook/core/dist/server/dev-server.js:116:50
ERR! at async Promise.all (index 1)
ERR! at async buildDevStandalone (/Users/foo/_Data/Research/bitcoin/_lightning/lightning-terminal/app/node_modules/@storybook/core/dist/server/build-dev.js:343:9)
ERR! at async buildDev (/Users/foo/_Data/Research/bitcoin/_lightning/lightning-terminal/app/node_modules/@storybook/core/dist/server/build-dev.js:415:3)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
To reproduce
- Clone the repo, or
rm -rf node_modules/
to delete installed packages- Run
yarn install
- Run
yarn storybook
Additional info
I suspect the issue is due to Webpack
version. Currently we have 2 different Webpack
versions, v4 and v5
Installed Webpack
[webpack-config-from-log-terse.txt](https://github.com/lightninglabs/lightning-terminal/files/8626860/webpack-config-from-log-terse.txt)➜ app git:(master) yarn list webpack
yarn list v1.22.18
warning Filtering by arguments is deprecated. Please use the pattern option instead.
├─ react-scripts@5.0.0
│ └─ webpack@5.71.0
└─ webpack@4.46.0
And this is the rule that’s triggering the validation error.
Incorrect Webpack config
{
"exclude": [
{},
{},
{},
{}
],
"type": "asset/resource"
}
Have attached the config that’s throwing the error here.
The issue seems similar to these (0, 1) where the fix was to upgrade to Webpack5.
Issue Analytics
- State:
- Created a year ago
- Comments:8 (8 by maintainers)
Yes, my first course of action would be to update the storybook packages. You are more than welcome to give it a try if you’d like.
Sounds good. As it’s a breaking change, let me come up with an upgrade strategy. Would like to do it as a separate PR from storybooks one (#362) which can be merged independently.
While I’ve you here, is there a way to run the terminal frontend app with a mock backend, say webpack devserver proxy or a service running on a docker container, and not
lnd
?