Storybook: Storybook v5 rusak saat menggunakan core-js ^ 3.0

Buku cerita menggunakan core-js secara tidak benar. @babel/preset-env versi 7.4.1 ditingkatkan menjadi core-js@3 dan itu merusak aplikasi reaksi Buku Cerita saya saat menjalankan tes

client-api sepertinya harus memiliki core-js @ 2 sebagai dependensi karena inti yang dihasilkan memerlukannya

Meskipun dikatakan sudah diperbaiki dengan 5.0.4 dan 5.0.5, saya masih mendapatkan kesalahan ini.

Bagaimana memperbanyak:
Instal @storybook/cli dan paket init. Kemudian init buku cerita dengan 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 Itu bukan kesalahan, itu peringatan. Sudah diperbaiki dalam 5.1.0-alpha.16 dan saya akan merilis perbaikan ke latest setelah keluar selama beberapa hari jika tidak ada yang mengeluh.

Oke! Terima kasih!

Saya memutakhirkan versi buku cerita ke 5.0.6 dan itu memecahkan masalah ini.

@ jessy1092 Senang mendengarnya. Saya menutup ini untuk saat ini. Jika ada yang mengalami masalah ini lagi, saya akan buka kembali.

Halo,
Sepertinya tidak berhasil untuk saya, bahkan dengan buku cerita 5.1.0-alpha.18

Berikut repo yang dapat direproduksi: https://github.com/christophehurpeau/cra-rest-hooks-storybook

yarn install
yarn storybook

saya harap ini membantu

@christophehurpeau Adakah kesempatan Anda dapat mencoba 5.0.6 untuk saya? Membuka kembali ini. 😭

Saya masih menemukan masalah yang sama saat menggunakan core-js @ v3 di proyek utama saya. Solusinya adalah memastikan dalam konfigurasi webpack, bahwa core-js/modules diselesaikan ke versi yang dibundel dengan buku cerita

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

Solusi hacky tetapi harus cukup baik untuk saat ini.

