Storybook: 使用core-js ^ 3.0时，Storybook v5中断

故事书以某种方式错误地使用了core-js。 @babel/preset-env版本7.4.1升级到core-js@3 ，它在运行测试时破坏了我的Storybook react应用

client-api看起来应该具有core-js @ 2作为依赖项，因为生成的核心需要它

尽管它说已在5.0.4和5.0.5中修复，但仍然出现此错误。

繁殖方法：
安装@storybook/cli和init软件包。 然后使用npx -p @storybook/cli sb init --type react初始化故事书。

➜  my-prj npx -p @storybook/cli sb init --type react
npx: installed 404 in 11.526s

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js<strong i="11">@2</strong>    npm install --save core-js<strong i="12">@3</strong>
  yarn add core-js<strong i="13">@2</strong>              yarn add core-js<strong i="14">@3</strong>

[BABEL] Note: The code generator has deoptimised the styling of /Users/lumio/.npm/_npx/74147/lib/node_modules/@storybook/cli/node_modules/lodash/lodash.js as it exceeds the max of 500KB.

 sb init - the simplest way to add a storybook to your project.

 • Installing Storybook for user specified project type. ✓
 • Adding storybook support to your "React" app. ✓
 • Preparing to install dependencies. ✓


> [email protected] install ./my-prj/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download
[fsevents] Success: "./my-prj/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

added 1160 packages from 900 contributors in 23.386s

 • Installing dependencies. ✓

To run your storybook, type:

   npm run storybook

For more information visit: https://storybook.js.org

➜  my-prj nvim .
➜  my-prj yarn storybook
yarn run v1.15.2
$ start-storybook -p 6006
info @storybook/react v5.0.5
info
info => Loading presets
info => Loading presets
info => Loading custom addons config.
info => Using default webpack setup.
info => Using base config because react-scripts is not installed.
 10% building 5/8 modules 3 active ...j/node_modules/querystring-es3/index.js
WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js<strong i="15">@2</strong>    npm install --save core-js<strong i="16">@3</strong>
  yarn add core-js<strong i="17">@2</strong>              yarn add core-js<strong i="18">@3</strong>

 11% building 13/18 modules 5 active ...my-prj/node_modules/strip-ansi/index.js
WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js<strong i="19">@2</strong>    npm install --save core-js<strong i="20">@3</strong>
  yarn add core-js<strong i="21">@2</strong>              yarn add core-js<strong i="22">@3</strong>

webpack built 896edc3c5271d2618768 in 4031ms
╭──────────────────────────────────────────────────╮
│                                                  │
│   Storybook 5.0.5 started                        │
│   4.71 s for manager and 4.48 s for preview      │
│                                                  │
│   Local:            http://localhost:6006/       │
│   On your network:  http://10.52.40.112:6006/    │
│                                                  │
╰──────────────────────────────────────────────────╯

@lumio这不是一个错误，这是一个警告。 它已在5.1.0-alpha.16中修复，如果没有人抱怨，我将在几天后将其发布到latest 。

得到它了！ 谢谢！

我将故事书版本升级到5.0.6，从而解决了此问题。

@ jessy1092很

你好，
即使使用故事书5.1.0-alpha.18，它似乎也不适合我

这是一个可复制的仓库： https :

yarn install
yarn storybook

我希望这有帮助

@christophehurpeau有机会您可以尝试5.0.6吗？ 重新打开这个。 😭

在主项目中使用core-js @ v3时，我仍然遇到相同的问题。 解决方案是确保在webpack配置中将core-js/modules解析为与故事书捆绑在一起的版本

resolve: {
    alias: {
        'core-js/modules': path.resolve(
            __dirname,
            'node_modules/@storybook/core/node_modules/core-js/modules',
        ),
    }
}

哈克解决方案，但现在应该足够好了。

@shilman还尝试了5.0.6，同样的结果（https://github.com/christophehurpeau/cra-rest-hooks-storybook/tree/storybook-5.0.6）

@artursvonda我不使用core-js v3，依赖项使用它。 我没有node_modules/@storybook/core/node_modules/core-js因为v2是react-scripts和@ storybook / core都使用的版本，已在node_modules中进行了重复数据删除。 只有使用core-js 3的依赖项无法找到core-js

啊，所以当我删除别名时它起作用：

module.exports = ({ config, mode }) => {
  console.log(config.resolve.alias);
  delete config.resolve.alias['core-js'];
  return config;
};

哇。 别名很可怕。 为什么故事书会使用它们？

cc @ndelangen

我也有这个问题。 我正在使用最新的Firebase，最近将它添加到core-js @ 3 。
升级Firebase后，用于运行的故事书会产生以下错误：

ERROR in ./node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/array/find' in '/Users/jin/kinyapp/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/@firebase/polyfill/dist/index.esm.js 3:0-37
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/firebase.js
 @ ./src/components/Login.js
 @ ./src/stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

ERROR in ./node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/array/find-index' in '/Users/jin/kinyapp/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/@firebase/polyfill/dist/index.esm.js 4:0-43
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/firebase.js
 @ ./src/components/Login.js
 @ ./src/stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

ERROR in ./node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/object/assign' in '/Users/jin/kinyapp/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/@firebase/polyfill/dist/index.esm.js 5:0-40
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/firebase.js
 @ ./src/components/Login.js
 @ ./src/stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

可以确认，

// In some story or dependency of a story
import firebase from "firebase/app"

在新的cra2和sb init崩溃中

对我来说也是一样。 回到firebase版本4.12.1但是已经使用了一年多了，不是一个好的解决方案。

