Storybook: Core-js ^ 3.0 का उपयोग करते समय स्टोरीबुक v5 टूट जाता है

स्टोरीबुक किसी भी तरह से गलत तरीके से कोर-जेएस का उपयोग कर रहा है। @babel/preset-env संस्करण 7.4.1 core-js@3 अपग्रेड किया गया और इसने परीक्षण चलाते समय मेरी स्टोरीबुक प्रतिक्रिया ऐप को तोड़ दिया

क्लाइंट-एपी को ऐसा लगता है कि यह एक निर्भरता के रूप में कोर-जेएस @ 2 होना चाहिए क्योंकि उत्पन्न कोर को इसकी आवश्यकता होती है

यद्यपि यह कहता है कि यह 5.0.4 और 5.0.5 के साथ तय है, फिर भी मुझे यह त्रुटि मिलती है।

कैसे पुन: पेश करें:
@storybook/cli और init पैकेज स्थापित करें। फिर npx -p @storybook/cli sb init --type react साथ init स्टोरीबुक।

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

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

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

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

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

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

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


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

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

added 1160 packages from 900 contributors in 23.386s

 • Installing dependencies. ✓

To run your storybook, type:

   npm run storybook

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

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

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

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

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

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

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

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

@lumio यह एक त्रुटि नहीं है, यह एक चेतावनी है। यह 5.1.0-alpha.16 में तय किया गया है और कुछ दिनों के लिए बाहर रहने के बाद अगर किसी को कोई शिकायत नहीं है, तो मैं latest को फ़िक्सेस जारी कर दूंगा।

समझ गया! धन्यवाद!

मैं स्टोरीबुक संस्करण को 5.0.6 में अपग्रेड करता हूं और इसने इस समस्या को हल किया।

@ jessy1092 यह सुनकर बहुत अच्छा लगा। मैं इसे अभी के लिए बंद कर रहा हूँ। अगर कोई फिर से इस समस्या में भागता है तो मैं फिर से खोलूंगा।

नमस्ते,
यह मेरे लिए काम करने के लिए नहीं लगता है, यहां तक ​​कि स्टोरीबुक 5.1.0-अल्फा.18 के साथ भी

यहाँ एक प्रतिलिपि प्रस्तुत करने योग्य रेपो: https://github.com/christophehurpeau/cra-rest-hooks-storybook

yarn install
yarn storybook

आशा है कि ये आपकी मदद करेगा

@christophehurpeau किसी भी मौका तुम मेरे लिए 5.0.6 कोशिश कर सकते हैं? इसे फिर से खोलना। 😭

मैं अभी भी अपने मुख्य प्रोजेक्ट में core-js @ v3 का उपयोग करते हुए एक ही मुद्दे पर आया था। वेबपैक कॉन्फ़िगरेशन में यह सुनिश्चित करने के लिए समाधान था, कि core-js/modules को स्टोरीबुक के साथ बंडल किए गए संस्करण में हल किया गया है

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

हैकी समाधान लेकिन अभी के लिए पर्याप्त होना चाहिए।