@shilman juga mencoba 5.0.6, hasil yang sama (https://github.com/christophehurpeau/cra-rest-hooks-storybook/tree/storybook-5.0.6)

@artursvonda Saya tidak menggunakan core-js v3, dependensi menggunakannya. Saya tidak punya node_modules/@storybook/core/node_modules/core-js karena v2 adalah yang digunakan oleh react-scripts dan @ storybook / core, dihapuskan di node_modules. Hanya ketergantungan yang menggunakan core-js 3 yang tidak menemukan core-js

ah jadi ini berfungsi saat saya menghapus alias:

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

Wow. alias itu menakutkan. mengapa buku cerita menggunakannya?

cc @ndelangen

Saya mengalami masalah ini juga. Saya menggunakan firebase terbaru yang menambahkan dependensi ke core-js @ 3 baru-baru ini.
setelah mengupgrade firebase, buku cerita yang digunakan untuk menjalankan menghasilkan error berikut:

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

dapat mengkonfirmasi,

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

dalam crash cra2 dan sb init

Masalah yang sama bagi saya. Kembali ke firebase versi 4.12.1 bekerja tetapi sudah lebih dari setahun dan bukan solusi yang baik.

ah jadi ini berfungsi saat saya menghapus alias:

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

Juga menggunakan [email protected] dengan [email protected] dan menambahkan ini ke .storybook/webpack.config.js memecahkan masalah.

Saya baru saja melihat firebase mengupdate 5.10.0 dan juga mengupgrade buku cerita menjadi 5.0.10 , dan saya bisa menghapus alias "hack" di atas.

sayangnya memperbarui firebase dan storybook ke yang terbaru tidak memperbaiki masalah saya.
Saya harus berhenti menggunakan buku cerita untuk masalah ini.

@zjaml apakah Anda mencoba solusi @parkerholladay di atas?

@shilman tentang itu, saya tidak tahu di file mana saya harus melakukannya.

@zjaml Itu .storybook/webpack.config.js . Tolong beri tahu saya jika itu berhasil untuk Anda!

@shilman bekerja seperti itu! Terima kasih!

Saya menggunakan babel preset-env dan saya menghadapi masalah yang sama dengan buku cerita 5.0.10

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

Solusi alias hapus memperbaikinya untuk saya. 🙏 @christophehurpeau

Haruskah kita menghapus alias dari pratinjau webpack.config?

bahkan mungkin semua alias?

Masalah yang sama di sini, hapus alias jangan perbaiki masalah untuk saya :(

Masalah yang sama bagi saya. Menghapus alias tidak menyelesaikan masalah

PR ini akan membahas hal ini dan banyak masalah lainnya yang menurut saya:
https://github.com/storybooks/storybook/pull/6566

Ini mungkin merupakan perubahan besar yang merusak, jadi mungkin dikirimkan di V6, kami masih memperdebatkan ini.

Mungkin kita bisa meluangkan waktu untuk membagi PR itu menjadi beberapa PR sehingga kita bisa menggabungkan dan merilis beberapa hal lebih cepat.

Bantuan akan sangat dihargai!

Masalah yang sama di sini - masalah kami melanggar react-app-polyfill meskipun yang telah diperbarui untuk menggunakan core-js versi 3. Mengembalikannya ke versi 0.2.2 untuk saat ini.

mengonfirmasi perbaikan ini juga berhasil untuk saya, [email protected] dan [email protected]

menambahkan file ./storybook/webpack.config.js dengan yang di atas

~ maaf - @ storybook / [email protected] tampaknya tidak dirilis - apakah itu disengaja? ~

EDIT: Maaf - berakhir menemukan jawaban di edisi lain. https://github.com/storybooks/storybook/issues/5893

Solusi
Gunakan versi CLI / React native berikutnya untuk mendapatkan 5.1.0-alpha.x:

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

Menghapus alias tidak berhasil untuk saya. Namun, saya dapat mengatasinya dengan memindahkan file babel kami ke .storybook

Halo semuanya! Sepertinya tidak banyak yang terjadi dalam masalah ini belakangan ini. Jika masih ada pertanyaan, komentar, atau bug, silahkan lanjutkan pembahasannya. Sayangnya, kami tidak punya waktu untuk membahas setiap masalah. Kami selalu terbuka untuk kontribusi, jadi silakan kirim permintaan tarik jika Anda ingin membantu. Masalah yang tidak aktif akan ditutup setelah 30 hari. Terima kasih!

^ Sepengetahuan saya, ini masih menjadi masalah dan tidak boleh ditandai sebagai tidak aktif

@jdhayford AFAIK ini diperbaiki di 5.1, yang dijadwalkan untuk rilis dalam beberapa hari

@shil Itu bagus! Terima kasih dan terima kasih kepada kontributor 👍

Masalah ini masih terjadi tetapi dapat memperbaikinya menggunakan solusi @brycehill

Menghapus alias tidak berhasil untuk saya. Namun, saya dapat mengatasinya dengan memindahkan file babel kami ke .storybook

Saya masih menghadapi masalah yang sama. @ByDesignGit Bisakah Anda menjelaskan bagaimana Anda dapat memperbaikinya?

Dapat diperbaiki dengan menginstal npm i core-js -D terbaru secara manual.
Tidak baik menginstal dependensi secara manual. itu harus mengelola masalah seperti itu secara internal.

Menunggu perbaikan yang tepat.

Saya juga mengalami masalah yang sama. Namun, saya percaya sekarang kebalikan dari masalah asli di mana paket sebelumnya menginstal versi lama dari core-js (2.6.9) sebagai ketergantungan dan sekarang buku cerita membutuhkan core-js @ 3.
Perbaikan sementara menggunakan solusi

Saya masih menghadapi masalah yang sama. @ByDesignGit Bisakah Anda menjelaskan bagaimana Anda dapat memperbaikinya?

saya menyelesaikannya dengan memindahkan .babelrc saya ke .storybook

Masalah ini masih terjadi tetapi dapat memperbaikinya menggunakan solusi @brycehill

Menghapus alias tidak berhasil untuk saya. Namun, saya dapat mengatasinya dengan memindahkan file babel kami ke .storybook

Hal yang sama di sini:

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

Menghapus alias tidak berhasil untuk saya. Tapi saya menginstal npm i core-js -D seperti yang disarankan @ChandanPHAI , dan berhasil 👌

Menunggu perbaikan yang tepat juga.

Saya masih menghadapi masalah yang sama. @ByDesignGit Bisakah Anda menjelaskan bagaimana Anda dapat memperbaikinya?

saya menyelesaikannya dengan memindahkan .babelrc saya ke .storybook

Masalah ini masih terjadi tetapi dapat memperbaikinya menggunakan solusi @brycehill

Menghapus alias tidak berhasil untuk saya. Namun, saya dapat mengatasinya dengan memindahkan file babel kami ke .storybook

Berhasil! Saya menyalin .babelrc di .storybook

@ arvenz0210 @ByDesignGit bukankah itu berarti Anda sekarang harus menyimpan dua file .babelrc ? Sepertinya tidak diinginkan.

Meningkatkan proyek vue.js saya menjadi "@storybook/vue": "^5.1.1" memecahkan masalah alias core-js untuk saya. 👍

• tidak perlu memindahkan babel.config.js
• tidak perlu menambahkan / menghapus apa pun dari konfigurasi webpack saya (saya menggunakan https://github.com/storybookjs/vue-cli-plugin-storybook v0.6.1 sehingga konfigurasi webpack saya sebagian dihasilkan oleh vue-cli dengan sedikit hal yang tidak terkait yang saya tambahkan melalui vue.config.js yang digabung oleh vue-cli dengan konfigurasi webpack yang dibuat secara dinamis.)
• tidak perlu menambahkan / menghapus referensi apa pun ke core-js, alias, atau deps yang bergantung pada core-js, dll ...

Saya juga melihat ini pada proyek Angular, maka tidak ada file .babel. Tidak beruntung dengan instalasi core-js yang terpisah atau penghapusan alias.

//  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'
}

Semua revisi di 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",

Maaf, saya belum punya waktu untuk melakukan debug lebih jauh.

Menggunakan @storybook/react": "^5.1.1" dan masih mendapatkan masalah ini dengan npm install . Saya menduga @ChandanPHAI benar, saya memiliki core-js .

PR ini dilakukan hari ini harus memperbaiki ini, @shilman akan melakukan pengujian rilis baru ini segera: # 7051

Masih terjadi dengan "@storybook/react": "^5.1.3" - Menginstal core-js --dev memperbaiki masalah di pihak saya.

ada yang menghadapi masalah https://github.com/storybookjs/storybook/issues/7021 ??

Hura!! Saya baru saja merilis https://github.com/storybookjs/storybook/releases/tag/v5.1.4 berisi PR # 7016 yang mereferensikan masalah ini. Tingkatkan versi hari ini untuk mencobanya!

Menutup masalah ini. Harap buka kembali jika menurut Anda masih banyak yang harus dilakukan.

@shilman baru saja memperbarui, dan kesalahan yang sama ... :(

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

@shilman Saya memperbarui buku cerita dan tambahan ke versi terbaru.

Masih mendapatkan kesalahan yang terkait dengan core-js.

menginstal npm i core-js -D memperbaiki masalah secara lokal.

tanpa pustaka core-js itu tidak berfungsi.

Apakah Anda mengimpor babel-polyfill di mana pun dalam kode Anda? Jika ya, coba hapus itu?

Inilah cara saya memperbaiki cabang repro yang saya dapatkan:
https://github.com/umakantp/demo-repro/pull/1

Tolong kirimkan saya lebih banyak repro repo kepada saya melalui saluran mana pun, sehingga saya dapat memperbaiki masalah tersebut.

@ChandanPHAI @onikaV

@ndelangen hai, saya tidak punya babel-polyfill di folder saya. Saya tidak bisa menunjukkan lebih banyak. Ini adalah repo pribadi.
buku cerita dan semua tambahan telah diperbarui.

Hai, mengalami masalah yang sama dengan core-js bahkan di 5.1.4. Manuall menginstal core-js karena dependensi dev juga tidak berfungsi.

Saya sedang mengerjakan ini, rilis baru dalam 24 jam!

Yee-haw !! Saya baru saja merilis https://github.com/storybookjs/storybook/releases/tag/v5.1.5 berisi PR # 7086 yang mereferensikan masalah ini. Tingkatkan versi hari ini untuk mencobanya!

Menutup masalah ini. Harap buka kembali jika menurut Anda masih banyak yang harus dilakukan.

Saya masih mendapatkan kesalahan untuk hampir setiap komponen yang saya miliki, seperti berikut ini:

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

Saya tidak mengecualikan itu bisa jadi salah saya. Saya mengumpulkan cache benang, menghapus yarn.lock, menginstal versi terbaru dari setiap ketergantungan. Saya tidak menginstal core-js sebagai dependensi tetapi saya menggunakan babel dengan beberapa preset seperti @babel/preset-env . Saya memiliki konfigurasi webpack khusus:

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;
};

@filippoiano Saya memiliki kesalahan yang sama persis. Saya dapat mengonfirmasi bahwa file tersebut ada di jalur modul core-js dan juga babel preset telah mengaktifkan core-js 3, tetapi masih gagal. Apakah Anda bisa menyelesaikan masalah ini?

Edit:

Jika saya menghapus addon-storysource, berfungsi seperti yang diharapkan. Tidak yakin apa yang menyebabkan ini.

Edit 2:
Gali lebih dalam. Untuk beberapa alasan, storysource loader memerlukan semua file .js di dalamnya untuk muncul di panel addon, dan harus mengecualikan modul node di konfigurasi

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

Mungkin terkait dengan # 3626 # 6984

cc @ igor-dv @libetl ☝️

@ aga5tya Ya Anda mengalami masalah. Saya telah mengecualikan node_modules dan semuanya berfungsi dengan baik!

Saya harus:

• [x] perbarui semua dependensi @ storybook / *
• [x] tambahkan "corejs": 3 ke .babelrc saya
• [x] kehabisan yarn add corejs@3
• [x] tambahkan exclude: /node_modules/, ke webpack.config.js saya
• [x] hapus import 'babel-polyfill' dari app.js saya

babel polyfill tidak digunakan lagi dan harus diganti dengan core-js di mana pun

atau airbnb-browser-shims :-p

bagaimanapun juga, node_modules harus selalu dikecualikan dari transpilasi.

Saya mengalami kesalahan berikut:

KESALAHAN di ./.storybook/config.js
Modul tidak ditemukan: Kesalahan: Tidak dapat menemukan modul 'core-js / modules / web.dom.iterable'

Saya menggunakan storybook / vue 5.1.9.

@flowck harap instal core-js v3 ke root proyek Anda

Bisakah kita menemukan cara untuk menggunakan buku cerita tanpa menggunakan core-j sama sekali? Mengapa konsumen tidak bisa menyediakan shim mereka sendiri?

babel-polyfills adalah bagian dari perpustakaan yang harus saya gunakan. Bagaimana saya bisa menjalankan buku cerita dalam kasus ini?

Saya menjalankan yarn upgrade interactive --latest , meningkatkan semua dependensi yang terkait dengan buku cerita dan sekarang berfungsi! 🎉

FYI: Kesalahan ini hanya terjadi setelah saya menambahkan addon @storybook/addon-knobs .

@ chadlavi-casebook uhm, Anda bisa mencoba menambahkan plugin abaikan webpack?
https://webpack.js.org/plugins/ignore-plugin/

Memiliki masalah yang sama menjalankan @ storybook / vue 5.1.9. Menjalankan yarn why core-js ternyata ini:

=> 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

✅ Menambahkan core-js@^2.6.9 ke devDependencies menyelesaikannya untuk saya.

Pastikan untuk menghapus node_modules Anda pada awalnya.
rm -rf node_modules

Saya mengalami masalah ini setelah meningkatkan ke v5.1.9 dari v5.0.6 .

Masalah yang sama. Diperbaiki setelah penurunan dari v5.1.9 menjadi v5.0.6

@JamyGolden & @Exomnius Bisakah Anda berbagi lebih banyak tentang penyiapan Anda?

output dari yarn why core-js berguna, repo reproduksi bahkan lebih.

@ndelangen Saya telah meningkatkan ke 5.1.9 tanpa masalah sekarang, saya kira ketergantungan tambalan baru telah diinstal dan telah menyelesaikan masalah 🤷‍♀️

Sunting, harus menurunkan versi lagi, gagal dalam tes CI. Saya melakukan yarn why core-js untuk itu:

$ 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.

Anda membuatnya berfungsi secara lokal, tetapi CI masih memiliki kesalahan yang sama?

@ndelangen ya CI dan pengembang lain mengalami masalah (saya akan memperbarui dengan versi benang / simpul mereka ketika saya mendapatkannya), namun semuanya baik-baik saja di pihak saya (benang 1.15.2 , simpul 8.15.1 ), kami juga menggunakan lockfile. Di atas adalah yarn why core-js gagal dan ini milik saya:

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.

Contoh kesalahan yang sama yang ada di setiap pernyataan:

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

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

aha, jadi buku cerita berjalan dengan baik, tetapi tes masih menggunakan versi core-js yang lama!

Apa yang ada di dalam localMocksFile.js ? Mungkin yang perlu Anda lakukan hanyalah memperbarui 1 file itu.

@ndelangen kesalahan yang saya tempel sebelumnya terkait dengan pengambilan gambar yang berjalan (Yang hanya terjadi setelah memperbarui versi buku cerita). Kesalahan yang didapat dev lain saat menjalankan yarn storybook berisi banyak kesalahan serupa, tampaknya kesalahan pada setiap file:

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

Tidak yakin apakah ini info yang berguna, tetapi @babel/polyfill tidak disertakan dalam paket utama.json dalam proyek.

Saya mengalami kesalahan berikut:

KESALAHAN di ./.storybook/config.js
Modul tidak ditemukan: Kesalahan: Tidak dapat menemukan modul 'core-js / modules / web.dom.iterable'

Saya menggunakan storybook / vue 5.1.9.

Dipecahkan dengan menginstal 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"
  }

Ini adalah solusi daripada perbaikan, tetapi memutar kembali SEMUA paket Buku Cerita saya (termasuk addons) ke v 5.0.6 telah memperbaikinya. Tidak ada hal lain di utas ini yang membantu.

(Perintah untuk React + Yarn di bawah, tetapi dapat dengan mudah diterjemahkan ke NPM / Vue):

Pertama:

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

Diikuti oleh:

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

Saya melihat masalah samme ketika saya mencoba menjalankan buku cerita:
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

Ini terjadi setelah memperbarui ke node v12 menggunakan nvm.

Kami harus melakukan ini untuk memperbaiki masalah polyfill sehingga saya tidak dapat menurunkan versi node. Sebelum itu semuanya bekerja. Sayangnya saya tidak tahu versi node apa yang saya gunakan sebelumnya. Saya telah mencoba semuanya di utas ini, tetapi saya tidak ingin kembali ke 5.0.6., Karena alasan utama untuk menyiapkan buku cerita untuk proyek ini adalah menggunakan dokumen baru. Saya telah mendorong semuanya di sini: https://github.com/netliferesearch/netlife2019/tree/storybook_setup_stories

Sunting: Saya menurunkan node dan masih tidak berfungsi, seharusnya mencobanya sebelum memposting. Saya sedikit bingung dengan apa yang terjadi, saya akan terus mencari.

Menggunakan @storybook/vue 5.2.5 selain Nuxt.js v2.10.1 dan memiliki masalah yang sama: yarn storybook berfungsi, tetapi yarn build atau tugas terkait nuxt lainnya gagal. yarn why core-js menyediakan output berikut:

$ 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.

Jadi saya menggunakan pendekatan yang sama yang disediakan oleh @frebro , coba

$ yarn add -D [email protected]

dan 🎉: Saya mendapatkan lingkungan kerja: yarn storybook , yarn build dan semua tugas lainnya berfungsi kembali.

@rwam yarn add -D [email protected] berfungsi untuk saya di buku cerita saya 5.2.5 Proyek HTML terima kasih :)

