Storybook build failing with `WebpackOptionsValidationError`

[rohit-nair]

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.
├─ [email protected]
│  └─ [email protected]
└─ [email protected]

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]

Thanks for the bug report as i wasn't aware that storybook wasn't functioning. I suspect this was caused by #350. We'll work on getting this fixed.

[rohit-nair]

That was my hunch as well, that it's related to react-scripts upgrade. I can look into upgrading storybook to v6 if that's the approach you are considering.

[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]

@jamaljsr got the storybook site to load post upgrade but sidebar navigation is broken most likely due to incompatibility with [email protected]. Storybook is using [email protected] and I believe expects [email protected].

├─ @storybook/[email protected]
│  └─ [email protected]
├─ [email protected]
│  └─ [email protected]
└─ [email protected]

Error

Uncaught TypeError: Cannot read properties of undefined (reading 'Pop')
    at Router (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-dc941f.manager.bundle.js:8348:53)
    at renderWithHooks (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-dc941f.manager.bundle.js:92927:18)
    at updateFunctionComponent (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-dc941f.manager.bundle.js:95298:20)
    at beginWork (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-dc941f.manager.bundle.js:97005:16)
    at HTMLUnknownElement.callCallback (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-dc941f.manager.bundle.js:81887:14)
    at Object.invokeGuardedCallbackDev (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-dc941f.manager.bundle.js:81936:16)
    at invokeGuardedCallback (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-dc941f.manager.bundle.js:81998:31)
    at beginWork$1 (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-dc941f.manager.bundle.js:101901:7)
    at performUnitOfWork (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-dc941f.manager.bundle.js:100713:12)
    at workLoopSync (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-dc941f.manager.bundle.js:100644:5)

If I were to not define history version, sidenav navigation works but then the components break with following error.

Uncaught TypeError: Cannot read properties of undefined (reading 'startsWith')
    at NavMenu.tsx:56:1
    at observer.js:24:1
    at useObserver.js:111:1
    at trackDerivedFunction (mobx.esm.js:1788:1)
    at Reaction.track (mobx.esm.js:2332:1)
    at useObserver (useObserver.js:109:1)
    at wrappedComponent (observer.js:24:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at updateFunctionComponent (react-dom.development.js:17356:1)
    at updateSimpleMemoComponent (react-dom.development.js:17215:1)

Here's the versions that get installed:

├─ @storybook/[email protected]
│  ├─ [email protected]
│  └─ [email protected]
│     └─ [email protected]
├─ [email protected]
└─ [email protected]
   └─ [email protected]

Should we go ahead and upgrade to v6?

[jamaljsr]

Thanks for the detailed update. I think you can update the package.json file to remove the resolution for history v4.10.1. This was there to resolve issues with the prior version of storybook. I suspect this is what's causing the errors.

[rohit-nair]

I'd tried removing history version from package.json and removed resolution. It installs two different versions of history react-router, v5 and v6 which are incompatible as there are breaking changes and caused components to break in storybook.

~Btw, yest I tried running yarn start after doing fresh yarn install and I got a bunch of router errors. Do you see that at your end? I'm planning to dive a bit deeper on that today and see whether it was an user error.~ Tried again and it worked, unsure why it didn't yest.

[jamaljsr]

Ah yes, after removing the yarn.lock file, I see the errors you are referring to. I guess the upgrade to react-router is going to be necessary. feel free to try to tackle that if you're up to it.

[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?