@ शीलमैन ने भी 5.0.6 की कोशिश की, एक ही परिणाम (https://github.com/christophehurpeau/cra-rest-hooks-storybook/tree/storybook-5.0.6)

@artursvonda मैं core-js v3 का उपयोग नहीं कर रहा हूं, एक निर्भरता इसका उपयोग करती है। मेरे पास node_modules/@storybook/core/node_modules/core-js क्योंकि v2 एक है जो प्रतिक्रिया-लिपियों और @ स्टोरीबुक / कोर दोनों द्वारा उपयोग किया जाता है, नोड_मॉड्यूल में कटौती की जाती है। केवल कोर-जेएस 3 का उपयोग कर निर्भरता कोर-जेएस नहीं ढूंढती है

आह तो यह काम करता है जब मैं उपनाम हटाता हूं:

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

वाह। उपनाम डरावने हैं। स्टोरीबुक उनका उपयोग क्यों कर रहा है?

cc @ndelangen

मुझे भी यह समस्या हो रही है। मैं नवीनतम फायरबेस का उपयोग कर रहा हूं जिसने हाल ही में कोर-ज्स @ 3 पर निर्भरता को जोड़ा है।
फायरबेस को अपग्रेड करने के बाद, चलाने के लिए उपयोग की जाने वाली स्टोरीबुक निम्नलिखित त्रुटियों का उत्पादन करती है:

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 समस्या हल हो जाती।

मैंने अभी देखा कि फायरबेस के पास 5.10.0 अपडेट था और स्टोरीबुक को 5.0.10 अपग्रेड भी किया था, और मैं उपरोक्त "हैक" को हटाने में सक्षम था।

दुर्भाग्य से फ़ायरबॉज़ और स्टोरीबुक दोनों को नवीनतम में अपडेट करने से मेरी समस्या ठीक नहीं हुई।
मुझे इस मुद्दे के लिए स्टोरीबुक का उपयोग बंद करना होगा।

@zjaml क्या आपने @parerholladay की वर्कअराउड ऊपर की कोशिश की?

इसके बारे में

@zjaml यह .storybook/webpack.config.js । कृपया मुझे बताएं कि क्या यह आपके लिए काम करता है!

@ शिलमैन यह काम करता है! धन्यवाद!

मैं babel प्रीसेट-एनवी का उपयोग कर रहा हूं और मैंने स्टोरीबुक 5.0.10 के साथ एक ही मुद्दे का सामना किया

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

हटाए गए अन्य उपनाम ने मेरे लिए इसे ठीक कर दिया। Op @christophehurpeau

क्या हमें पूर्वावलोकन के webpack.config से उपनाम हटा देना चाहिए?

शायद सभी उपनाम भी?

एक ही समस्या यहाँ, मेरे लिए समस्या को दूर करने के लिए उपनाम नहीं :(

मेरे लिए भी यही मुद्दा है। उर्फ को हटाने से समस्या ठीक नहीं होती है

यह पीआर इसे और कई अन्य मुद्दों को संबोधित करेगा जो मुझे लगता है:
https://github.com/storybooks/storybook/pull/6566

यह संभवतः एक बड़ा ब्रेकिंग परिवर्तन है, इसलिए यह वी 6 में जहाज कर सकता है, हम अभी भी इस पर बहस कर रहे हैं।

संभवतः हम उस पीआर को कई पीआर में विभाजित करने में कुछ समय लगा सकते हैं ताकि हम कुछ चीजों को तेजी से विलय और रिलीज करने में सक्षम हो सकें।

मदद बहुत सराहना की जाएगी!

यहाँ एक ही मुद्दा - हमारा react-app-polyfill साथ टूट रहा है, जिसे core-js संस्करण 3. का उपयोग करने के लिए अद्यतन किया गया है। अभी के लिए 0.2.2 संस्करण पर वापस आ रहा है।

इस फिक्स की पुष्टि ने मेरे लिए भी काम किया, [email protected] और [email protected]

फ़ाइल को जोड़ा गया ।/storybook/webpack.config.js उपरोक्त के साथ

~ खेद - @ स्टोरीबुक / प्रतिक्रिया[email protected] जारी नहीं लगता है - क्या यह जानबूझकर था? ~

संपादित करें: क्षमा करें - दूसरे अंक में उत्तर ढूंढना समाप्त कर दिया। https://github.com/storybooks/storybook/issues/5893

वैकल्पिक हल
5.1.0-alpha.x प्राप्त करने के लिए CLI / रिएक्ट मूल के अगले संस्करण का उपयोग करें:

npx -p @ storybook / cli @ अगला sb init --type react_native

उर्फ को हटाना मेरे लिए काम नहीं आया। हालाँकि, हम इसे हमारे babel फ़ाइल को .storybook

हेलो सब लोग! लगता है कि इस मुद्दे पर हाल ही में बहुत कुछ नहीं हुआ है। यदि अभी भी प्रश्न, टिप्पणी या बग हैं, तो कृपया चर्चा जारी रखने के लिए स्वतंत्र महसूस करें। दुर्भाग्य से, हमारे पास हर मुद्दे पर आने का समय नहीं है। हम हमेशा योगदान के लिए खुले रहते हैं, इसलिए कृपया हमें एक पुल अनुरोध भेजें अगर आप मदद करना चाहते हैं। निष्क्रिय मुद्दों को 30 दिनों के बाद बंद कर दिया जाएगा। धन्यवाद!

^ मेरे ज्ञान के लिए यह अभी भी बहुत मुद्दा है और इसे निष्क्रिय नहीं होना चाहिए

@jdhayford AFAIK यह 5.1 में तय किया गया है, जो कुछ दिनों में रिलीज के लिए स्लेटेड है

@ शिल्मैन यह बहुत अच्छा है! धन्यवाद और योगदानकर्ताओं को धन्यवाद the

यह समस्या अभी भी हो रही है लेकिन @brycehill समाधान का उपयोग करके इसे ठीक करने में सक्षम था

उर्फ को हटाना मेरे लिए काम नहीं आया। हालाँकि, हम इसे हमारे babel फ़ाइल को .storybook

मैं अब भी उसी मुद्दे का सामना कर रहा हूं। @ByDesignGit क्या आप

मैन्युअल रूप से नवीनतम npm i core-js -D स्थापित करके ठीक करने में सक्षम था।
मैन्युअल रूप से निर्भरता स्थापित करना अच्छा नहीं है। इसे ठीक से आंतरिक रूप से ऐसे मुद्दों का प्रबंधन करना चाहिए।

उचित समाधान की प्रतीक्षा की जा रही है।

मुझे भी इसी मुद्दे का सामना करना पड़ा। हालांकि, मेरा मानना ​​है कि यह अब मूल मुद्दे के विपरीत है जहां एक पिछले पैकेज ने कोर-जेएस (2.6.9) के पुराने संस्करण को एक निर्भरता के रूप में स्थापित किया था और अब स्टोरीबुक को कोर-जेएस @ 3 की आवश्यकता है।
@ChandanPHAI समाधान का उपयोग करके अंतरिम तय किया गया और एक उचित निर्धारण पर प्रतीक्षा की जा रही है।

मैं अब भी उसी मुद्दे का सामना कर रहा हूं। @ByDesignGit क्या आप

मैंने इसे अपने .babelrc को अपने .storybook ले जाकर हल किया

यह समस्या अभी भी हो रही है लेकिन @brycehill समाधान का उपयोग करके इसे ठीक करने में सक्षम था

उर्फ को हटाना मेरे लिए काम नहीं आया। हालाँकि, हम इसे हमारे babel फ़ाइल को .storybook में स्थानांतरित करके इसे प्राप्त करने में सक्षम थे

इधर भी ऐसा ही है:

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

उर्फ को हटाना मेरे लिए काम नहीं आया। लेकिन मैंने @ChandanPHAI के सुझाव के npm i core-js -D स्थापित किया, और इसने

साथ ही उचित निराकरण की प्रतीक्षा की जा रही है।

मैं अब भी उसी मुद्दे का सामना कर रहा हूं। @ByDesignGit क्या आप

मैंने इसे अपने .babelrc को अपने .storybook ले जाकर हल किया

यह समस्या अभी भी हो रही है लेकिन @brycehill समाधान का उपयोग करके इसे ठीक करने में सक्षम था

उर्फ को हटाना मेरे लिए काम नहीं आया। हालाँकि, हम इसे हमारे babel फ़ाइल को .storybook में स्थानांतरित करके इसे प्राप्त करने में सक्षम थे

इसने काम कर दिया! मैंने .babelrc को .storybook में कॉपी किया

@ arvenz0210 @ByDesignGit का मतलब यह नहीं है कि अब आपके पास दो .babelrc फाइलें हैं? अवांछनीय लगता है।

मेरे vue.js प्रोजेक्ट को "@storybook/vue": "^5.1.1" अपग्रेड करने ने मेरे लिए कोर-जेएस उर्फ ​​समस्या को हल कर दिया। 👍

• मेरे babel.config.js को स्थानांतरित करने की आवश्यकता नहीं थी
• मेरे वेबपैक कॉन्फ़िगर से कुछ भी जोड़ने / हटाने की आवश्यकता नहीं है (मैं https://github.com/storybookjs/vue-cli-plugin-storybook v0.6.1 का उपयोग कर रहा हूँ, इसलिए मेरा वेबपैक कॉन्फ़िगरेशन आंशिक रूप से vue-cli के साथ उत्पन्न होता है थोड़ा असंबंधित सामान जो मैंने vue.config.js माध्यम से जोड़ा है जो vue-cli गतिशील रूप से उत्पन्न वेबपैक कॉन्फ़िगरेशन के साथ विलय करता है।)
• कोर-जे, एलियास या डिप्स के किसी भी संदर्भ को जोड़ने / हटाने की आवश्यकता नहीं है, जो कोर-जेएस, आदि पर निर्भर करते हैं ...

मैं इसे एक कोणीय परियोजना पर भी देख रहा हूं, इसलिए कोई .babel फ़ाइल नहीं है। अलग-अलग कोर-जे स्थापित या उर्फ ​​विलोपन के साथ कोई भाग्य नहीं।

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

5.1.1 पर सभी संशोधन।

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

क्षमा याचना, मेरे पास अब और डिबग करने का समय नहीं है।

@storybook/react": "^5.1.1" का उपयोग करना और अभी भी इस मुद्दे को नए npm install । मुझे संदेह है @ChandanPHAI सही है, मेरे पास अन्य निर्भरताएं हैं जिन्होंने core-js पैकेज का v2 स्थापित किया है।

यह पीआर आज किया गया है, इसे ठीक करना चाहिए, @ शिलमैन जल्द ही एक नया रिलीज परीक्षण करेगा: # 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 युक्त विमोचन किया जो इस मुद्दे को संदर्भित करता है। इसे आजमाने के लिए आज ही अपग्रेड करें!

इस मुद्दे को बंद करना। कृपया पुन: खोलें यदि आपको लगता है कि अभी और कुछ करना बाकी है।

@ शिल्मैन ने सिर्फ अपडेट किया, और वही त्रुटियां ... :(

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

@ शीलमैन I ने नवीनतम संस्करण में स्टोरीबुक और

अभी भी कोर-जेएस से संबंधित त्रुटियां हो रही हैं।

npm i core-js -D स्थापित करने से स्थानीय स्तर पर समस्या ठीक हो जाती है।

कोर-जेएस लाइब्रेरी के बिना यह काम नहीं कर रहा है।

क्या आप अपने कोड में कहीं भी babel-polyfill आयात कर रहे हैं? यदि हां, तो उसे दूर करने का प्रयास करें?

यहां बताया गया है कि मैंने रिप्रोड ब्रांच कैसे तय की:
https://github.com/umakantp/demo-repro/pull/1

कृपया मुझे किसी भी चैनल के माध्यम से मेरे लिए और अधिक रिप्रो रिपोज भेजें, ताकि मैं इस मुद्दे को ठीक कर सकूं।

@ चंदन मंडी @ दूनिकाव

@ndelangen हाय, मेरे फ़ोल्डर में babel-polyfill है। मैं आपको और नहीं दिखा सकता। यह निजी रेपो है।
स्टोरीबुक और सभी ऐडऑन को अपडेट किया गया था।

नमस्ते, ५.१.४ पर भी कोर-जेएस के साथ एक ही मुद्दे का अनुभव करना। देव-निर्भरता के रूप में कोर-जेएस स्थापित करने वाले मनुलाल ने भी काम नहीं किया।

मैं इस पर काम कर रहा हूँ, 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

मैं बाहर नहीं कर रहा हूँ यह मेरी गलती हो सकती है। मैंने यार्न कैश को हटा दिया, यार्न को हटा दिया। हर निर्भरता का नवीनतम संस्करण स्थापित किया। मेरे पास एक निर्भरता के रूप में स्थापित कोर-जेएस नहीं है, लेकिन मैं कुछ प्रीसेट जैसे @babel/preset-env साथ babel का उपयोग करता हूं। मेरे पास एक कस्टम वेबपैक कॉन्फिगर है:

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 में ठीक वही त्रुटि है। मैं पुष्टि कर सकता हूं कि फाइल कोर-जेएस मॉड्यूल पथ में मौजूद है और बाबेल प्रीसेट में भी कोर-जेएस 3 सक्षम है, लेकिन फिर भी विफल रहता है। क्या आप इसे हल करने में सक्षम थे?

संपादित करें:

अगर मैं एडऑन-स्टोरीसोर्स को हटाता हूं, तो उम्मीद के मुताबिक काम करता है। हालांकि यह क्या कारण है यकीन नहीं है।

2 संपादित करें:
गहरा खोदा। किसी कारण के लिए, स्टोरीसोर्स लोडर को एडजॉन पैनल में दिखाने के लिए सभी .js फ़ाइलों की आवश्यकता होती है, और इसे कॉन्फ़िगरेशन में नोड मॉड्यूल को बाहर करना पड़ता है

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

संभवतः # 3626 # 6984 से संबंधित है

cc @ igor-DV @ libetl-

@ aga5tya हाँ आपने समस्या का

मुझे करना पड़ा:

• [x] सभी @ स्टोरीबुक / * निर्भरता को अपडेट करें
• [x] मेरे .babelrc में "corejs": 3 जोड़ें
• [x] yarn add corejs@3 चलाएं
• [x] मेरे webpack.config.js में exclude: /node_modules/, जोड़ें
• [x] मेरे app.js से import 'babel-polyfill' निकालें

बैबेल पॉलीफिल को पदावनत किया जाता है और हर जगह कोर-जेएस द्वारा प्रतिस्थापित किया जाना चाहिए

या airbnb-browser-shims :-p

किसी भी तरह से, नोड_मॉड्यूल को हमेशा ट्रांसप्लिकेशन से बाहर रखा जाना चाहिए।

मुझे निम्नलिखित त्रुटि हो रही है:

ERROR in//.storybook/config.js
मॉड्यूल नहीं मिला: त्रुटि: मॉड्यूल 'कोर-जेएस / मॉड्यूल / web.dom.iterable' नहीं मिल सकता है

मैं स्टोरीबुक / vue 5.1.9 का उपयोग कर रहा हूं।

@flowck अपने प्रोजेक्ट रूट में core-js v3 इंस्टॉल करें

क्या हम किसी भी कोर-जे के बिना स्टोरीबुक का उपयोग करने का एक तरीका खोज सकते हैं? उपभोक्ता अपने स्वयं के शिम क्यों उपलब्ध नहीं करा सकते हैं?

बैबल-पॉलीफिल्स एक पुस्तकालय का उपयोग करना है जिसका मुझे उपयोग करना है। मैं इस मामले में चलाने के लिए स्टोरीबुक कैसे प्राप्त कर सकता हूं?

मैंने yarn upgrade interactive --latest भागे, सभी स्टोरीबुक से संबंधित निर्भरताओं को उन्नत किया और अब यह काम कर रहा है! 🎉

FYI करें: यह त्रुटि तब हुई जब मैंने @storybook/addon-knobs addon जोड़ा।

@ chadlavi-casebook uhm, आप एक वेबपैक इग्निशन प्लगइन जोड़ने की कोशिश कर सकते हैं जो मुझे लगता है?
https://webpack.js.org/plugins/ignore-plugin/

@ स्टोरीबुक / 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

D core-js@^2.6.9 को देव-शक्तियों के साथ जोड़कर मेरे लिए इसे हल किया।

पहले अपना नोड_मॉड्यूल हटाना सुनिश्चित करें।
rm -rf node_modules

v5.1.9 से v5.0.6 v5.1.9 अपग्रेड करने के बाद मेरे पास यह समस्या है।

वही मुद्दा। v5.1.9 से v5.0.6 अपग्रेड करने के बाद फिक्स्ड

@JamyGolden & @Exomnius क्या आप अपने सेटअप के बारे में अधिक जानकारी साझा कर सकते हैं?

yarn why core-js का आउटपुट सहायक है, एक प्रजनन रिपो और भी अधिक है।

@ndelangen मैंने अब बिना किसी समस्या के 5.1.9 अपग्रेड किया है, मुझे लगता है कि एक नई पैच निर्भरता स्थापित की गई है और इस मुद्दे को हल किया है I've♀️ I've

संपादित करें, 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'

अहा, इसलिए स्टोरीबुक ठीक चल रहा है, लेकिन एक परीक्षण अभी भी एक पुराने कोर-जेएस संस्करण का उपयोग कर रहा है!

localMocksFile.js के अंदर क्या है? संभवतः आपको केवल 1 फ़ाइल अपडेट करनी होगी।

@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 परियोजना में प्राथमिक पैकेज में शामिल नहीं है।

मुझे निम्नलिखित त्रुटि हो रही है:

ERROR in//.storybook/config.js
मॉड्यूल नहीं मिला: त्रुटि: मॉड्यूल 'कोर-जेएस / मॉड्यूल / web.dom.iterable' नहीं मिल सकता है

मैं स्टोरीबुक / 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"
  }

यह एक फिक्स के बजाय एक वर्कअराउंड है, लेकिन मेरे सभी स्टोरीबुक पैकेज (एडऑन सहित) को v 5.0.6 पर वापस रोल करने से यह तय हो गया है। इस धागे में और कुछ नहीं मदद की।

(नीचे रिएक्ट + यार्न के लिए कमांड, लेकिन आसानी से एनपीएम / वीयू के लिए अनुवाद योग्य):

शुरुआत से:

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]

जब मैं स्टोरीबुक चलाने की कोशिश करता हूं, तो मुझे सममे मुद्दा दिखाई देता है:
ERROR in ./src/lib/helpers.js Module not found: Error: Cannot find module 'core-js/modules/web.dom.iterable' @ ./src/lib/helpers.js 16:0-43 @ ./src/components/Person.js @ ./src/components/Person.stories.js @ ./src sync \.stories\.js$ @ ./.storybook/config.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

यह nvm का उपयोग करके नोड v12 को अद्यतन करने के बाद हुआ।

हमें पॉलीफ़िल समस्या को ठीक करने के लिए ऐसा करना पड़ा ताकि मैं नोड को डाउनग्रेड न कर सकूं। इससे पहले सब कुछ काम कर रहा था। दुर्भाग्य से मुझे नहीं पता कि इससे पहले मैं किस नोड संस्करण पर था। मैंने इस थ्रेड पर सब कुछ आज़माया है, लेकिन मैं 5.0.6 पर वापस नहीं आना चाहता। इस प्रोजेक्ट के लिए स्टोरीबुक स्थापित करने का एक बड़ा कारण नए डॉक्स का उपयोग करना है। मैंने यहाँ सब कुछ धकेल दिया है: https://github.com/netliferesearch/netlife2019/tree/storybook_setup_sories

संपादित करें: मैंने नोड को डाउनग्रेड किया है और यह अभी भी काम नहीं कर रहा है, पोस्ट करने से पहले कोशिश करनी चाहिए थी। मैं जो हो रहा है उसके नुकसान पर थोड़ा सा हूं, देखता रहूंगा।

Nuxt.js v2.10.1 के अलावा @storybook/vue 5.2.5 का उपयोग करना और एक ही मुद्दा था: yarn storybook काम करता है, लेकिन yarn build या किसी भी अन्य संबंधित संबंधित कार्य में विफल रहा। 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]

और and: मुझे काम करने का माहौल मिलता है: yarn storybook , yarn build और अन्य सभी कार्य फिर से काम कर रहे हैं।

@rwam यार्न ऐड -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/***'

deps के बारे में:

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

मेरे काम करने के चित्र:

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

https://cli.vuejs.org/migrating-from-v3/#migrating -from-v3
अगर Invalid Option: corejs is not a valid top-level option : -rm -rf node_modules ।

आपको और आपके प्रियजनों को स्वास्थ्य;)

स्टोरीबुक को एक न्यूटेक्स प्रोजेक्ट में काम करने के लिए मुझे अधिक मजबूत समाधान मिला। समाधान कोर-जेएस के एक संस्करण बेमेल पर निर्भर करता है। Nuxt प्रति डिफ़ॉल्ट संस्करण 2 और स्टोरीबुक संस्करण 3 का उपयोग करता है। इसलिए इस मुद्दे को हल करने के लिए मुझे @ nuxt / babel-preset-app से इस नोट का अनुसरण करना होगा:

नोट: चूंकि Core-js @ 2 और core-js @ 3 दोनों ही Babel 7.4.0 से समर्थित हैं, हम सीधे core-js जोड़ने और corejs विकल्प के माध्यम से संस्करण सेट करने की सलाह देते हैं।

मुझे अपने nuxt.config.js पर इस अपडेट का उपयोग करके Nuxt 2.11.0 के साथ फिर से काम करने का माहौल मिलता है:

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

मैं इस समाधान के पार आया क्योंकि मैं नवीनतम स्थिर करने के लिए अपडेट नहीं कर सका ।

मुझे उसी मुद्दे का सामना करना पड़ा जब स्टोरीबुक (5.3.18) को gatsby v2 में जोड़ने की कोशिश कर रहा था जब पट्टे पर एक घटक स्थिर प्रश्नों का उपयोग कर रहा था। मूविंग .babelrc से .storybook ने @brycehill द्वारा सुझाए गए

स्टोरीबुक को एक न्यूटेक्स प्रोजेक्ट में काम करने के लिए मुझे अधिक मजबूत समाधान मिला। समाधान कोर-जेएस के एक संस्करण बेमेल पर निर्भर करता है। Nuxt प्रति डिफ़ॉल्ट संस्करण 2 और स्टोरीबुक संस्करण 3 का उपयोग करता है। इसलिए इस मुद्दे को हल करने के लिए मुझे @ nuxt / babel-preset-app से इस नोट का अनुसरण करना होगा:

नोट: चूंकि Core-js @ 2 और core-js @ 3 दोनों ही Babel 7.4.0 से समर्थित हैं, हम सीधे core-js जोड़ने और corejs विकल्प के माध्यम से संस्करण सेट करने की सलाह देते हैं।

मुझे अपने nuxt.config.js पर इस अपडेट का उपयोग करके Nuxt 2.11.0 के साथ फिर से काम करने का माहौल मिलता है:

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

मैं इस समाधान के पार आया क्योंकि मैं नवीनतम स्थिर करने के लिए अपडेट नहीं कर सका ।

बहुत बढ़िया, मेरे लिए काम किया!

@ समस्याएँ गैट्सबी के साथ एक ही मुद्दे में चल रही हैं। क्या आप टिप्पणी / .babelrc का लिंक पोस्ट कर सकते हैं क्योंकि मैं उन्हें इस मुद्दे में नहीं ढूंढ सकता।

NVM। मुद्दे पेज डायरेक्टरी में कहानियों के कारण थे। पेज की कहानियों को __stories__ पर ले जाकर इस मुद्दे को हल किया

Next.js 9.1.1 -> Next.js 9.4.4 ने मुझे फंसा लिया।

npm list core-js के परिणामों की तुलना करने से पता चला कि कोर js का एक बेबल रनटाइम अपडेट करने के बाद गायब था। मैंने इस अनुपलब्ध पैकेज को देव निर्भरता और एलओ और निहारना में फिर से काम किया

cc @ndelangen

संस्करण के साथ समान समस्या 5.3.19, जबकि कोर-जेएस वी 2 से वी 3 तक माइग्रेशन से निपटने के लिए

मेरे लिए भी यही मुद्दा है। जैसे @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

परियोजना की स्थिति और पूर्वापेक्षाएँ

• मेरे पास सभी [मेरी टीम] के वेबपैक / बैबल पैकेज (मेरे बदलाव में v7.xx है और अलग-अलग बदलाव में) को अपग्रेड करने के लिए एक उत्कृष्ट, अलग-अलग बदलाव है, लेकिन यह हमारे ie11 परीक्षण के कारण अभी तक परीक्षण से बाहर नहीं हुआ है आधारिक संरचना। एक निर्भरता के रूप में परिवर्तन प्रस्तुत किया जाने corejs संस्करण 3 और useBuiltIns: 'usage' , जहां पहले हम की एक पुस्तिका आयात उपयोग कर रहे थे @babel/polyfill और के लिए डिफ़ॉल्ट useBuiltIns । मुझे आशा है कि यह परिवर्तन जल्द ही विलीन हो जाएगा। यह प्राथमिक कारण है कि मैं अपने वर्तमान परिवर्तन में एक निर्भरता के रूप में कोरज को शामिल नहीं कर सकता / सकती हूं, क्योंकि कई अन्य लोगों ने फिक्स के रूप में (और सत्यापित) सुझाव दिया है।
• मेरे पास _another_ उत्कृष्ट परिवर्तन है, जो वेबपैक / बैबल पैकेज को अपडेट करने वाली शाखा पर आधारित है, जो हमारे स्टोरीबुक संस्करण को v5.3.19 से नवीनतम v6.xx में अपग्रेड करता है। मैंने उस शाखा में इस बग को फिर से शुरू करने की कोशिश नहीं की है क्योंकि मुझे लगता है कि सब कुछ ठीक हो जाएगा ) मेरा कारण जिसके बारे में नीचे बताया गया है।
• वर्तमान परियोजना में मुख्य ऐप के लिए रूट .babelrc (ऊपर देखा गया) है। यह कॉन्फ़िगर @babel/preset-env का उपयोग करता है और पॉलीफ़िल उपयोग को निर्धारित करने के लिए रूट .browserslistrc (ऊपर देखा गया) का उपयोग करता है। कोई .storybook/.babelrc हमारे ऐप की मेनलाइन शाखा में मौजूद नहीं है।
• हम केवल आंतरिक डेवलपर प्रलेखन के लिए स्टोरीबुक का उपयोग करते हैं। चूंकि ऑर्गन मुख्य रूप से क्रोम का उपयोग हमारे डिफ़ॉल्ट ब्राउज़र के रूप में करता है, इसलिए पॉलीफिल अनावश्यक हैं। इस रहस्योद्घाटन वास्तव में अंतिम समाधान के लिए योगदान दिया।
• i_am_ एक कस्टम स्टोरीबुक वेबपैक कॉन्फ़िगरेशन का उपयोग कर रहा है, लेकिन केवल फोंट / छवियों के आसपास अतिरिक्त नियम जोड़ने के लिए। मैंने इस स्टोरीबुक मुद्दे में उल्लिखित कारणों के लिए .js प्रसंस्करण के मुख्य नियमों को संशोधित करने का प्रयास छोड़ दिया।
• मैं केवल इस बात को देख रहा हूं कि जब यह स्टेटिक स्टेटबाइट साइट का निर्माण कर रहा है। स्थानीय विकास के लिए शामिल डेव-सर्वर के माध्यम से चलने से कोई समस्या नहीं होती है।

प्रारंभिक सुधार के प्रयास

समस्या को ठीक करने के मेरे अधिकांश शुरुआती प्रयास .babelrc (ऊपर देखे गए) में विकल्प सेट करने की कोशिश करने के लिए घूमते थे और बेबल से संवाद करने के लिए (जैसा कि build-storybook उपकरण द्वारा चलाया जाता है) मैं कैसे चाहता हूँ होने वाला वाष्पोत्सर्जन। दूसरों द्वारा सुझाए गए अनुसार useBuiltIns , sourceType कोई भी कॉन्फ़िगरेशन सफल नहीं था। इसके अतिरिक्त, मैंने पूरे क्लीन-एनपीएम-कैश-रिमूवल-नोड-मॉड्यूल्स-एंड-पैकेज-लॉक-एन-एनपी-इंस्टॉल्ड रूट को बिना किसी लाभ के (भले ही _did_ थोड़ा सा बदलने के लिए डिप्स के कुछ डिपो का कारण बनने की कोशिश की)।

अंतिम समाधान

शुरू में एक कस्टम .storybook/.babelrc का उपयोग करने की कोशिश करने में संकोच करते हुए, मैं विकल्पों से बाहर चल रहा था। मैंने पहले उस फ़ाइल को बनाने का प्रयास किया था और extends प्रॉपर्टी के माध्यम से रूट .babelrc साथ सामंजस्यपूर्ण ढंग से काम किया और एक दीवार को हिट किया, लेकिन मैंने इसे एक और जाने देने का फैसला किया।

स्टोरीबुक-विशिष्ट कॉन्फ़िगरेशन में रूट बेबल कॉन्फ़िगर की एक सरल चाल ने स्थिर साइट बिल्ड को सफलतापूर्वक पूरा करने की अनुमति दी, लेकिन अभी भी कुछ रनटाइम त्रुटियां थीं जो दोषपूर्ण ट्रांसप्लिकेशन का संकेत थीं (कुछ निर्यातों को फिर से निर्यात करने के परिणामस्वरूप उन मान undefined उस फ़ाइल में @babel/preset-env प्रीसेट को नए .storybook/.babelrc पूरी तरह से हटा दिया। हुजह, समस्या हल! मूल कॉन्फिग को एप्लिकेशन के लिए बने रहने की जरूरत थी, हालांकि, मैंने .storybook/.babelrc-ci नाम बदला और मूल रूट कॉन्फिगर को बहाल किया। फिर, मुझे ci config की जांच करने के लिए हमारे CI पाइपलाइन को अपडेट करना पड़ा और स्थैतिक साइट के निर्माण से पहले -ci प्रत्यय को काटने के लिए नाम बदलना पड़ा, लेकिन यह तुच्छ था।

समस्या पर अनुमान लगाना

इस प्रक्रिया ने मुझे अपने पैकेजों और लॉकफ़ाइल का बार-बार निरीक्षण किया था, और मुझे पता चला कि, जबकि स्टोरीबुक v5.3.19 और इसके सभी एडोनों में Corejs v3.xx पर निर्भरता है, मौजूदा @babel/polyfill और अन्य बैबेल की स्मर्टिंग है। deps Corejs v2.xx पर निर्भर करता है! मैं अनुमान लगा रहा हूं कि कम से कम एक समस्या ऐप में v2 के सबसे कम सामान्य भाजक का उपयोग करने का संकल्प है। यह समझ में आया क्योंकि मैं जिन त्रुटियों का सामना कर रहा था, वे es.array.iterator जैसे मॉड्यूल संदर्भित कर रहे थे जबकि v2 es6.array.iterator जैसे मॉड्यूल प्रदान करता है। मैं इस बारे में अनिश्चित हूं कि अगर स्टोरीबुक डिपो संघर्ष कर रहा है तो इसका उद्देश्य पुराने बेबल / कोरज कॉन्फिग को सपोर्ट करना है, लेकिन ऐसा प्रतीत होता है। इसके अलावा, इस बारे में भी कुछ होना चाहिए कि या तो / सभी स्टोरीबुक-बैबेल / इंस्टॉल किए गए बैबेल / स्टोरीबुक-कोरज / इंस्टॉल्ड-कोरजेस मौजूदा .babelrc ढूंढते हैं और लागू करते हैं। मैं इस बात की हानि में हूं कि क्यों रूट कॉन्फिग को स्टोरीबुक-विशिष्ट कॉन्फिग में बदलना जादुई रूप से समस्या को हल करता है। पाथिंग शायद? 🤷♂️

निष्कर्ष

यदि आप इस सारे धमाके के बाद चारों ओर फंस गए हैं, तो बधाई! 😂

सब सब में, मैं हुप्स से रोमांचित नहीं हूं मुझे इस समस्या के आसपास जाने के लिए कूदना पड़ा, लेकिन शायद मेरी स्थिति कुछ अनोखी है। इसके अलावा, मैं अपने पूर्वोन्मादित बेबल / वेबपैक / स्टोरीबुक अपग्रेड के विलय के बाद इसे पूरी तरह से चीर कर पाऊंगा।

वैसे भी, मुझे उम्मीद है कि यह एक ही मुद्दे से पीड़ित कम से कम एक व्यक्ति के लिए दिलचस्प था। और मैं आगे बढ़ूंगा और @shilman और करूंगा क्योंकि वे इस समस्या को हल करने में निवेश करते हैं। 👋