啊，所以当我删除别名时它起作用：

module.exports = ({ config, mode }) => {
  console.log(config.resolve.alias);
  delete config.resolve.alias['core-js'];
  return config;
};

同时使用[email protected]和[email protected]并将其添加到.storybook/webpack.config.js解决此问题。

我刚刚看到firebase进行了5.10.0的更新，并将故事书升级为5.0.10 ，并且能够删除上面的别名“ hack”。

不幸的是，将Firebase和Storybook都更新到最新版本并不能解决我的问题。
我必须停止使用故事书来解决这个问题。

@zjaml您是否尝试过上述

关于@shilman ，我不知道应该在哪个文件中执行此操作。

@zjaml那是.storybook/webpack.config.js 。 请让我知道它是否适合您！

@shilman可以这样工作！ 谢谢！

我正在使用babel预设环境，而故事书5.0.10则遇到相同的问题

"useBuiltIns": "usage",
"corejs": {version: 3},

删除别名的解决方法为我修复了它。 🙏 @christophehurpeau

我们应该从预览的webpack.config中删除别名吗？

甚至所有的别名？

这里同样的问题，删除别名不能解决我的问题:(

对我来说也是一样。 删除别名不能解决问题

该PR将解决此问题以及我认为的许多其他问题：
https://github.com/storybooks/storybook/pull/6566

不过，这可能是重大的重大更改，因此它可能会在V6中发布，我们仍在对此进行辩论。

可能我们可以花一些时间将PR分成多个PR，以便我们可以更快地合并和发布某些内容。

帮助将不胜感激！

此处存在同样的问题-尽管我们已将其更新为使用core-js版本3，但我们已将其破坏为react-app-polyfill 。暂时将其回滚到0.2.2版本。

确认此修复程序也对我有用， [email protected]

在上面添加文件./storybook/webpack.config.js

〜对不起-@ storybook / [email protected]似乎没有发布-是故意的吗？〜

编辑：对不起-结束在其他问题中找到答案。 https://github.com/storybooks/storybook/issues/5893

解决方法
使用下一个版本的CLI / React native获取5.1.0-alpha.x：

npx -p @ storybook / cli @ next sb init --type react_native

删除别名对我不起作用。 但是，我可以通过将babel文件移到.storybook来解决此问题

嗨，大家好！ 似乎最近在这个问题上没有发生太多事情。 如果仍有问题，意见或错误，请随时继续讨论。 不幸的是，我们没有时间解决所有问题。 我们随时欢迎捐款，因此，如果您想提供帮助，请向我们发送请求请求。 不活跃的问题将在30天后关闭。 谢谢！

^据我所知，这仍然是一个很大的问题，不应将其标记为不活动

@jdhayford AFAIK，此问题已在5.1中修复，预计将在几天后发布

@shilman太好了！ 谢谢，也感谢贡献者👍

该问题仍在发生，但可以使用@brycehill解决方案进行修复

删除别名对我不起作用。 但是，我可以通过将babel文件移到.storybook来解决此问题

我仍然面临着同样的问题。 @ByDesignGit您能解释一下如何解决它吗？

可以通过手动安装最新的npm i core-js -D进行修复。
手动安装依赖项不是很好。 它应该在内部适当地处理此类问题。

等待正确的修复。

我也遇到了同样的问题。 但是，我认为这与原始问题相反，以前的软件包安装了较旧版本的core-js（2.6.9）作为依赖项，而现在的故事书则需要core-js @ 3。
使用@ChandanPHAI解决方案进行临时修复，并等待正确的修复。

我仍然面临着同样的问题。 @ByDesignGit您能解释一下如何解决它吗？

我将.babelrc到.storybook

该问题仍在发生，但可以使用@brycehill解决方案进行修复

删除别名对我不起作用。 但是，我可以通过将babel文件移至.storybook来解决此问题

同样的事情在这里：

ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.for-each' in '/indio-ui/.storybook'
 @ ./.storybook/config.js 1:0-43
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

删除别名对我不起作用。 但是我按照@ChandanPHAI的建议安装了npm i core-js -D ，它可以工作👌

等待适当的修复。

我仍然面临着同样的问题。 @ByDesignGit您能解释一下如何解决它吗？

我将.babelrc到.storybook

该问题仍在发生，但可以使用@brycehill解决方案进行修复

删除别名对我不起作用。 但是，我可以通过将babel文件移至.storybook来解决此问题

有效！ 我在.storybook中复制了.babelrc

@ arvenz0210 @ByDesignGit并不意味着您现在必须维护两个.babelrc文件？ 似乎不可取。

将我的vue.js项目升级到"@storybook/vue": "^5.1.1"为我解决了core-js别名问题。 👍

• 不需要移动我的babel.config.js
• 不需要从Webpack配置中添加/删除任何内容（我正在使用https://github.com/storybookjs/vue-cli-plugin-storybook v0.6.1，因此我的webpack配置部分是由vue-cli使用以下命令生成的我通过vue.config.js添加了一些无关的东西，其中vue-cli与动态生成的webpack配置合并。）
• 不需要添加/删除依赖于core-js的对core-js，别名或dep的任何引用...

我也在Angular项目中看到了这个，因此没有.babel文件。 单独安装core-js或删除别名都没有好运。

//  console.log(config.resolve.alias);
{
  'babel-runtime/core-js/object/assign': '/Development/canopy/node_modules/@storybook/core/node_modules/core-js/es/object/assign.js',
  react: '~/Development/canopy/node_modules/react',
  'react-dom': '/Development/canopy/node_modules/react-dom'
}

所有修订在5.1.1。

   "@storybook/addon-actions": "^5.1.1",
    "@storybook/addon-knobs": "^5.1.1",
    "@storybook/addon-notes": "^5.1.1",
    "@storybook/addon-viewport": "^5.1.1",
    "@storybook/addons": "^5.1.1",
    "@storybook/angular": "^5.1.1",

抱歉，我没有时间进一步调试。

使用@storybook/react": "^5.1.1"并仍然使用新的npm install解决此问题。 我怀疑@ChandanPHAI是正确的，我还有其他依赖项已经安装了core-js软件包的v2。

今天执行的此PR应该解决此问题， @ shilman即将对此进行新版本测试：＃7051

"@storybook/react": "^5.1.3"仍在发生-安装core-js --dev最终解决了这个问题。

任何面临问题的人https://github.com/storybookjs/storybook/issues/7021 ？

呀！ 我刚刚发布了包含引用此问题的PR＃7016的https://github.com/storybookjs/storybook/releases/tag/v5.1.4 。 立即升级以试用！

解决此问题。 如果您认为还有更多事情要做，请重新打开。

@shilman刚刚更新，并且同样的错误... :(

Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator'

@shilman我将故事书和

仍然得到与core-js相关的错误。

安装npm i core-js -D在本地修复该问题。

没有core-js库，它将无法正常工作。

您要在代码中的任何地方导入babel-polyfill吗？ 如果是这样，请尝试将其删除？

这是我修复获得的repro分支的方法：
https://github.com/umakantp/demo-repro/pull/1

请通过任何渠道向我发送更多repro仓库，以便我解决问题。

@ChandanPHAI @DonikaV

@ndelangen嗨，我的文件夹中没有babel-polyfill 。 我不能告诉你更多。 这是私人回购。
故事书和所有插件均已更新。

嗨，即使在5.1.4上，core-js也会遇到相同的问题。 手动将core-js安装为dev依赖项也不起作用。

我正在努力在24小时内发布新版本！

e！ 我刚刚发布了https://github.com/storybookjs/storybook/releases/tag/v5.1.5，其中包含引用此问题的PR＃7086。 立即升级以试用！

解决此问题。 如果您认为还有更多事情要做，请重新打开。

我仍然遇到几乎所有组件的错误，如下所示：

ERROR in ./src/components/list/VirtualizedList.jsx
Module not found: Error: Cannot find module 'C:\ProjectDirectory\node_modules\@storybook\addon-storysource\loader.js!C:\ProjectDirectory\node_modules\core-js\modules\web.dom-collections.iterator.js'
 @ ./src/components/list/VirtualizedList.jsx 19:0-54
 @ ./src/components/list/index.js
 @ ./src/components/list/List.story.jsx
 @ ./src/components sync story\.jsx?$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

我不排除可能是我的错。 我贴上了纱线缓存，删除了yarn.lock，安装了每个依赖项的最新版本。 我没有安装core-js作为依赖项，但是我将babel与一些预设配合使用，例如@babel/preset-env 。 我有一个自定义的webpack配置：

const path = require('path');
const { DefinePlugin } = require('webpack');

const buildTimeConfig = require('../buildTimeConfig');

const resolveLocalDirectory = relativePath => path.resolve(__dirname, '../', relativePath);

module.exports = async ({ config }) => {
  config.resolve.extensions.push('.jsx');
  config.resolve.extensions.push('.json');

  config.plugins.push(
    new DefinePlugin({
      SUPPORTED_LOCALES: `'${buildTimeConfig.REQUIRED_LOCALES}'`,
    }),
  );

  config.resolve.alias = {
    $components: resolveLocalDirectory('src/components'),
  };

  config.module.strictExportPresence = true;

  config.module.rules.push({
    test: /\.jsx?$/,
    loaders: [require.resolve('@storybook/addon-storysource/loader')],
    enforce: 'pre',
  });

  // Unsafe override of css-modules rule for the following
  // https://github.com/storybooks/storybook/issues/6083.
  config.module.rules[2] = {
    oneOf: [
      {
        test: /\.module\.(scss|css)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              localsConvention: 'camelCaseOnly',
              importLoaders: 1,
              modules: {
                localIdentName: '[local]_[hash:5]',
              },
              sourceMap: true,
            },
          },
          'sass-loader',
        ],
      },
      {
        test: /(?<!\.module)\.(scss|css)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true,
            },
          },
          'sass-loader',
        ],
      },
      {
        test: /\.json$/,
        include: /node_modules\/emoji-dictionary/,
        loader: 'json-loader',
      },
      {
        exclude: /\.(js|jsx|ejs|html|json|md)$/,
        loader: 'file-loader',
        options: { name: 'assets/[name].[ext]' },
      },
    ],
  };

  return config;
};