Vue dengan @ vue / cli bermigrasi

tentang kesalahan:

jika 'core-js': '^3.*.*':

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

jika 'core-js': '^2.*.*':

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

tentang 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

deps saya bekerja:

"@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
jika Invalid Option: corejs is not a valid top-level option : -rm -rf node_modules .

Kesehatan untuk Anda dan orang yang Anda cintai;)

Saya menemukan solusi yang lebih kuat untuk membuat Storybook berfungsi di proyek Nuxt. Solusinya tergantung pada ketidakcocokan versi dari core-js. Nuxt menggunakan versi default 2 dan Storybook versi 3. Jadi untuk mengatasi masalah ini, saya harus mengikuti catatan ini dari @ nuxt / babel-preset-app :

Catatan: Karena core-js @ 2 dan core-js @ 3 keduanya didukung dari Babel 7.4.0, kami sarankan untuk langsung menambahkan core-js dan menyetel versinya melalui opsi corejs.

Saya mendapatkan lingkungan kerja lagi dengan Nuxt 2.11.0 menggunakan pembaruan ini di nuxt.config.js saya:

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 }
            }
          ]
        ]
      }
    }
  }
}

Saya menemukan solusi ini karena saya tidak dapat memperbarui nuxt ke stabil terbaru.

Saya menghadapi masalah yang sama ketika mencoba menambahkan buku cerita (5.3.18) ke gatsby v2 ketika di sewa satu komponen menggunakan kueri statis. Memindahkan .babelrc ke .storybook berfungsi seperti yang disarankan oleh @brycehill .

