Storybook: core-js ^ 3.0を使用すると、Storybookv5が壊れます

Storybookはどういうわけかcore-jsを誤って使用しています。 @babel/preset-envバージョン7.4.1がcore-js@3アップグレードされ、テストの実行時にStorybookReactアプリが壊れました

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を使用してcore-js/modulesがストーリーブックにバンドルされているバージョンに解決されていることを確認すること

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

ハッキーな解決策ですが、今のところ十分なはずです。

@shilmanも

@artursvonda私はcore- node_modules/@storybook/core/node_modules/core-jsはありません。 core-js3を使用する依存関係のみがcore-jsを検出しません

ああ、エイリアスを削除すると機能します。

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

ワオ。 エイリアスは怖いです。 なぜストーリーブックはそれらを使用しているのですか？

cc @ndelangen

私もこの問題を抱えています。 最近、 core-js @ 3に依存関係を追加した最新のFirebaseを使用しています。
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は機能しましたが、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上記の@parkerholladayの回避策を試し

@shilman 、それについては、どのファイルで実行する必要があるのか​​わかりません。

@zjamlそれは.storybook/webpack.config.jsです。 それがあなたのために働くかどうか私に知らせてください！

@shilmanそれはそのように機能します！ ありがとう！

私はbabelpreset-envを使用していますが、ストーリーブック5.0.10で同じ問題に直面しました

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

エイリアスの@ christophehurpeau

プレビューのwebpack.configからエイリアスを削除する必要がありますか？

多分すべてのエイリアス？

ここでも同じ問題がありますが、エイリアスを削除しても問題は解決しません:(

私にとっても同じ問題です。 エイリアスを削除しても問題は解決しません

このPRは、これと私が思う他の多くの問題に対処します。
https://github.com/storybooks/storybook/pull/6566

それはおそらく大きな重大な変更であるため、V6で出荷される可能性がありますが、これについてはまだ議論中です。

おそらく、そのPRを複数のPRに分割することに時間をかけることができるので、いくつかのものをより速くマージしてリリースできるかもしれません。

助けていただければ幸いです！

ここで同じ問題- react-app-polyfill壊れていますが、 core-jsバージョン3を使用するように更新されています。今のところバージョン0.2.2にロールバックします。

この修正が私にも有効であることを確認しました[email protected]

上記のファイル./storybook/webpack.config.jsを追加しました

〜申し訳ありません-@ storybook /

編集：申し訳ありません-他の問題で答えを見つけるのを終了しました。 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どのようにして修正できたのか説明していただけますか？

最新のnpmi 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は、2つの.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、エイリアス、またはdepsへの参照を追加/削除する必要はありませんでした...

これは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

問題を解決できるように、任意のチャネルを介してより多くのレポリポジトリを送ってください。

@ChandanPHAI @DonikaV

@ndelangenこんにちは、フォルダにbabel-polyfillがあり
ストーリーブックとすべてのアドオンが更新されました。

こんにちは、5.1.4でもcore-jsで同じ問題が発生しています。 dev依存関係としてcore-jsを手動でインストールすることも機能しませんでした。

私はこの新しいリリースに24時間以内に取り組んでいます！

イェーホー!! この問題を参照するPR＃7086を含むhttps://github.com/storybookjs/storybook/releases/tag/v5.1.5をリリースしました。 今すぐアップグレードしてお試しください！

この問題を閉じます。 まだまだやることがあると思われる場合は、再度開いてください。

私が持っているほとんどすべてのコンポーネントで、次のようなエラーが発生します。

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/preset-envようないくつかのプリセットでbabelを使用しています。 カスタム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] webpack.config.jsにexclude: /node_modules/,を追加します
• [x] app.jsからimport 'babel-polyfill'を削除します

babel polyfillは非推奨であり、どこでもcore-jsに置き換える必要があります

またはairbnb-browser-shims :-p

いずれにせよ、node_modulesは常にトランスパイルから除外する必要があります。

次のエラーが発生します：

./.storybook/config.jsのエラー
モジュールが見つかりません：エラー：モジュール 'core-js / modules /web.dom.iterable'が見つかりません

storybook / vue5.1.9を使用しています。

@flowckはcore-

core-jsをまったく使用せずにストーリーブックを使用する方法を見つけることができますか？ なぜ消費者は自分のシムを提供できないのですか？