@filippoitaliano我有完全相同的错误。 我可以确认文件存在于core-js模块路径中，并且babel预设已启用core-js 3，但仍然失败。 您能解决这个问题吗？

编辑：

如果删除addon-storysource，则按预期工作。 不知道是什么原因造成的。

编辑2：
挖得更深。 由于某种原因，storysource加载器需要将所有.js文件放入其中，才能显示在插件面板中，并且必须在配置中排除节点模块

{
test: /\.js$/,
exclude: /node_modules/,
loaders: [require.resolve('@storybook/addon-storysource/loader')],
enforce: 'pre',
}

可能与＃3626＃6984有关

cc @ igor-dv @ libetl☝️

@ aga5tya是的，您遇到了问题。 我排除了node_modules，一切正常！

我不得不：

• [x]更新所有@ storybook / *依赖项
• [x]将"corejs": 3到我的.babelrc
• [x]运行yarn add corejs@3
• [x]将exclude: /node_modules/,到我的webpack.config.js中
• [x]从我的app.js中删除import 'babel-polyfill'

babel polyfill已过时，必须在各处被core-js取代

或airbnb浏览器垫片：-p

无论哪种方式，node_modules都应始终从编译中排除。

我遇到以下错误：

./.storybook/config.js中的错误
找不到模块：错误：找不到模块'core-js / modules / web.dom.iterable'

