Storybook: يتعطل Storybook v5 عند استخدام core-js ^ 3.0

يستخدم Storybook Core-js بشكل غير صحيح بطريقة ما. تمت ترقية الإصدار 7.4.1 من @babel/preset-env إلى core-js@3 وكسر تطبيق Storybook للتفاعل عند تشغيل الاختبارات

يبدو أن client-api يجب أن يحتوي على core-js @ 2 باعتباره تبعية لأن النواة المولدة تتطلب ذلك

على الرغم من أنه تم إصلاحه بـ 5.0.4 و 5.0.5 ، ما زلت أتلقى هذا الخطأ.

كيف تتكاثر:
قم بتثبيت @storybook/cli وحزمة init. ثم init Storybook مع 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 بعد أن يخرج لبضعة أيام إذا لم يشتك أحد.

فهمتك! شكر!

لقد قمت بترقية إصدار Storybook إلى 5.0.6 وتم حل هذه المشكلة.

@ jessy1092 عظيم أن نسمع ذلك. أنا أغلق هذا الآن. إذا واجه أي شخص هذه المشكلة مرة أخرى ، فسأعيد فتحه.

مرحبا،
لا يبدو أنه يعمل معي ، حتى مع القصص القصيرة 5.1.0-alpha.18

هنا الريبو القابل للاستنساخ: https://github.com/christophehurpeau/cra-rest-hooks-storybook

yarn install
yarn storybook

آمل أن يساعد هذا

christophehurpeau هل هناك فرصة لتجربة 5.0.6 أجلي؟ إعادة فتح هذا. 😭

ما زلت أواجه نفس المشكلة أثناء استخدام core-js @ v3 في مشروعي الرئيسي. كان الحل هو التأكد في تهيئة webpack ، أن core-js/modules تم حله إلى الإصدار المرفق مع Storybook

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

حل مخترق ولكن يجب أن يكون جيدًا بما يكفي في الوقت الحالي.

