reactjs 从6.2.13到6.5.14的Storybook迁移存在许多错误

plupiseo  于 2023-01-08  发布在  React
关注(0)|答案(1)|浏览(132)

我是StoryBook的新手,我将StoryBook从6.2.13升级到6.5.14。但是,当我运行命令yarn storybook时,我得到了下面的错误列表,StoryBook没有启动。

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.

不知道如何摆脱这些错误。将不胜感激任何建议。
我正在使用Next.js 12和React 18。

5uzkadbs

5uzkadbs1#

首先,如果您是从Storybook 6.2.13迁移,请检查.storybook/main.js文件。此文件结构已从6.2.13更改为6.5.14。
请看这个故事书链接,我提到修复这个:https://storybook.js.org/docs/react/configure/overview
我从链接遵循的步骤:
步骤1:更新package.json文件

{
   ...
   "scripts": {
       ...
       "storybook": "start-storybook -p 6006 -s public",
       ...
   }
   ...
}

更新为:

{
   ...
   "scripts": {
       ...
       "storybook": "start-storybook -p 6006 public",
       ...
   }
   ...
}

第二步:更新. storybook/main.js

module.exports = {
    ...
    "addons": [
        "@storybook/addon-a11y",
        "@storybook/addon-essentials",
        "@storybook/addon-links",
        "storybook-addon-next-router",
        "@storybook/react"
    ],
    ...
}

更新为:

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,
    },
    ...
}

步骤3:现在您可以从终端成功运行此命令了
npx storybook upgrade

相关问题