我正在使用Storybook / Vue 5.1.9。

@flowck，请在您的项目根目录中安装core-js v3

我们是否可以找到一种无需使用任何核心js即可使用故事书的方法？ 消费者为什么不能提供自己的垫片？

babel-polyfills是我必须使用的库的一个部门。 在这种情况下，如何使故事书运行？

我运行了yarn upgrade interactive --latest ，升级了所有与故事书相关的依赖项，现在可以正常工作了！ 🎉

仅供参考：此错误仅在我添加了@storybook/addon-knobs插件后才发生。

@ chadlavi-casebook嗯，您可以尝试添加一个webpack忽略插件，我猜呢？
https://webpack.js.org/plugins/ignore-plugin/

运行@ storybook / vue 5.1.9时遇到相同的问题。 运行yarn why core-js结果是：

=> Found "[email protected]"
info Has been hoisted to "core-js"
info Reasons this module exists
   - "workspace-aggregator-20eaddfd-71c7-48bf-a12d-ecca73d8226d" depends on it
   - Hoisted from "_project_#@storybook#addon-knobs#core-js"
   - Hoisted from "_project_#@storybook#addon-viewport#core-js"
   - Hoisted from "_project_#@storybook#vue#core-js"
   - Hoisted from "_project_#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#addons#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#client-api#core-js"
   - Hoisted from "_project_#@storybook#addon-viewport#@storybook#client-logger#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#components#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#core-events#core-js"
   - Hoisted from "_project_#@storybook#vue#@storybook#core#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#theming#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#addons#@storybook#api#core-js"
   - Hoisted from "_project_#@storybook#vue#@storybook#core#@storybook#channel-postmessage#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#addons#@storybook#channels#core-js"
   - Hoisted from "_project_#@storybook#vue#@storybook#core#@storybook#node-logger#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#client-api#@storybook#router#core-js"
   - Hoisted from "_project_#@storybook#vue#@storybook#core#@storybook#ui#core-js"
   - Hoisted from "_project_#@storybook#vue#@storybook#core#lazy-universal-dotenv#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#components#simplebar-react#simplebar#core-js"
info Disk size without dependencies: "6.69MB"
info Disk size with unique dependencies: "6.69MB"
info Disk size with transitive dependencies: "6.69MB"
info Number of shared dependencies: 0
=> Found "@vue/babel-preset-app#[email protected]"
info This module exists because "_project_#@vue#cli-plugin-babel#@vue#babel-preset-app" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0
=> Found "@babel/runtime-corejs2#[email protected]"
info This module exists because "_project_#@vue#cli-plugin-babel#@vue#babel-preset-app#@babel#runtime-corejs2" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0
=> Found "fbjs#[email protected]"
info This module exists because "_project_#@storybook#addon-knobs#@storybook#components#recompose#fbjs" depends on it.
info Disk size without dependencies: "4.37MB"
info Disk size with unique dependencies: "4.37MB"
info Disk size with transitive dependencies: "4.37MB"
info Number of shared dependencies: 0
=> Found "babel-runtime#[email protected]"
info This module exists because "_project_#@storybook#addon-knobs#@storybook#components#react-syntax-highlighter#babel-runtime" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0

dev在devDependencies中

确保首先删除您的node_modules。
rm -rf node_modules

从v5.0.6升级到v5.1.9后，我遇到了这个问题。

同样的问题。 从v5.1.9降级为v5.0.6后已修复

@JamyGolden和@Exomnius您能否分享更多有关您的设置的信息？

yarn why core-js的输出很有帮助，复制回购更是如此。

@ndelangen我现在已经升级到5.1.9没有问题，我想已经安装了新的补丁程序依赖性并解决了问题🤷‍♀️

编辑，必须再次降级，CI测试失败。 我对此做了yarn why core-js ：

$ yarn why core-js
yarn why v1.17.3
[1/4] 🤔  Why do we have the module "core-js"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "core-js"
info Reasons this module exists
   - Hoisted from "@storybook#react#core-js"
   - Hoisted from "@storybook#addon-actions#core-js"
   - Hoisted from "@storybook#addon-links#core-js"
   - Hoisted from "@storybook#addon-storyshots#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#components#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#api#core-js"
   - Hoisted from "@storybook#react#@storybook#core#core-js"
   - Hoisted from "@storybook#addon-links#@storybook#core-events#core-js"
   - Hoisted from "@storybook#addon-storyshots#@storybook#addons#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#theming#core-js"
   - Hoisted from "@storybook#react#@storybook#node-logger#core-js"
   - Hoisted from "@storybook#addon-links#@storybook#router#core-js"
   - Hoisted from "@storybook#addon-storyshots#@storybook#addons#@storybook#channels#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#channel-postmessage#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#client-api#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#ui#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#theming#@storybook#client-logger#core-js"
   - Hoisted from "@storybook#react#@storybook#core#lazy-universal-dotenv#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#components#simplebar-react#simplebar#core-js"
