Okta-react-storybook-example: Storybook build error

Questions
1

I am unable to build the @oktadev/okta-react-storybook-example project. Whenever I try to interact with the Storybook side of the project I get the following error. Any idea what might be going on here? Thank you!

okta-react-storybook-example % npm run build-storybook

> react-storybook@0.1.0 build-storybook
> build-storybook -s public

info @storybook/react v6.4.12
info 
info => Cleaning outputDir: /root-dir/okta-react-storybook-example/storybook-static
(node:49676) DeprecationWarning: --static-dir CLI flag is deprecated, see:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info => Copying static files: ./public => ./
info => Compiling preview..
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 Webpack4 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[5].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 (/root-dir/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at Object.build (/root-dir/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:175:18)
ERR!     at async Promise.all (index 1)
ERR!     at async buildStaticStandalone (/root-dir/node_modules/@storybook/core-server/dist/cjs/build-static.js:175:28)
ERR!     at async buildStatic (/root-dir/node_modules/@storybook/core-server/dist/cjs/build-static.js:195:5)
ERR!  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.module.rules[5].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 (/root-dir/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at Object.build (/root-dir/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:175:18)
ERR!     at async Promise.all (index 1)
ERR!     at async buildStaticStandalone (/root-dir/node_modules/@storybook/core-server/dist/cjs/build-static.js:175:28)
ERR!     at async buildStatic (/root-dir/node_modules/@storybook/core-server/dist/cjs/build-static.js:195:5)
2

Hey there! I just merged a fix to the dependencies that should address this issue. The problem stemmed from the dependency on Webpack 5 and requiring updated Storybook builders. If you run into any other trouble, please feel free to post a question for this post:

3

Thank you for addressing the issue. I will be taking a look at it today :+1:

4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.