Saya menemukan solusi yang lebih kuat untuk membuat Storybook berfungsi di proyek Nuxt. Solusinya tergantung pada ketidakcocokan versi dari core-js. Nuxt menggunakan versi default 2 dan Storybook versi 3. Jadi untuk mengatasi masalah ini, saya harus mengikuti catatan ini dari @ nuxt / babel-preset-app :

Catatan: Karena core-js @ 2 dan core-js @ 3 keduanya didukung dari Babel 7.4.0, kami sarankan untuk langsung menambahkan core-js dan menyetel versinya melalui opsi corejs.

Saya mendapatkan lingkungan kerja lagi dengan Nuxt 2.11.0 menggunakan pembaruan ini di nuxt.config.js saya:

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 }
            }
          ]
        ]
      }
    }
  }
}

Saya menemukan solusi ini karena saya tidak dapat memperbarui nuxt ke stabil terbaru.

Luar biasa, berhasil untuk saya!

@masives Mengalami masalah yang sama dengan gatsby. Bisakah Anda memposting tautan ke komentar / .babelrc karena saya tidak dapat menemukannya dalam masalah ini.

Nvm. Masalah disebabkan oleh cerita yang berada di direktori halaman. Memecahkan masalah dengan memindahkan halaman cerita ke __stories__