shilman حاول أيضًا 5.0.6 ، نفس النتيجة (https://github.com/christophehurpeau/cra-rest-hooks-storybook/tree/storybook-5.0.6)

artursvonda أنا لا أستخدم core-js v3 ، تستخدمه التبعية. ليس لدي node_modules/@storybook/core/node_modules/core-js لأن الإصدار 2 هو الذي يستخدمه كل من نصوص التفاعل و @ Storybook / core ، وقد تم استبعاده في node_modules. فقط الاعتماد باستخدام core-js 3 لا يجد core-js

آه ، لذا فهو يعمل عندما أحذف الاسم المستعار:

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

نجاح باهر. الأسماء المستعارة مخيفة. لماذا يستخدمهم كتاب القصص؟

ccndelangen

أواجه هذه المشكلة أيضًا. أنا أستخدم أحدث إصدار من Firebase الذي أضاف تبعية لـ core-js @ 3 مؤخرًا.
بعد ترقية Firebase ، ينتج عن القصة المصورة المستخدمة للتشغيل الأخطاء التالية:

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

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

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

يمكن تأكيد،

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

في أعطال جديدة من cra2 و sb init

نفس المشكلة بالنسبة لي. العودة إلى firebase الإصدار 4.12.1 نجح لكن عمره أكثر من عام وليس حلاً جيدًا.

آه ، لذا فهو يعمل عندما أحذف الاسم المستعار:

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

أيضًا استخدام [email protected] مع [email protected] وإضافة هذا إلى .storybook/webpack.config.js حل المشكلة.

لقد رأيت للتو أن Firebase لديه تحديث إلى 5.10.0 وقمت أيضًا بترقية Storybook إلى 5.0.10 ، وتمكنت من إزالة الاسم المستعار "hack" أعلاه.

للأسف ، لم يؤد تحديث Firebase و Storybook إلى الأحدث إلى حل مشكلتي.
لا بد لي من التوقف عن استخدام القصص القصيرة لهذه القضية.

zjaml هل جربت حلولparkerholladay أعلاه؟

shilman حول ذلك ، لا أعرف في أي ملف يجب أن أفعل ذلك.

zjaml هذا .storybook/webpack.config.js . واسمحوا لي أن أعرف إذا كان يعمل للكم!

@ shilman يعمل بهذه الطريقة! شكر!

أنا أستخدم برنامج babel preset-env وواجهت نفس المشكلة مع Storybook 5.0.10

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

تم إصلاح حل الاسم المستعار للحذف بالنسبة لي. @ كريستوفيهوربو

هل يجب حذف الاسم المستعار من webpack.config للمعاينة؟

ربما كل الأسماء المستعارة؟

نفس المشكلة هنا ، إزالة الاسم المستعار لا تحل المشكلة بالنسبة لي :(

نفس المشكلة بالنسبة لي. لا تؤدي إزالة الاسم المستعار إلى حل المشكلة

هذا العلاقات العامة سوف يعالج هذا والعديد من القضايا الأخرى التي أعتقد:
https://github.com/storybooks/storybook/pull/6566

من المحتمل أن يكون تغييرًا كبيرًا ، لذلك قد يتم شحنه في V6 ، ما زلنا نناقش هذا الأمر.

ربما يمكننا تخصيص بعض الوقت لتقسيم تلك العلاقات العامة إلى عدة علاقات عامة حتى نتمكن من دمج وإصدار بعض الأشياء بشكل أسرع.

سوف نقدر المساعدة كثيرا!

نفس المشكلة هنا - لدينا كسر مع 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 الأصلي للحصول على 5.1.0-alpha.x:

npx -p @ storybook / cli @ next sb init - النوع التفاعلي

لم ينجح حذف الاسم المستعار بالنسبة لي. ومع ذلك ، تمكنت من حل هذا عن طريق نقل ملف babel الخاص بنا إلى .storybook

مرحباً بالجميع! يبدو أنه لم يكن هناك الكثير مما يحدث في هذه المشكلة مؤخرًا. إذا كانت لا تزال هناك أسئلة أو تعليقات أو أخطاء ، فلا تتردد في مواصلة المناقشة. للأسف ، ليس لدينا الوقت لحل كل مشكلة. نحن دائمًا منفتحون على المساهمات ، لذا يرجى إرسال طلب سحب لنا إذا كنت ترغب في المساعدة. سيتم إغلاق المشكلات غير النشطة بعد 30 يومًا. شكر!

^ على حد علمي ، لا تزال هذه مشكلة كبيرة ويجب عدم تمييزها بأنها غير نشطة

jdhayford AFAIK هذا ثابت في 5.1 ، والذي من المقرر إطلاقه في غضون أيام قليلة

@ shilman هذا رائع! شكراً لكم وشكراً للمساهمين

لا تزال هذه المشكلة تحدث ولكن تمكّن من إصلاحها باستخدام حل brycehill

لم ينجح حذف الاسم المستعار بالنسبة لي. ومع ذلك ، تمكنت من حل هذا عن طريق نقل ملف babel الخاص بنا إلى .storybook

ما زلت أواجه نفس المشكلة. ByDesignGit هل يمكنك أن توضح كيف تمكنت من إصلاحه؟

كان قادرًا على الإصلاح عن طريق تثبيت أحدث npm i core-js -D يدويًا.
ليس من الجيد تثبيت تبعية يدويًا. يجب أن تدير بشكل صحيح مثل هذه القضايا داخليا.

في انتظار الإصلاح المناسب.

أنا أيضا واجهت نفس المشكلة. ومع ذلك ، أعتقد أنه الآن عكس الإصدار الأصلي حيث قامت الحزمة السابقة بتثبيت إصدار أقدم من core-js (2.6.9) كإعتمادية ، والآن يتطلب كتاب القصة الأساسي Core-js @ 3.
تم الإصلاح المؤقت باستخدام حل

ما زلت أواجه نفس المشكلة. 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

لم ينجح حذف الاسم المستعار بالنسبة لي. لكنني قمت بتثبيت npm i core-js -D كما اقترح ChandanPHAI ، وعمل

في انتظار الإصلاح المناسب أيضًا.

ما زلت أواجه نفس المشكلة. ByDesignGit هل يمكنك أن توضح كيف تمكنت من إصلاحه؟

لقد قمت بحلها عن طريق نقل .babelrc إلى .storybook

لا تزال هذه المشكلة تحدث ولكن تمكّن من إصلاحها باستخدام حل brycehill

لم ينجح حذف الاسم المستعار بالنسبة لي. ومع ذلك ، تمكنت من حل هذا عن طريق نقل ملف babel الخاص بنا إلى .storybook

انها عملت! لقد قمت بنسخ .babelrc في .storybook

@ arvenz0210ByDesignGit ألا يعني هذا أنه يتعين عليك الآن الاحتفاظ بملفين .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 ، لذلك يتم إنشاء حزمة الويب الخاصة بي جزئيًا بواسطة vue-cli مع القليل من الأشياء غير ذات الصلة التي أضفتها عبر vue.config.js حيث يتم دمج vue-cli مع تهيئة webpack التي تم إنشاؤها ديناميكيًا.)
• لم تكن بحاجة إلى إضافة / إزالة أي إشارات إلى core-js أو الأسماء المستعارة أو deps التي تعتمد على core-js ، إلخ ...

أرى هذا أيضًا في مشروع 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 الحزمة

يجب أن يتم إصلاح هذا العلاقات العامة اليوم ، وسوف يقوم shilman بإجراء اختبار إصدار جديد قريبًا: # 7051

لا يزال يحدث مع "@storybook/react": "^5.1.3" - أدى تثبيت core-js --dev إصلاح المشكلة من جانبي.

أي شخص يواجه مشكلة https://github.com/storybookjs/storybook/issues/7021 ؟؟

يبي !! لقد أصدرت للتو https://github.com/storybookjs/storybook/releases/tag/v5.1.4 يحتوي على PR # 7016 يشير إلى هذه المشكلة. قم بالترقية اليوم لتجربتها!

إغلاق هذه القضية. الرجاء إعادة الفتح إذا كنت تعتقد أنه لا يزال هناك المزيد لتفعله.

shilman تم تحديثه للتو ، ونفس الأخطاء ... :(

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

shilman لقد قمت بتحديث

لا يزال يتم الحصول على الأخطاء المتعلقة بـ core-js.

تثبيت npm i core-js -D إصلاح المشكلة محليًا.

بدون مكتبة core-js لا تعمل.

هل تستورد babel-polyfill في أي مكان في شفرتك؟ إذا كان الأمر كذلك ، فحاول إزالة ذلك؟

إليك كيفية إصلاح فرع repro الذي حصلت عليه:
https://github.com/umakantp/demo-repro/pull/1

يرجى إرسال المزيد من repro لي عبر أي قناة ، حتى أتمكن من حل المشكلة.

تضمين التغريدة

ndelangen مرحبًا ، ليس لديّ babel-polyfill في مجلدي . لا أستطيع أن أريك أكثر. إنه ريبو خاص.
تم تحديث كتاب القصص وجميع الإضافات.

مرحبًا ، أواجه نفس المشكلة مع core-js حتى على 5.1.4. Manuall تثبيت core-js لأن تبعية dev لم تنجح أيضًا.

أنا أعمل على هذا الإصدار الجديد في غضون 24 ساعة!

يي-هاو !! لقد أصدرت للتو https://github.com/storybookjs/storybook/releases/tag/v5.1.5 الذي يحتوي على PR # 7086 الذي يشير إلى هذه المشكلة. قم بالترقية اليوم لتجربتها!

إغلاق هذه القضية. الرجاء إعادة الفتح إذا كنت تعتقد أنه لا يزال هناك المزيد لتفعله.

ما زلت أتلقى أخطاء لكل مكون لدي تقريبًا ، مثل ما يلي:

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

أنا لا أستبعد أنه يمكن أن يكون خطأي. لقد قمت بتشكيل ذاكرة التخزين المؤقت للغزل ، وحذفت yarn.lock ، وقمت بتثبيت أحدث إصدار من كل تبعية. ليس لديّ Core-js مثبتًا كتبعية لكنني أستخدم babel مع بعض الإعدادات المسبقة مثل @babel/preset-env . لدي تكوين حزمة ويب مخصص:

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:
حفر أعمق. لسبب ما ، يحتاج مُحمل مصدر القصة إلى أن تكون جميع ملفات .js بداخله لتظهر في اللوحة الإضافية ، وكان عليه استبعاد وحدات العقدة في التكوين

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

يحتمل أن تكون مرتبطة بـ # 3626 # 6984

cc @ igor-dv libetl ☝️

@ aga5tya نعم لقد

اضطررت:

• [x] تحديث جميع التبعيات @ storybook / *
• [x] أضف "corejs": 3 إلى .babelrc الخاص بي
• [x] قم بتشغيل yarn add corejs@3
• [x] أضف exclude: /node_modules/, إلى webpack.config.js الخاص بي
• [x] إزالة import 'babel-polyfill' من app.js

تم إهمال برنامج babel polyfill ويجب استبداله بـ core-js في كل مكان

or airbnb-browser-shims :-p

في كلتا الحالتين ، يجب دائمًا استبعاد node_modules من النتح.

أواجه الخطأ التالي:

خطأ في ./.storybook/config.js
الوحدة غير موجودة: خطأ: لا يمكن العثور على الوحدة النمطية "core-js / modules / web.dom.iterable"

أنا أستخدم Storybook / vue 5.1.9.

flowck يرجى تثبيت core-js v3 في جذر مشروعك

هل يمكننا إيجاد طريقة لاستخدام القصص المصورة دون استخدام أي Core-js على الإطلاق؟ لماذا لا يستطيع المستهلكون توفير الحشوات الخاصة بهم؟

babel-polyfills هي قسم من مكتبة لا بد لي من استخدامها. كيف يمكنني تشغيل القصص القصيرة في هذه الحالة؟

قمت بتشغيل yarn upgrade interactive --latest ، وقمت بترقية جميع التبعيات المتعلقة بقصص القصص المصورة وهي تعمل الآن! 🎉

لمعلوماتك: حدث هذا الخطأ فقط بعد أن أضفت الملحق @storybook/addon-knobs .

@ chadlavi-casebook uhm ، يمكنك محاولة إضافة webpack تجاهل البرنامج المساعد على ما أعتقد؟
https://webpack.js.org/plugins/ignore-plugin/

واجهت نفس المشكلة عند تشغيل @ storybook / vue 5.1.9. أدى تشغيل yarn why core-js إلى ما يلي:

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

أدت إضافة core-js@^2.6.9 إلى devDependencies إلى حل المشكلة بالنسبة لي.

تأكد من حذف node_modules في البداية.
rm -rf node_modules

لدي هذه المشكلة بعد الترقية إلى v5.1.9 من v5.0.6 .

المشكلة نفسها. تم الإصلاح بعد الرجوع إلى إصدار سابق من 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 نعم ومطور آخر مشكلات (سأقوم بالتحديث بإصدار الغزل / العقدة عندما أحصل عليه) ، ولكن الأمور على ما يرام من جانبي (غزل 1.15.2 ، عقدة 8.15.1 ) ، نحن نستخدم ملف القفل أيضًا. ما ورد أعلاه كان الفاشل yarn why core-js وهذا ملكي:

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

مثال على نفس الخطأ الموجود في كل تأكيد:

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

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

آها ، لذا فإن القصص القصيرة تعمل بشكل جيد ، لكن الاختبار لا يزال يستخدم إصدارًا قديمًا من Core-js!

ماذا يوجد بداخل localMocksFile.js ؟ من المحتمل أن كل ما عليك فعله هو تحديث هذا الملف الأول.

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 في الحزمة الأساسية.json في المشروع.

أواجه الخطأ التالي:

خطأ في ./.storybook/config.js
الوحدة غير موجودة: خطأ: لا يمكن العثور على الوحدة النمطية "core-js / modules / web.dom.iterable"

أنا أستخدم Storybook / vue 5.1.9.

تم حلها عن طريق تثبيت https://www.npmjs.com/package/babel-loader

package.json

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

هذا حل بديل وليس إصلاحًا ، ولكن التراجع عن جميع حزم Storybook الخاصة بي (بما في ذلك الإضافات) إلى الإصدار 5.0.6 قد أصلح هذا. لا شيء آخر في هذا الموضوع ساعد.

(أوامر React + Yarn أدناه ، ولكن يمكن ترجمتها بسهولة إلى NPM / Vue):

أولاً:

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

تليها:

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

أرى مشكلة samme عندما أحاول تشغيل القصص القصيرة:
ERROR in ./src/lib/helpers.js Module not found: Error: Cannot find module 'core-js/modules/web.dom.iterable' @ ./src/lib/helpers.js 16:0-43 @ ./src/components/Person.js @ ./src/components/Person.stories.js @ ./src sync \.stories\.js$ @ ./.storybook/config.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

حدث هذا بعد التحديث إلى العقدة v12 باستخدام nvm.

كان علينا القيام بذلك لإصلاح مشكلة polyfill حتى لا يمكنني الرجوع إلى إصدار أقدم من العقدة. قبل ذلك كان كل شيء يعمل. لسوء الحظ ، لا أعرف ما هو إصدار العقدة الذي كنت أستخدمه قبل ذلك. لقد جربت كل شيء في هذا الموضوع ، لكنني لا أريد الرجوع إلى الإصدار 5.0.6. ، لأن أحد الأسباب الرئيسية لإعداد كتاب القصص لهذا المشروع هو استخدام المستندات الجديدة. لقد دفعت كل شيء هنا: https://github.com/netliferesearch/netlife2019/tree/storybook_setup_stories

تحرير: لقد قمت بإرجاع العقدة إلى إصدار سابق وما زالت لا تعمل ، وكان يجب أن أحاول ذلك قبل النشر. أنا في حيرة من أمر ما يحدث ، سأستمر في البحث.

استخدام @storybook/vue 5.2.5 إلى جانب Nuxt.js v2.10.1 وكان له نفس المشكلة: yarn storybook يعمل ، ولكن فشل yarn build أو أي مهمة أخرى متعلقة بـ nuxt. yarn why core-js الناتج التالي:

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

لذلك أستخدم نفس الأسلوب المقدم من frebro ، حاول

$ yarn add -D [email protected]

و 🎉: أحصل على بيئة عمل: yarn storybook ، yarn build وجميع المهام الأخرى تعمل مرة أخرى.

rwam yarn add -D [email protected] يعمل معي في كتابي القصصي 5.2.5 مشروع HTML thx dude :)

Vue مع ترحيل @ vue / cli

عن الخطأ:

إذا كان 'core-js': '^3.*.*':

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

إذا كان 'core-js': '^2.*.*':

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

حول الأقسام:

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

أقسام عملي:

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

https://cli.vuejs.org/migrating-from-v3/#migrating -from-v3
إذا كان Invalid Option: corejs is not a valid top-level option : -rm -rf node_modules .

الصحة لك ولأحبائك ؛)

