I am new to storybook and I upgraded the storybook from 6.2.13 to 6.5.14. However, when I run the command yarn storybook I get the below list of errors and the storybook does not start.
yarn run v1.22.19
$ start-storybook -p 6006 -s public
info @storybook/react v6.5.14
info
(node:22853) 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 Found existing addon "@storybook/addon-actions", skipping.
info => Serving static files from ./public at /
attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry
info Addon-docs: using MDX1
info => Using implicit CSS loaders
(node:22853) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss',
you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.
See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details.
info => Using default Webpack4 setup
info => Ignoring cached manager due to change in manager config
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.entry should not contain the item '/.../node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js' twice.
ERR! -> A non-empty array of non-empty strings
ERR! at webpack (/.../node_modules/webpack/lib/webpack.js:31:9)
ERR! at starterGeneratorFn (/.../node_modules/@storybook/builder-webpack4/dist/cjs/index.js:137:18)
ERR! at starterGeneratorFn.next (<anonymous>)
ERR! at Object.start (/.../node_modules/@storybook/builder-webpack4/dist/cjs/index.js:275:34)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/.../node_modules/@storybook/core-server/dist/cjs/dev-server.js:203:28)
ERR! at async buildDevStandalone (/.../node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR! at async buildDev (/.../node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.entry should not contain the item '/.../node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js' twice.
ERR! -> A non-empty array of non-empty strings
ERR! at webpack (/.../node_modules/webpack/lib/webpack.js:31:9)
ERR! at starterGeneratorFn (/.../node_modules/@storybook/builder-webpack4/dist/cjs/index.js:137:18)
ERR! at starterGeneratorFn.next (<anonymous>)
ERR! at Object.start (/.../node_modules/@storybook/builder-webpack4/dist/cjs/index.js:275:34)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/.../node_modules/@storybook/core-server/dist/cjs/dev-server.js:203:28)
ERR! at async buildDevStandalone (/.../node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR! at async buildDev (/.../node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
Not sure how to get rid of these errors. Would appreciate any suggestions.
I am using Next.js 12 with React 18.
Firstly, if you are migrating from Storybook 6.2.13, please check the .storybook/main.js file. This file structure has changed from 6.2.13 to 6.5.14.
Please see this storybook link that I referred to fix this: https://storybook.js.org/docs/react/configure/overview
The steps I followed from the link:
Step 1: Update package.json file
{
...
"scripts": {
...
"storybook": "start-storybook -p 6006 -s public",
...
}
...
}
updated to:
{
...
"scripts": {
...
"storybook": "start-storybook -p 6006 public",
...
}
...
}
Step 2: Update `.storybook/main.js
module.exports = {
...
"addons": [
"@storybook/addon-a11y",
"@storybook/addon-essentials",
"@storybook/addon-links",
"storybook-addon-next-router",
"@storybook/react"
],
...
}
updated to:
module.exports = {
...
staticDirs: ['../public'],
addons: [
"@storybook/addon-a11y",
"@storybook/addon-essentials",
"@storybook/addon-links",
"storybook-addon-next-router",
],
framework: "@storybook/react",
core: {
builder: 'webpack4',
},
features: {
postcss: false,
},
...
}
Step 3: Now you can run this command successfully from your terminal
npx storybook upgrade