Next.js 9.1.1 -> Next.js 9.4.4 membuat saya tersandung.

Membandingkan hasil npm list core-js mengungkapkan bahwa runtime babel dari core js hilang setelah memperbarui Next. Saya menginstal ulang paket yang hilang ini di dependensi dev dan LO dan lihatlah itu berhasil

cc @ndelangen

Masalah yang sama dengan versi 5.3.19 saat menangani migrasi dari core-js v2 ke v3

Masalah yang sama bagi saya. Seperti @denimamab, saya menggunakan versi 5.3.19

Perbaiki secara lokal dengan:
rm ./package-lock.json
rm -rf ./node_modules
npm install

Sekarang buku cerita npm run bekerja

Hanya ingin berbagi pengalaman saya dengan bug ini setelah menghabiskan satu hari untuk itu ...

Saya membaca banyak utas masalah GH, termasuk yang ini, saat memecahkan masalah. Saya mencoba beberapa perbaikan yang disarankan, dengan hanya satu yang menghasilkan kesuksesan yang "dapat diterima".

Referensi

Menempatkan semua ini di satu tempat sejak, cuz. 😅

{
  "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

Status dan Prasyarat Proyek

• saya memiliki perubahan yang luar biasa dan terpisah untuk memutakhirkan semua paket webpack / babel [tim saya] (babel adalah v7.xx dalam perubahan saya dan dalam perubahan terpisah), tetapi belum berhasil keluar dari pengujian karena pengujian ie11 kami infrastruktur. perubahan tersebut memperkenalkan corejs versi 3 sebagai ketergantungan dan useBuiltIns: 'usage' , dimana sebelumnya kami menggunakan impor manual @babel/polyfill dan default untuk useBuiltIns . Saya mengantisipasi perubahan ini segera digabungkan. ini adalah alasan utama saya dapat / tidak akan menyertakan corejs sebagai ketergantungan dalam perubahan saya saat ini, seperti yang disarankan oleh banyak orang lain (dan diverifikasi) sebagai perbaikan.
• saya punya _another_ perubahan yang luar biasa, berdasarkan cabang yang memperbarui paket webpack / babel, yang meningkatkan versi buku cerita kami dari v5.3.19 ke v6.xx terbaru saya belum mencoba untuk merepro bug ini di cabang itu karena saya berasumsi semuanya akan baik-baik saja ) alasan saya yang dijelaskan di bawah ini.
• proyek saat ini memiliki root .babelrc (terlihat di atas) untuk aplikasi utama. konfigurasi ini menggunakan @babel/preset-env dan menggunakan root .browserslistrc (terlihat di atas) untuk menentukan penggunaan polyfill. tidak ada .storybook/.babelrc hadir di cabang jalur utama aplikasi kita.
• kami menggunakan buku cerita untuk dokumentasi pengembang internal saja. karena org terutama menggunakan chrome sebagai browser default kami, polyfill tidak diperlukan. wahyu ini benar-benar berkontribusi pada solusi akhir.
• i _am_ menggunakan konfigurasi webpack buku cerita kustom, tetapi hanya untuk menambahkan aturan tambahan seputar font / gambar. saya mengabaikan upaya untuk mengubah aturan inti sekitar .js pemrosesan untuk alasan yang diuraikan dalam edisi buku cerita ini .
• SAYA HANYA MENGALAMI MASALAH INI SAAT MEMBUAT SITUS STORYBOOK. berjalan melalui dev-server yang disertakan untuk pengembangan lokal tidak menemui masalah.