لقد وجدت حلاً أكثر قوة لجعل Storybook يعمل في مشروع Nuxt. يعتمد الحل على عدم تطابق إصدار core-js. يستخدم Nuxt للإصدار الافتراضي 2 والإصدار 3. من Storybook. لذا لحل المشكلة ، يجب أن أتبع هذه الملاحظة من تطبيق @ nuxt / babel-preset :

ملاحظة: نظرًا لأن core-js @ 2 و core-js @ 3 مدعومان من Babel 7.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 إلى أحدث إصدار ثابت.

لقد واجهت نفس المشكلة عند محاولة إضافة القصص القصيرة (5.3.18) إلى gatsby v2 عندما كان أحد المكونات يستخدم استعلامات ثابتة عند الاستئجار. تم نقل .babelrc إلى .storybook وفقًا لاقتراح brycehill .

لقد وجدت حلاً أكثر قوة لجعل Storybook يعمل في مشروع Nuxt. يعتمد الحل على عدم تطابق إصدار core-js. يستخدم Nuxt للإصدار الافتراضي 2 والإصدار 3. من Storybook. لذا لحل المشكلة ، يجب أن أتبع هذه الملاحظة من تطبيق @ nuxt / babel-preset :

ملاحظة: نظرًا لأن core-js @ 2 و core-js @ 3 مدعومان من Babel 7.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 إلى أحدث إصدار ثابت.

