Storybook build failing with `WebpackOptionsValidationError`

Hi 👋 ,

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.

[jamaljsr]

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.

[rohit-nair]

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?