info Disk size without dependencies: "6.69MB"
info Disk size with unique dependencies: "6.69MB"
info Disk size with transitive dependencies: "6.69MB"
info Number of shared dependencies: 0
=> Found "protractor-flake#[email protected]"
info This module exists because "protractor-flake" depends on it.
info Disk size without dependencies: "3.45MB"
info Disk size with unique dependencies: "3.45MB"
info Disk size with transitive dependencies: "3.45MB"
info Number of shared dependencies: 0
=> Found "core-js-compat#[email protected]"
info This module exists because "@babel#preset-env#core-js-compat" depends on it.
info Disk size without dependencies: "6.63MB"
info Disk size with unique dependencies: "6.63MB"
info Disk size with transitive dependencies: "6.63MB"
info Number of shared dependencies: 0
=> Found "babel-runtime#[email protected]"
info This module exists because "social-tags-webpack-plugin#babel-runtime" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "node-plop#[email protected]"
info This module exists because "plop#node-plop" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "babel-polyfill#[email protected]"
info This module exists because "flow-typed#babel-polyfill" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "fbjs#[email protected]"
info This module exists because "@storybook#addon-actions#@storybook#components#recompose#fbjs" depends on it.
info Disk size without dependencies: "4.37MB"
info Disk size with unique dependencies: "4.37MB"
info Disk size with transitive dependencies: "4.37MB"
info Number of shared dependencies: 0
✨  Done in 1.94s.

您在本地运行它，但是CI仍然有相同的错误？

@ndelangen是的，CI和另一个开发人员遇到了问题（当我掌握它时，我将使用其纱线/节点版本进行更新），但是我这边很好（纱线1.15.2 ，节点8.15.1 ），我们也使用了一个锁文件。 上面是失败的yarn why core-js ，这是我的：

yarn why core-js
yarn why v1.15.2
warning ../package.json: No license field
[1/4] 🤔  Why do we have the module "core-js"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "core-js"
info Reasons this module exists
   - Hoisted from "@storybook#react#core-js"
   - Hoisted from "@storybook#addon-actions#core-js"
   - Hoisted from "@storybook#addon-links#core-js"
   - Hoisted from "@storybook#addon-storyshots#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#components#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#api#core-js"
   - Hoisted from "@storybook#react#@storybook#core#core-js"
   - Hoisted from "@storybook#addon-links#@storybook#core-events#core-js"
   - Hoisted from "@storybook#addon-storyshots#@storybook#addons#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#theming#core-js"
   - Hoisted from "@storybook#react#@storybook#node-logger#core-js"
   - Hoisted from "@storybook#addon-links#@storybook#router#core-js"
   - Hoisted from "@storybook#addon-storyshots#@storybook#addons#@storybook#channels#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#channel-postmessage#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#client-api#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#ui#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#theming#@storybook#client-logger#core-js"
   - Hoisted from "@storybook#react#@storybook#core#lazy-universal-dotenv#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#components#simplebar-react#simplebar#core-js"
info Disk size without dependencies: "6.69MB"
info Disk size with unique dependencies: "6.69MB"
info Disk size with transitive dependencies: "6.69MB"
info Number of shared dependencies: 0
=> Found "protractor-flake#[email protected]"
info This module exists because "protractor-flake" depends on it.
info Disk size without dependencies: "3.45MB"
info Disk size with unique dependencies: "3.45MB"
info Disk size with transitive dependencies: "3.45MB"
info Number of shared dependencies: 0
=> Found "core-js-compat#[email protected]"
info This module exists because "@babel#preset-env#core-js-compat" depends on it.
info Disk size without dependencies: "6.63MB"
info Disk size with unique dependencies: "6.63MB"
info Disk size with transitive dependencies: "6.63MB"
info Number of shared dependencies: 0
=> Found "babel-runtime#[email protected]"
info This module exists because "social-tags-webpack-plugin#babel-runtime" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "node-plop#[email protected]"
info This module exists because "plop#node-plop" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "babel-polyfill#[email protected]"
info This module exists because "flow-typed#babel-polyfill" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "fbjs#[email protected]"
info This module exists because "@storybook#addon-actions#@storybook#components#recompose#fbjs" depends on it.
info Disk size without dependencies: "4.37MB"
info Disk size with unique dependencies: "4.37MB"
info Disk size with transitive dependencies: "4.37MB"
info Number of shared dependencies: 0
✨  Done in 2.85s.

每个断言中都存在相同错误的示例：

FAIL path/to/test/index.spec.js
  ● Test suite failed to run

    Cannot find module 'core-js/modules/es6.symbol' from 'localMocksFile.js'

啊哈，故事书运行正常，但测试仍在使用旧的core-js版本！

localMocksFile.js里面是什么？ 您可能需要做的就是更新该1个文件。

@ndelangen我先前粘贴的错误与运行的Storyshots有关（仅在更新Storybook的版本后才会发生）。 其他开发人员在运行yarn storybook遇到的错误包含很多类似的错误，似乎每个文件都有一个错误：