رائع ، عملت معي!

masives يعمل في نفس المشكلة مع غاتسبي. هل يمكنك نشر رابط للتعليق / .babelrc حيث لا يمكنني العثور عليها في هذه المشكلة.

نيفم. كانت المشكلات ناتجة عن القصص الموجودة في دليل الصفحات. تم حل المشكلة عن طريق نقل قصص الصفحات إلى __قصص__

Next.js 9.1.1 -> Next.js 9.4.4 أوقفني.

كشفت مقارنة نتائج npm list core-js أن وقت تشغيل babel لـ core js كان مفقودًا بعد تحديث Next. لقد أعدت تثبيت هذه الحزمة المفقودة في تبعيات dev و LO وها هي تعمل

ccndelangen

نفس المشكلة مع الإصدار 5.3.19 أثناء التعامل مع الترحيل من core-js v2 إلى v3

نفس المشكلة بالنسبة لي. مثل denimamab أنا أستخدم الإصدار 5.3.19

تم إصلاحه محليًا بـ:
rm ./package-lock.json
rm -rf ./node_modules
تثبيت npm

يعمل الآن npm تشغيل القصص القصيرة

أردت فقط مشاركة تجربتي مع هذا الخطأ بعد أن أمضيت يومًا فيه ...

قرأت من خلال العديد من سلاسل رسائل GH ، بما في ذلك هذا ، عند استكشاف المشكلة وإصلاحها. لقد جربت عددًا قليلاً من الإصلاحات المقترحة ، وأدى واحد فقط إلى نجاح "مقبول".