babel-polyfillsは、私が使用しなければならないライブラリの部門です。 この場合、ストーリーブックを実行するにはどうすればよいですか？

yarn upgrade interactive --latest 、ストーリーブックに関連するすべての依存関係をアップグレードしましたが、動作しています。 🎉

参考：このエラーは、 @storybook/addon-knobsアドオンを追加した後にのみ発生しました。

@ chadlavi-casebook uhm、webpack ignoreプラグインを追加してみてください。
https://webpack.js.org/plugins/ignore-plugin/

@ storybook / vue5.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

✅devDependenciesにcore-js@^2.6.9を追加すると、問題が解決しました。

最初にnode_modulesを必ず削除してください。
rm -rf node_modules

v5.1.9から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 、node 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の中身

@ndelangen以前に貼り付けたエラーは、実行中のストーリーショットに関連していました（ストーリーブックのバージョンを更新した後にのみ発生します）。 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 / vue5.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パッケージ（アドオンを含む）をv5.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に更新した後に発生しました。

ポリフィルの問題を修正するためにこれを行う必要があったため、ノードをダウングレードできません。 その前はすべてが機能していました。 残念ながら、その前に使用していたノードのバージョンはわかりません。 このスレッドですべてを試しましたが、5.0.6にロールバックしたくありません。このプロジェクトのストーリーブックを設定する大きな理由は、新しいドキュメントを使用することです。 私はここにすべてをプッシュしました： https ：

編集：ノードをダウングレードしましたが、まだ機能していません。投稿する前に試してみてください。 私は何が起こっているのか少し途方に暮れています、私は探し続けます。

Nuxt.jsv2.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ヤーン追加-Dコア[email protected]は私のストーリーブック5.2.5HTMLプロジェクトthx男で私のために働きます:)