Upaya Perbaikan Awal

Sebagian besar upaya awal saya untuk memperbaiki masalah berkisar pada mencoba mengatur opsi di root .babelrc (terlihat di atas) untuk mencoba dan berkomunikasi dengan babel (seperti yang dijalankan oleh alat build-storybook ) seperti yang saya inginkan transpilasi terjadi. Tidak ada konfigurasi useBuiltIns , sourceType , dll. Seperti yang disarankan oleh orang lain yang berhasil. Selain itu, saya mencoba seluruh rute clean-npm-cache-remove-node-modules-and-package-lock-then-npm-install, tetapi tidak berhasil (meskipun _did_ itu menyebabkan beberapa deps berubah sedikit).

Solusi akhir

Meskipun awalnya ragu untuk mencoba menggunakan kustom .storybook/.babelrc , saya kehabisan pilihan. Saya telah mencoba sebelumnya untuk membuat file itu dan membuatnya bekerja secara harmonis dengan root .babelrc melalui properti extends dan menabrak dinding, tetapi saya memutuskan untuk mencobanya lagi.

Pemindahan sederhana dari konfigurasi root babel ke konfigurasi khusus buku cerita memungkinkan pembuatan situs statis berhasil diselesaikan, tetapi masih ada beberapa kesalahan runtime yang menunjukkan kesalahan transpilasi (mengekspor ulang beberapa impor menghasilkan nilai tersebut menjadi undefined di file tempat impor final dijalankan). Saat itulah saya menyadari bahwa saya tidak memerlukan polyfill untuk buku cerita, jadi saya menghapus preset @babel/preset-env di .storybook/.babelrc sama sekali. HUZZAH, masalah terpecahkan! Namun, konfigurasi asli harus tetap ada untuk aplikasi, jadi saya mengganti nama menjadi .storybook/.babelrc-ci dan memulihkan konfigurasi root asli. Kemudian, saya harus memperbarui pipeline CI kami untuk memeriksa konfigurasi ci dan mengganti nama untuk memotong akhiran -ci sebelum situs statis dibangun, tapi itu sepele.