مرجع

وضع كل هذا في مكان واحد منذ ذلك الحين ، لأن. 😅

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

last 2 versions
> 1%
IE >= 11

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

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

حالة المشروع والمتطلبات الأساسية

• لدي تغيير رائع ومنفصل لترقية جميع حزم webpack / babel [فريقي] (babel هي الإصدار v7.xx في التغيير الخاص بي وفي التغيير المنفصل) ، لكنها لم تخرج من الاختبار حتى الآن بسبب اختبار ie11 الخاص بنا بنية تحتية. يقدم التغيير الإصدار 3 من corejs باعتباره تبعية و useBuiltIns: 'usage' ، حيث كنا في السابق نستخدم استيرادًا يدويًا @babel/polyfill والافتراضي لـ useBuiltIns . أتوقع أن يتم دمج هذا التغيير قريبًا. هذا هو السبب الرئيسي الذي يجعلني لا أستطيع / لن أدرج Corejs كتبعية في تغييري الحالي ، كما اقترح العديد من الآخرين (وتم التحقق منهم) كإصلاح.
• لدي تغيير آخر رائع ، استنادًا إلى الفرع الذي يقوم بتحديث حزم webpack / babel ، والتي تعمل على ترقية إصدار Storybook الخاص بنا من v5.3.19 إلى الإصدار الأحدث v6.xx. ) السبب الذي من أجله موضح أدناه.
• المشروع الحالي له جذر .babelrc (كما هو موضح أعلاه) للتطبيق الرئيسي. يستخدم هذا التكوين @babel/preset-env ويستخدم الجذر .browserslistrc (كما هو موضح أعلاه) لتحديد استخدام polyfill. لا يوجد .storybook/.babelrc موجود في الفرع الرئيسي لتطبيقنا.
• نحن نستخدم كتاب القصص لتوثيق المطورين الداخليين فقط. نظرًا لأن المؤسسة تستخدم الكروم بشكل أساسي كمتصفحنا الافتراضي ، فإن polyfill ليس ضروريًا. هذا الوحي ساهم بالفعل في الحل النهائي.
• أنا _am_ باستخدام تكوين حزمة ويب مخصصة لقصص Storybook ، ولكن فقط لإضافة قواعد إضافية حول الخطوط / الصور. لقد تخلت عن محاولة تعديل القواعد الأساسية حول معالجة .js للأسباب الموضحة في قضية القصص المصورة هذه .
• أنا فقط أختبر هذه المشكلة عند إنشاء موقع StATIC STORYBOOK. التشغيل عبر خادم التطوير المضمن للتنمية المحلية لا يواجه أي مشاكل.

