Storybook migration from 6.2.13 to 6.5.14 having many errors

Question

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.

Answer 1

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