Menebak Masalah

Proses ini membuat saya sering memeriksa paket dan lockfile saya, dan saya menemukan bahwa, sementara storybook v5.3.19 dan semua addonnya memiliki ketergantungan pada corejs v3.xx, @babel/polyfill dan beberapa babel lainnya deps mengandalkan corejs v2.xx! Saya menduga bahwa setidaknya satu masalah adalah resolusi di aplikasi untuk menggunakan penyebut umum terendah dari v2. Ini masuk akal karena kesalahan yang saya alami merujuk pada modul seperti es.array.iterator sementara v2 menyediakan modul seperti es6.array.iterator . Saya tidak yakin bagaimana dep buku cerita bertentangan jika bertujuan untuk mendukung konfigurasi babel / corejs yang lebih lama, tetapi tampaknya itulah masalahnya. Juga, harus ada sesuatu tentang bagaimana / semua buku cerita-babel / babel yang diinstal / storybook-corejs / terinstal-corejs menemukan dan menerapkan .babelrc . Saya bingung mengapa memindahkan konfigurasi root ke konfigurasi khusus buku cerita secara ajaib memecahkan masalah. Mungkin menyedihkan? 🤷‍♂️

Kesimpulan

Jika Anda tetap bertahan setelah semua obrolan ini, selamat! 😂

Secara keseluruhan, saya tidak senang dengan rintangan yang harus saya lewati untuk mengatasi masalah ini, tetapi mungkin situasi saya agak unik. Juga, saya akan dapat merobek semuanya setelah peningkatan babel / webpack / buku cerita saya yang disebutkan di atas digabungkan.

Bagaimanapun, saya harap ini menarik bagi setidaknya satu orang yang menderita masalah yang sama. Dan saya akan melanjutkan dengan menandai @shilman dan @ndelangen karena mereka tampaknya berinvestasi dalam memecahkan masalah ini. 👋