محاولات الإصلاح المبكر

دارت معظم محاولاتي المبكرة لإصلاح المشكلة حول محاولة تعيين الخيارات في الجذر .babelrc (كما هو موضح أعلاه) لمحاولة التواصل مع Babel (مثل تشغيل الأداة build-storybook ) كيف أريد حدوث النتح. لم ينجح أي تكوين useBuiltIns ، sourceType ، وما إلى ذلك كما اقترحه الآخرون. بالإضافة إلى ذلك ، جربت مسار clean-npm-cache-remove-node-modules-and-package-lock-then-npm-install بالكامل ، دون جدوى (على الرغم من أن هذا _ تسبب_ في تغيير بعض الأقسام قليلاً).

حل نهائي

بينما كنت مترددًا في البداية في محاولة استخدام .storybook/.babelrc مخصص ، كنت تنفد من الخيارات. لقد حاولت سابقًا إنشاء هذا الملف وجعله يعمل بشكل متناغم مع الجذر .babelrc عبر خاصية extends وصدمت الحائط ، لكنني قررت منحه مرة أخرى.

سمحت نقلة بسيطة لتكوين جذر بابل إلى التكوين الخاص بكتاب القصة بإكمال بناء الموقع الثابت بنجاح ، ولكن لا تزال هناك بعض أخطاء وقت التشغيل التي تشير إلى النقل الخاطئ (أدت إعادة تصدير بعض الواردات إلى أن تكون هذه القيم undefined في الملف الذي يتم فيه بث عمليات الاستيراد النهائية). في هذا الوقت تقريبًا ، أدركت أنني لست بحاجة إلى أي polyfills لكتاب القصص ، لذلك أزلت الإعداد المسبق @babel/preset-env في .storybook/.babelrc تمامًا. هزة ، حُلت المشكلة! ومع ذلك ، يلزم استمرار التكوين الأصلي للتطبيق ، لذلك قمت بإعادة التسمية إلى .storybook/.babelrc-ci واستعدت تكوين الجذر الأصلي. بعد ذلك ، اضطررت إلى تحديث خط أنابيب CI الخاص بنا للتحقق من تكوين ci وإعادة تسميته لقطع اللاحقة -ci قبل إنشاء الموقع الثابت ، لكن هذا كان تافهًا.