Entrypoint main [big] = runtime~main.78e9af38499895fecc3d.bundle.js runtime~main.78e9af38499895fecc3d.bundle.js.map vendors~main.78e9af38499895fecc3d.bundle.js vendors~main.78e9af38499895fecc3d.bundle.js.map main.78e9af38499895fecc3d.bundle.js main.78e9af38499895fecc3d.bundle.js.map
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true 64 bytes {main} [built]
[./.storybook/config.js] 368 bytes {main} [built]
[./app sync recursive \.stories\.(js|jsx)$] ./app sync \.stories\.(js|jsx)$ 5.07 KiB {main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~main} [built]
[./node_modules/@storybook/react/dist/client/index.js] 1.26 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js/features/symbol/index.js] 251 bytes {vendors~main} [built]
[./node_modules/global/window.js] 232 bytes {vendors~main} [built]
[./node_modules/mockdate/src/mockdate.js] 1.78 KiB {vendors~main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {vendors~main} [built]
[./node_modules/regenerator-runtime/runtime.js] 23 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true] 7.68 KiB {vendors~main} [built]
    + 1352 hidden modules

ERROR in ./app/helpers/device.js
Module not found: Error: Cannot find module 'core-js/modules/es6.regexp.match'
 @ ./app/helpers/device.js 1:0-42 1:42-84
 @ ./app/helpers/index.js
 @ ./app/components/Button/index.js
 @ ./app/components/Button/__tests__/index.stories.js
 @ ./app sync \.stories\.(js|jsx)$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true
...

不知道这是否对您有帮助，但是@babel/polyfill不包含在项目的主package.json中。

我遇到以下错误：

./.storybook/config.js中的错误
找不到模块：错误：找不到模块'core-js / modules / web.dom.iterable'

我正在使用Storybook / Vue 5.1.9。

通过安装https://www.npmjs.com/package/babel-loader解决

package.json

  "dependencies": {
    "babel-loader": "^8.0.6"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^5.1.11",
    "@storybook/addon-links": "^5.1.11",
    "@storybook/addons": "^5.1.11",
    "@storybook/react": "^5.1.11"
  }

这是一种解决方法，而不是修复程序，但是将我所有的Storybook软件包（包括插件）回滚到5.0.6版，已解决了该问题。 此线程中没有其他帮助。

（下面的React + Yarn命令，但可以轻松转换为NPM / Vue）：

第一：

yarn remove @storybook/react @storybook/addon-actions @storybook/addon-knobs @storybook/addon-links @storybook/addon-notes @storybook/addons @storybook/addon-storyshots 

其次是：

yarn add @storybook/[email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected]

我尝试运行故事书时看到了samme问题：
ERROR in ./src/lib/helpers.js Module not found: Error: Cannot find module 'core-js/modules/web.dom.iterable' @ ./src/lib/helpers.js 16:0-43 @ ./src/components/Person.js @ ./src/components/Person.stories.js @ ./src sync \.stories\.js$ @ ./.storybook/config.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

使用nvm更新到节点v12后，会发生这种情况。

我们必须这样做才能解决polyfill问题，因此我无法降级节点。 在此之前，一切正常。 不幸的是，我不知道在那之前我使用的是哪个节点版本。 我已经在此线程上进行了所有尝试，但我不想回滚至5.0.6。因为为此项目设置故事书的一个重要原因是使用新文档。 我已经将所有内容推送到了这里： https :

编辑：我降级了节点，它仍然无法正常工作，应该在发布之前尝试过。 我有点不知所措，我会继续寻找。

除了Nuxt.js v2.10.1以外，还使用@storybook/vue 5.2.5并具有相同的问题： yarn storybook可以工作，但是yarn build或任何其他与nuxt相关的任务失败。 yarn why core-js提供以下输出：

$ yarn why core-js
yarn why v1.17.3
[1/4] 🤔  Why do we have the module "core-js"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "core-js"
info Reasons this module exists
   - Hoisted from "@storybook#addon-actions#core-js"
   - Hoisted from "@storybook#addon-knobs#core-js"
   - Hoisted from "@storybook#addon-links#core-js"
   - Hoisted from "@storybook#addon-viewport#core-js"
   - Hoisted from "@storybook#addons#core-js"
   - Hoisted from "@storybook#vue#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#api#core-js"
   - Hoisted from "@storybook#addons#@storybook#channels#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#client-api#core-js"
   - Hoisted from "@storybook#addon-viewport#@storybook#client-logger#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#components#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#core-events#core-js"
   - Hoisted from "@storybook#vue#@storybook#core#core-js"
   - Hoisted from "@storybook#addon-links#@storybook#router#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#theming#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#client-api#@storybook#channel-postmessage#core-js"
   - Hoisted from "@storybook#vue#@storybook#core#@storybook#node-logger#core-js"
   - Hoisted from "@storybook#vue#@storybook#core#@storybook#ui#core-js"
   - Hoisted from "@storybook#vue#@storybook#core#lazy-universal-dotenv#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#components#simplebar-react#simplebar#core-js"
info Disk size without dependencies: "7.02MB"
info Disk size with unique dependencies: "7.02MB"
info Disk size with transitive dependencies: "7.02MB"
info Number of shared dependencies: 0
=> Found "babel-runtime#[email protected]"
info This module exists because "@storybook#addon-actions#react-inspector#babel-runtime" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0
=> Found "@nuxt/babel-preset-app#[email protected]"
info This module exists because "nuxt#@nuxt#webpack#@nuxt#babel-preset-app" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0
=> Found "@vue/babel-preset-app#[email protected]"
info This module exists because "vuepress#@vuepress#core#@vue#babel-preset-app" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0
=> Found "@babel/runtime-corejs2#[email protected]"
info This module exists because "vuepress#@vuepress#core#@vue#babel-preset-app#@babel#runtime-corejs2" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0
=> Found "fbjs#[email protected]"
info This module exists because "@storybook#addon-links#@storybook#router#@reach#router#create-react-context#fbjs" depends on it.
info Disk size without dependencies: "4.37MB"
info Disk size with unique dependencies: "4.37MB"
info Disk size with transitive dependencies: "4.37MB"
info Number of shared dependencies: 0
✨  Done in 1.25s.