@ 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/***'

depsについて：

"@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からのこのメモに従う必要があります。

注： core-js @ 2とcore-js @ 3はどちらもBabel7.4.0からサポートされているため、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を最新のstableに出くわしました。

少なくとも1つのコンポーネントが静的クエリを使用していたときに、ストーリーブック（5.3.18）をgatsby v2に追加しようとしたときに、同じ問題に直面しました。 .babelrcを.storybookに移動すると、@ brycehillの提案どおりに機能しました。

StorybookをNuxtプロジェクトで機能させるためのより堅牢なソリューションを見つけました。 解決策は、core-jsのバージョンの不一致に依存します。 Nuxtはデフォルトバージョン2とStorybookバージョン3ごとに使用します。したがって、問題を解決するには、 @ nuxt / babel-preset-appからのこのメモに従う必要があります。

注： core-js @ 2とcore-js @ 3はどちらもBabel7.4.0からサポートされているため、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を最新のstableに出くわしました。

素晴らしい、私のために働いた！

@masivesgatsbyで同じ問題が発生しています。 コメント/.babelrcへのリンクを投稿していただけませんか。この号ではそれらが見つからないようです。

Nvm。 問題は、ページディレクトリにあるストーリーが原因でした。 ページストーリーを__stories__に移動して問題を解決しました

Next.js 9.1.1-> Next.js9.4.4が私をつまずかせました。

npm list core-jsの結果を比較すると、Nextを更新した後、コアjsのbabelランタイムが欠落していることがわかりました。 私はこの不足しているパッケージを開発依存関係とLOに再インストールしましたが、それが機能するのを見てください

cc @ndelangen

core-js v2からv3への移行を処理する際の、バージョン5.3.19と同じ問題

私にとっても同じ問題です。 @denimamabのように私はバージョン5.3.19

ローカルで修正しました：
rm./package-lock.json
rm -rf ./node_modules
npmインストール

npmrunストーリーブックが機能するようになりました

このバグに1日を費やした後、このバグに関する私の経験を共有したかっただけです...

問題のトラブルシューティングを行う際に、これを含む多数のGH問題スレッドを読みました。 提案された修正のいくつかを試しましたが、1つだけが「許容できる」成功をもたらしました。

参照

それ以来、これらすべてを1か所にまとめています。 😅

{
  "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を含めることができる/含めない主な理由です。
• ストーリーブックのバージョンをv5.3.19から最新のv6.xxにアップグレードするwebpack / babelパッケージを更新するブランチに基づいて、_別の_未解決の変更があります。すべてがうまくいくと思うので、そのブランチでこのバグを再現しようとはしていません。 ）私の理由は以下のとおりです。
• 現在のプロジェクトには、メインアプリのルート.babelrc （上記を参照）があります。 この構成は@babel/preset-envを使用し、ルート.browserslistrc （上記参照）を使用してポリフィルの使用法を決定します。 .storybook/.babelrcはアプリのメインラインブランチに存在しません。
• ストーリーブックは、内部の開発者向けドキュメントにのみ使用します。 組織は主にデフォルトのブラウザとしてChromeを使用しているため、ポリフィルは不要です。 この啓示は実際に最終的な解決に貢献しました。
• カスタムストーリーブックwebpack構成を使用していますが、フォント/画像に関するルールを追加するためだけです。 このストーリーブックの問題で概説されている理由により、 .js処理に関するコアルールを変更する試みを断念しました。
• 私は、静的ストーリーブックサイトを生成するときにのみこの問題を経験しています。 ローカル開発用に付属の開発サーバーを介して実行しても問題は発生しません。

早期修正の試み

問題を修正するための私の初期の試みのほとんどは、ルート.babelrc （上記参照）にオプションを設定して、（ build-storybookツールで実行される）babelと通信しようとすることを中心に展開しました。発生するトランスパイル。 他の人が提案したuseBuiltIns 、 sourceTypeなどの構成は成功しませんでした。 さらに、clean-npm-cache-remove-node-modules-and-package-lock-then-npm-installルート全体を試しましたが、役に立ちませんでした（ただし、_did_により、一部のdepsが少し変更されました）。

最終的解決

最初はカスタム.storybook/.babelrcを使用することを躊躇していましたが、オプションが不足していました。 私は以前にそのファイルを作成し、 extendsプロパティを介してルート.babelrcと調和して機能するように試み、壁にぶつかりましたが、もう一度試してみることにしました。

ルートbabel構成をストーリーブック固有の構成に移動するだけで、静的サイトのビルドを正常に完了できましたが、トランスパイルの失敗を示すランタイムエラーがいくつかありました（一部のインポートを再エクスポートすると、これらの値はundefined最終インポートが存在するファイル内の.storybook/.babelrcの@babel/preset-envプリセットを完全に削除しました。 万歳、問題は解決しました！ ただし、元の構成はアプリで保持する必要があったため、名前を.storybook/.babelrc-ciに変更し、元のルート構成を復元しました。 次に、CIパイプラインを更新して、ci configを確認し、名前を変更して、静的サイトのビルド前に-ciサフィックスを削除する必要がありましたが、それは簡単なことでした。

問題を推測する

このプロセスでは、パッケージとロックファイルを頻繁に検査しました。ストーリーブックv5.3.19とそのすべてのアドオンは、corejs v3.xxに依存していますが、既存の@babel/polyfillとその他のベイベルがわずかに含まれていることがわかりました。 depsはcorejsv2.xxに依存していました！ 少なくとも1つの問題は、v2の最小公分母を使用するためのアプリの解決策だと思います。 私が経験したエラーはes.array.iteratorようなモジュールを参照していたのに対し、v2はes6.array.iteratorようなモジュールを提供しているので、これは理にかなっています。 古いbabel / corejs構成をサポートすることを目的としている場合、ストーリーブックdepがどのように競合しているかはわかりませんが、そうであるようです。 また、/ all storybook-babel / installed babel / storybook-corejs / installed-corejsが既存の.babelrcどのように見つけて適用するかについても何かが必要です。 ルート設定をストーリーブック固有の設定に移動すると、魔法のように問題が解決する理由がわかりません。 多分パス？ 🤷‍♂️

結論

あなたがこのすべての爆風の後に立ち往生しているなら、おめでとう！ 😂

全体として、私はこの問題を回避するために飛び越えなければならなかったフープにわくわくしていませんが、おそらく私の状況はやや独特です。 また、前述のbabel / webpack / storybookのアップグレードがマージされた後、すべてを取り除くことができます。

とにかく、これが同じ問題に苦しんでいる少なくとも一人の人にとって興味深いものだったと思います。 そして、 @ shilmanと@ndelangenはこの問題の解決に投資しているように見えるので、先に進んでタグを付けます。 👋