التخمين في المشكلة (المشاكل)

دفعتني هذه العملية إلى فحص الطرود الخاصة بي وملف القفل بشكل متكرر ، واكتشفت أنه في حين أن Storybook v5.3.19 وجميع الملحقات الخاصة به تعتمد على corejs v3.xx ، و @babel/polyfill الحالي وقليل من babel الأخرى اعتمدت deps على corejs v2.xx! أظن أن هناك مشكلة واحدة على الأقل تتمثل في الحل في التطبيق لاستخدام القاسم المشترك الأصغر لـ v2. كان هذا منطقيًا نظرًا لأن الأخطاء التي كنت أواجهها كانت تشير إلى وحدات مثل es.array.iterator بينما يوفر الإصدار 2 وحدات مثل es6.array.iterator . لست متأكدًا من كيفية تعارض قسم القصص القصيرة إذا كان يهدف إلى دعم تكوينات babel / corejs الأقدم ، ولكن يبدو أن هذا هو الحال. أيضًا ، يجب أن يكون هناك شيء ما حول كيفية عثور إما / all storybook-babel / install babel / storybook-corejs / install-corejs على وتطبيق .babelrc . إنني في حيرة من أمر لماذا يؤدي نقل التكوين الجذر إلى تكوين خاص بكتاب القصة إلى حل المشكلة بطريقة سحرية. ربما المسار؟ 🤷‍♂️

استنتاج

إذا كنت قد علقت بعد كل هذا الثرثرة ، تهانينا! 😂

بشكل عام ، لست سعيدًا بالأطواق التي اضطررت للقفز فيها للتغلب على هذه المشكلة ، لكن ربما يكون وضعي فريدًا إلى حد ما. أيضًا ، سأكون قادرًا على نسخ كل شيء بعد دمج ترقيات babel / webpack / storybook المذكورة أعلاه.

على أي حال ، آمل أن يكون هذا مثيرًا للاهتمام لشخص واحد على الأقل يعاني من نفس المشكلة. وسأمضي قدمًا shilman و ndelangen لأنهما يبدوان