所以我使用@frebro提供的相同方法，尝试

$ yarn add -D [email protected]

和🎉：我得到一个工作环境： yarn storybook ， yarn build和所有其他任务再次工作。

@rwam yarn add -D [email protected]在我的故事书5.2.5 HTML项目thx dude中对我有用:)

使用@ vue / cli迁移的Vue

关于错误：

如果'core-js': '^3.*.*':

ERROR in ./.storybook/config.js
Module not found: Error: Cannot find module 'core-js/modules/web.dom.iterable'

如果'core-js': '^2.*.*':

// many errors from storybook and addons
Cannot find module 'core-js/modules/***'

关于部门：

"@vue/cli*": "^4.0.5", depends on 'core-js': '^3.*.*'
"@vue/cli*": "^3.*.*", depends on 'core-js': '^2.*.*'
"@storybook/vue": "^5.1.0", depends on 'core-js': '^3.*.*' with d.ts
"@storybook/vue": "^5.0.6", depends on 'core-js': '^2.*.*' but without d.ts

我的工作部门：

"@vue/cli*": "^4.0.5", depends on 'core-js': '^3.*.*'
"@storybook/vue": "^5.1.0", depends on 'core-js': '^3.*.*' with d.ts

https://cli.vuejs.org/migrating-from-v3/#migrating -from-v3
如果Invalid Option: corejs is not a valid top-level option ： -rm -rf node_modules 。

您和您所爱的人的健康；）

我找到了一个更强大的解决方案，可以使Storybook在Nuxt项目中工作。 该解决方案取决于core-js的版本不匹配。 Nuxt使用默认版本2和Storybook版本3。因此，要解决此问题，我必须遵循@ nuxt / babel-preset-app中的说明：

注意：由于Babel 7.4.0都支持core-js @ 2和core-js @ 3 ，因此我们建议直接添加core-js并通过corejs选项设置版本。

我再次得到一个工作环境Nuxt 2.11.0使用此更新对我nuxt.config.js：

yarn add --dev core-js<strong i="15">@3</strong> @babel/runtime-corejs3

export default {
  …
  build: {
    babel: {
      presets() {
        return [
          [
            '@nuxt/babel-preset-app',
            {
              corejs: { version: 3 }
            }
          ]
        ]
      }
    }
  }
}

我遇到了这个解决方案，因为我无法将nuxt更新到最新的稳定版。

当尝试在至少一个组件使用静态查询的情况下将故事书（5.3.18）添加到gatsby v2时，我遇到了相同的问题。 按照@brycehill的建议将.babelrc移至.storybook 。

我找到了一个更强大的解决方案，可以使Storybook在Nuxt项目中工作。 该解决方案取决于core-js的版本不匹配。 Nuxt使用默认版本2和Storybook版本3。因此，要解决此问题，我必须遵循@ nuxt / babel-preset-app中的说明：

注意：由于Babel 7.4.0都支持core-js @ 2和core-js @ 3 ，因此我们建议直接添加core-js并通过corejs选项设置版本。

我再次得到一个工作环境Nuxt 2.11.0使用此更新对我nuxt.config.js：

yarn add --dev core-js<strong i="16">@3</strong> @babel/runtime-corejs3

export default {
  …
  build: {
    babel: {
      presets() {
        return [
          [
            '@nuxt/babel-preset-app',
            {
              corejs: { version: 3 }
            }
          ]
        ]
      }
    }
  }
}

我遇到了这个解决方案，因为我无法将nuxt更新到最新的稳定版。

太好了，为我工作！

@masives与gatsby碰到同样的问题。 您能否发布评论/ .babelrc的链接，因为我似乎在本期中找不到它们。

Nvm。 问题是由故事位于页面目录中引起的。 通过将页面故事移至__stories__解决了该问题

Next.js 9.1.1-> Next.js 9.4.4使我震惊了。

比较npm list core-js表明，更新Next后缺少核心js的babel运行时。 我在dev依赖项中重新安装了这个缺少的软件包，LO并认为它可以正常工作

cc @ndelangen

在处理从core-js v2到v3的迁移时，版本5.3.19也存在相同问题

对我来说也是一样。 就像@denimamab一样，我使用的是5.3.19

使用以下方法在本地修复：
rm ./package-lock.json
rm -rf ./node_modules
npm安装

现在，npm运行故事书作品

花了一天的时间后，只想与我分享我的经验教训……

在对问题进行故障排除时，我通读了许多GH问题线程，包括该线程。 我尝试了一些建议的修复程序，只有一个导致“可以接受的”成功。

参考

从那以后，将所有这些都放在一个地方，因为。 😅

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-modules-commonjs",
    "@babel/plugin-transform-object-assign",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-transform-runtime"
  ],
  "sourceRoot": "./"
}

last 2 versions
> 1%
IE >= 11

