Webpack error adding storybook to create-react-app

Question

Today I created a new CRA project (working perfectly) but when I add Storybook with npx sb init I get this error:

info @storybook/react v6.4.9

info => Loading presets
info => Serving static files from ./public at /
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 Webpack5 setup
ERR! ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
ERR!  - configuration.module.rules[4] should be one of these:
ERR!    ["..." | object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }, ...]

I tried a lot of things with no results.

What could it be?

Thank you!

it looks you have configuration issue in webpack config. and this is pointing to rule number 4. — Manish Kumar
– Manish Kumar, Commented Dec 15, 2021 at 11:48
Did you manage to solve it? How? I have the exact same issue with latest CRA/storybook, CRA not ejected thus webpack config hidden in node_modules and not customised. It seems SB is changing the webpack config (in-memory?) before using it for its build, and the resulting config is incorrect. As a workaround, I've downgraded to CRA 4 and re-initialised storybook, but I'd love to be on the latest CRA/SB :) — Antoine OL
– Antoine OL, Commented Jan 20, 2022 at 11:26
Did you manage to solve this. Using storybook with Create React App v5 which uses webpack5 ? — nabeelfarid
– nabeelfarid, Commented May 9, 2022 at 10:00

Justsolarry · Accepted Answer · 2022-01-23 22:47:00Z

3

Storybook 6.3 brings opt-in support for building both your project and the manager UI with webpack 5. To do so:

yarn add @storybook/builder-webpack5 @storybook/manager-webpack5 --dev

# or

npm install @storybook/builder-webpack5 @storybook/manager-webpack5 --save-dev

Then edit your .storybook/main.js config:

module.exports = {
  core: {
    builder: 'webpack5',
  },
};

answered Jan 23, 2022 at 22:47

Justsolarry

3121 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Erik J Over a year ago

Just ran into the same problem, despite having these dependencies and config.

Wolfgang · Accepted Answer · 2021-12-15 11:46:36Z

-1

Webpack has been initialized using a configuration object that does not match the API schema.

Please review your webpack configuration: https://storybook.js.org/docs/react/configure/webpack

answered Dec 15, 2021 at 11:46

Wolfgang

1,4082 gold badges9 silver badges11 bronze badges

2 Comments

Sergio Collado Over a year ago

But I have the default create-react-app and the default installation of storybook. Is this a bug?

Wolfgang Over a year ago

It should work, but please review the webpack configuration, the error is clear. This can happen for dozens of reasons so it's better to follow the instructions in the link I shared and making sure webpack is configured correctly.

Collectives™ on Stack Overflow

Webpack error adding storybook to create-react-app

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related