"scripts": {
  "build:storybook": "build-storybook --quiet -o ./dist/storybook",
  "storybook": "start-storybook -p 6006"
},
"dependencies": {
  "@babel/core": "7.3.4",
  "@babel/plugin-proposal-class-properties": "7.3.4",
  "@babel/plugin-proposal-optional-chaining": "7.7.5",
  "@babel/plugin-transform-modules-commonjs": "7.2.0",
  "@babel/plugin-transform-object-assign": "7.2.0",
  "@babel/plugin-transform-runtime": "7.6.2",
  "@babel/polyfill": "7.2.5",
  "@babel/preset-env": "7.3.4",
  "@babel/preset-react": "7.0.0",
  "babel-loader": "8.0.6",
  "react": "16.10.2",
  "react-dom": "16.10.2",
  "webpack": "4.43.0",
  "webpack-cli": "3.3.11"
},
"devDependencies": {
  "@storybook/addon-a11y": "5.3.19",
  "@storybook/addon-actions": "5.3.19",
  "@storybook/addon-docs": "5.3.19",
  "@storybook/addon-knobs": "5.3.19",
  "@storybook/addon-links": "5.3.19",
  "@storybook/addons": "5.3.19",
  "@storybook/react": "5.3.19",
  "@storybook/source-loader": "5.3.19",
  "acorn": "7.2.0",
  "storybook-design-token": "0.7.3",
  "webpack-dev-server": "3.10.3"
}

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.0.2 - /usr/local/bin/bash (via homebrew)
  Binaries:
    Node: 10.18.0
    npm: 6.13.4
  Browsers:
    Chrome: 86.0.4240.193
    Firefox: 80.0.1
    Safari: 14.0

项目状态和先决条件

• 我有一个出色的，单独的更改来升级所有[我团队的] webpack / babel软件包（我的更改和单独的更改中，babel均为v7.xx），但是由于我们的ie11测试，它尚未退出测试基础设施。 所做的更改引入了corejs版本3作为依赖项和useBuiltIns: 'usage' ，以前我们使用的是手动导入@babel/polyfill和默认导入useBuiltIns 。 我预计此更改很快就会合并。 这是我可以/不将corejs作为依赖项包含在当前更改中的主要原因，因为许多其他人已经建议（并验证）此修复程序。
• 根据更新webpack / babel软件包的分支，我有_another_重大更改，该分支将我们的故事书版本从v5.3.19升级到了最新的v6.xx。 ），其原因如下所述。
• 当前项目的主应用程序具有根.babelrc （如上所示）。 此配置使用@babel/preset-env并使用根.browserslistrc （如上所示）来确定polyfill的用法。 应用程序的主线分支中没有.storybook/.babelrc 。
• 我们仅将故事书用于内部开发人员文档。 由于组织主要使用chrome作为我们的默认浏览器，因此不需要polyfill。 这一启示实际上有助于最终解决方案。
• 我使用自定义的故事书Webpack配置，但只是为了在字体/图像周围添加额外的规则。 由于本故事书中概述的原因，我放弃了围绕.js处理修改核心规则的尝试。
• 在生成静态故事书站点时，我仅会遇到此问题。 通过随附的dev-server运行以进行本地开发不会遇到任何问题。

尽早修复尝试

我早期解决此问题的大多数尝试都围绕着尝试在根.babelrc设置选项（如上所示）以尝试与babel通信（由build-storybook工具运行），我想要发生转嫁。 没有成功执行其他人建议的useBuiltIns ， sourceType等配置。 另外，我尝试了整个clean-npm-cache-remove-node-modules-and-package-lock-then-npm-install路由，但无济于事（即使_did_导致dep的某些deps有所改变）。

最终解决方案

起初犹豫要尝试使用自定义.storybook/.babelrc ，我用尽了所有选项。 我之前曾尝试创建该文件，并通过extends属性使其与根.babelrc和谐地工作，然后碰壁，但是我决定再给它一个机会。

只需将根babel配置移动到特定于故事书的配置即可成功完成静态站点构建，但是仍然存在一些运行时错误，指示错误的编译（重新导出某些导入导致这些值是undefined最终导入所在文件中的.storybook/.babelrc的@babel/preset-env预设。 HUZZAH，问题已解决！ 但是，原始配置需要为该应用程序保留，因此，我将其重命名为.storybook/.babelrc-ci并恢复了原始的根配置。 然后，我不得不更新CI管道以检查ci配置并重命名以在静态站点构建之前切断-ci后缀，但这很简单。

猜问题

这个过程使我经常检查我的软件包和锁文件，我发现，虽然故事书v5.3.19及其所有插件都依赖corejs v3.xx，现有的@babel/polyfill和其他一些通货膨胀deps依赖corejs v2.xx！ 我猜测至少一个问题是应用程序中使用v2的最低公分母的分辨率。 这是有道理的，因为我遇到的错误是引用诸如es.array.iterator模块，而v2提供了诸如es6.array.iterator类的模块。 我不确定故事书的目的是否旨在支持较早的babel / corejs配置，因此该书如何冲突，但事实确实如此。 另外，关于/所有Storybook-babel /已安装babel / storybook-corejs / installed-corejs如何/如何找到并应用现有的.babelrc ，也必须有所帮助。 我不知道为什么将根配置移动到特定于故事书的配置可以神奇地解决该问题。 可能是路径？ ♂‍♂️

结论

如果您在经历了所有这些麻烦之后一直呆在这里，那就恭喜！ 😂

总而言之，我对解决这个问题所必须克服的困难并不感到兴奋，但也许我的情况有些独特。 另外，在合并上述babel / webpack / storybook升级后，我将可以将其全部删除。

无论如何，我希望这对于至少一个遭受相同问题的人来说很有趣。 我会继续标记@shilman和@ndelangen，因为他们似乎在解决这个问题上投入了精力。 👋