Storybook: स्टोरीबुक 5.0.0 इमोशन-थीमिंग और रिएक्ट लोडर बग

@ afrankel-sfdo क्या आप node_modules और yarn.lock निकाल सकते हैं और पुनः प्रयास कर सकते हैं? हम इस तरह के सामान के आसपास बहुत कुछ अजीब देख रहे हैं, जैसे https://github.com/storybooks/frontpage/pull/28#issuecomment -468666553

@ शिलमैन भी info @storybook/react v5.0.0-rc.10 :

rm yarn.lock; rm -Rf node_modules/; yarn; yarn storybook

Error: Cannot find module 'emotion-theming/package.json'

यह वास्तव में विचित्र है। क्या आप एक रिप्रो प्रदान कर सकते हैं? यह नहीं देखा कि मेरे CRA टेस्ट ऐप में या मेरे Gatsby टेस्ट ऐप में

मैं @storybook/[email protected] साथ एक ही बात है

संपादित करें: पैकेज-लॉक को हटाने के लिए 3 बार। json & node_modules ने मेरे लिए चाल चली

मैक ओएसएक्स पर चलने वाली @ स्टोरीबुक / प्रतिक्रिया@5.0.0 में यहां एक ही मुद्दा है
हालाँकि, यार्न को हटाने की फाइल हमारी प्रक्रिया में एक विकल्प नहीं है

5.0.0 पर एक ही मुद्दा और मैंने भी नीचे कम देखा ...

ModuleParseError: Module parse failed: Unexpected token (20:24)
You may need an appropriate loader to handle this file type.
|       console.info('HMR Configured');
|       module.hot.accept('layouts/App', () => {
>         ReactDOM.render(<App />, document.getElementById('root'));
|       });
|     }

    "@storybook/addon-a11y": "5.0.0",
    "@storybook/addon-actions": "5.0.0",
    "@storybook/addon-console": "^1.1.0",
    "@storybook/addon-info": "5.0.0",
    "@storybook/addon-knobs": "5.0.0",
    "@storybook/addon-links": "5.0.0",
    "@storybook/addon-notes": "5.0.0",
    "@storybook/addon-storyshots": "5.0.0",
    "@storybook/addon-viewport": "5.0.0",
    "@storybook/addons": "5.0.0",
    "@storybook/core": "5.0.0",
    "@storybook/react": "5.0.0",

एक ताजा स्टोरीबुक इंस्टॉल ठीक काम करता है, नीचे ट्रैक नहीं किया गया है कि हमारी परियोजना में इन मुद्दों का क्या कारण हो सकता है।

@ afrankel-sfdo मैं वही मुद्दा देख रहा हूं। मेरा वर्तमान सिद्धांत @emotion/core की कमी का कारण ModuleParseError । मैंने npm i @emotion/core @emotion/styled जो समस्या को हल करने के लिए लग रहा था। अजीब तरह से, मैंने नोटिस किया कि उन दो डिपो को package-lock.json से हटा दिया गया है, हालांकि मुझे नहीं पता कि क्यों। मैंने उन्हें package.json से निकाल दिया और package-lock.json उनके साथ छोड़ दिया, और मुझे लगता है कि मैं व्यवसाय में वापस आ गया हूं, हालांकि यह वास्तव में नहीं समझाता कि क्या हुआ।

अपडेट: उपरोक्त चरणों के बाद npm ls @emotion/core चलने पर यह ध्यान दिया गया:

[email protected] /Users/jamesdigioia/Code/compiq/web
├── @emotion/[email protected]  extraneous
└─┬ @storybook/[email protected]
  └─┬ @storybook/[email protected]
    └── @emotion/[email protected]

npm ERR! extraneous: @emotion/[email protected] /Users/jamesdigioia/Code/compiq/web/node_modules/@emotion/core

@emotion/core जड़ तक नहीं फहराया जा रहा है, जहां निर्माण इसकी उम्मीद कर रहा है (यह बाहरी है क्योंकि यह अब मेरे package.json )। require.resolve को @storybook/ui/paths.js में बुलाया जाता है, लेकिन यह केवल @storybook/theming तहत स्थापित होता है, इसलिए इसे उस फ़ोल्डर में node_modules में निहित किया जाता है, जिसका अर्थ है कि require.resolve @storybook/ui इसे नहीं मिल सकता है।

मैं कहना चाहता हूं कि समाधान @emotion/{core,styled} को @storybook/ui निर्भरता के रूप में जोड़ना है, क्योंकि @storybook/ui इसकी तलाश में है।

एक और अपडेट: यदि आप अपने package-lock.json को हटाना नहीं चाहते हैं, तो npm dedupe को मेरे लिए समस्या हल हो गई है।

@ FrAgFo0d यदि आप अपना yarn.lock हटाते हैं तो क्या यह काम करता है? आपको अपने परिवर्तन की जांच करने की आवश्यकता नहीं है, लेकिन यह जानना उपयोगी होगा कि क्या यह समाधान आपके लिए काम करता है। हम अंत में इसके नीचे तक पहुँच जाएंगे, लेकिन अब यह एक यार्न बग की तरह लगता है ...

मेरे पास एक ही मुद्दा है और यार्न को हटाकर इसे हल नहीं किया जा सकता है

yarn add @emotion/core @emotion/styled तुरंत इसे हल कर दिया

मुझे कुछ बहुत ही अजीब भावनाएँ संबंधित त्रुटियाँ मिल रही थीं। मेरे लिए इस मुद्दे को स्थापित करने से पहले नोड_मॉड्यूल्स, यार्न को हटा दें और yarn cache clean चलें।

हो सकता है कि यह समस्या स्टोरीबुक / कोर और स्टोरीबुक / थीम द्वारा उपयोग किए जा रहे दो अलग-अलग भावना संस्करणों से संबंधित हो। यह सब बहुत अजीब है, मैं अभी इसे पा नहीं सकता। जब मैं भावना पुस्तकालयों को मैन्युअल रूप से स्थापित करता हूं, तो यह बनाता है, लेकिन मुझे ब्राउज़र में त्रुटियां मिलती हैं ( Cannot read property 'Consumer' of undefined at ThemeProvider ) और कुछ भी नहीं मिलता है।

यह एक प्राचीन सीआरए ऐप में काम करता था, लेकिन मेरे कस्टम वेबपैक सेटअप में ऐसा नहीं है। मैं हमारे रिएक्टिव नेटिव वेब घटक लाइब्रेरी के लिए स्टोरीबुक सेटअप करने की कोशिश कर रहा हूं। यहाँ मेरा परीक्षण रेपो है: https://github.com/MrLoh/universal-react-storybook

स्टोरीबुक 4.1.13 अपग्रेड करने से समस्या हल हो गई है, इसलिए हो सकता है कि यह स्टोरीबुक / रिएक्शन और स्टोरीबुक / रिएक्ट-नेटिव के बीच अलग-अलग संस्करणों के साथ मेरी परियोजना में एक असंगति हो।

@MrLoh

मुझे इस मुद्दे का भी सामना करना पड़ा (हालांकि मैं @storybook/vue उपयोग करता हूं)।
और मैंने पाया कि package.json में पैकेज में से एक पुराने @storybook/addons पैकेज पर निर्भर था जो पुराने @emotion/* पैकेज पर आंतरिक रूप से निर्भर था।

एक वर्कअराउंड के रूप में, मैंने उस लाइब्रेरी के लिए resolutions फ़ील्ड लिखा और इससे मेरे लिए समस्या हल हो गई।

  "resolutions": {
    "my-old-library/@storybook/addons":"^5.0.0"
  }

@ FrAgFo0d यदि आप अपना yarn.lock हटाते हैं तो क्या यह काम करता है? आपको अपने परिवर्तन की जांच करने की आवश्यकता नहीं है, लेकिन यह जानना उपयोगी होगा कि क्या यह समाधान आपके लिए काम करता है। हम अंत में इसके नीचे तक पहुँच जाएंगे, लेकिन अब यह एक यार्न बग की तरह लगता है ...

काश ऐसा होता, लेकिन ऐसा करने के बाद मैं यह नहीं कह सकता कि समस्या अन्य आइटमों के गैर-मिलान संस्करणों के साथ या स्टोरीबुक द्वारा स्थापित होने के कारण है।

मैं yarn add @emotion/core @emotion/styled यह देखने का प्रयास कर सकता हूं कि क्या यह हल है। `
हालाँकि मैं अपनी परियोजना में अधिक निर्भरता नहीं जोड़ता;)

हमारे लिए एक स्पष्ट निर्भरता के रूप में @storybook/theming जोड़ने के लिए काम किया

मुझे मैक ओएसएक्स पर बस एक ही समस्या का सामना करना पड़ा, विंडोज पर मैक पर सब कुछ ठीक काम करता है मुझे इसे काम करने के लिए npm i @emotion/core @emotion/styled चलाना पड़ा

स्टोरीबुक@5.0.0 के साथ भी यही समस्या थी, होम्बर्ग सॉल्यूशन ने मेरे लिए काम किया

yarn.lock फ़ाइल को हटाना मेरे लिए एक विकल्प नहीं था (और मैं ज्यादातर मामलों में ऐसा करने के खिलाफ सुझाऊंगा)। हम इसे ठीक करने में सक्षम थे।

$ rm -rf node_modules
$ yarn cache clean
$ yarn remove @storybook/core @storybook/theming [all other storybook deps]
$ yarn add -D @storybook/core @storybook/theming ....

उम्मीद है कि यह इस मुद्दे में किसी और को चलाने में मदद करता है

हमारे लिए +1 वही। इस सूत्र में केवल समाधान जो कहानी 4 पर काम कर रहा था

मेरे पास भी यह मुद्दा था
@storybook/react: 5.0.3
मैको मोजावे
इसके साथ हल किया गया:

yarn add --dev @emotion/core -W
yarn add --dev emotion-theming -W

V5.0.3 से v5.0.5 तक अपग्रेड के बाद हमें एक ही समस्या का सामना करना पड़ा।

इसके साथ हल किया गया:
yarn add --dev @storybook/theming

मुझे अभी भी यह मुद्दा मिल रहा है। मेरे पास निम्न में से नवीनतम है:

• @storybook/theming
• @emotion/core
• @emotion/styled

सभी कैश समाशोधन काम नहीं किया। यह अभी भी पुराने emotion-theming पैकेज को खोजने की कोशिश कर रहा है:

info => Loading presets
WARN   Failed to load preset: "/Users/areardon/code/react-beautiful-dnd/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module 'emotion-theming/package.json'

मैंने emotion-theming पैकेज स्थापित किया और सब कुछ काम कर रहा है।

emotion-theming स्थापित करके इसे @alexreardon की तरह ही तय किया गया: https://emotion.sh/docs/emotion-theming में निम्न त्रुटि हो रही थी:

info @storybook/react v5.0.5
info 
info => Loading presets
WARN   Failed to load preset: "/Users/Felipe/Local_Projects/monorepo/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module 'emotion-theming/package.json'

मैं कहना चाहता हूं कि समाधान @ कहानी / / ui पर निर्भरता के रूप में @ भावना / {कोर, स्टाइल} को जोड़ने के लिए है, क्योंकि @ कहानीपुस्तक / ui इसके लिए देख रहा है।

मैं @mAAdhaTTah से सहमत

समान समस्या @ स्टोरीबुक / प्रतिक्रिया v5.0.6 के साथ भी मौजूद है।

प्रीसेट लोड करने में विफल: "/User/vinkumar2/Documents/Projects/PatternLibs/ReactPatternLib/node_modules/@storybook/core/dver/server/manager-manet-preset.js"
ERR! त्रुटि: मॉड्यूल '@ भावना / कोर / पैकेज नहीं मिल सकता है।'

देवनिर्भरता में @ भावना / कोर को जोड़ने से मदद मिली और स्टोरीबुक काम कर रहा है। @ स्टोरीबुक / प्रतिक्रिया के साथ पैकेज निर्भरता में इसके लापता होने जैसा लगता है।

मैंने इसके लिए एक PR यहां डाला है: # 6435

ओह नहीं !! मैंने अभी-अभी https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.23 युक्त PR # 6435 जारी किया जो इस मुद्दे को संदर्भित करता है। इसे आजमाने के लिए आज ही अपग्रेड करें!

क्योंकि यह पूर्व-रिलीज़ है आप इसे @next NPM टैग पर पा सकते हैं।

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

अल्फा संस्करण ने मेरे लिए इस मुद्दे को तय किया, धन्यवाद @shilman !

समस्या अभी भी 5.0.10 में बनी हुई है (npm लॉग द्वारा यह अल्फा के बाद का एक संस्करण है ।.23)

त्रुटि संदेश:

प्रीसेट लोड करने में विफल: "/.../ode_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! त्रुटि: मॉड्यूल 'इमोशन-थीमिंग / package.json' नहीं ढूँढ सकता

स्टैक ट्रेस:

stack: 'Error: Cannot find module \'emotion-theming/package.json\'\n    
at Function.Module._resolveFilename (module.js:536:15)\n    
at Function.resolve (internal/module.js:18:19)\n   
at Object.<anonymous> (/.../node_modules/@storybook/ui/paths.js:16:38)\n    
at Module._compile (module.js:635:30)\n    
at Object.Module._extensions..js (module.js:646:10)\n    
at Module.load (module.js:554:32)\n    
at tryModuleLoad (module.js:497:12)\n    
at Function.Module._load (module.js:489:3)\n    
at Module.require (module.js:579:17)\n    
at require (internal/module.js:11:18)\n    
at Object.<anonymous> (/.../node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:18:37)\n    
at Module._compile (module.js:635:30)\n    
at Object.Module._extensions..js (module.js:646:10)\n    
at Module.load (module.js:554:32)\n    
at tryModuleLoad (module.js:497:12)\n    
at Function.Module._load (module.js:489:3)',

@Stralos यह फिक्स 5.1.X रिलीज शाखा में है, जो वर्तमान में अभी भी अल्फा में है ( 5.1.0-alpha.33 )।

@BrendanAnnable @alexlafroscia @devrelm चाहिए मैं में ठीक वापस पैच 5.0.x ?

@ शिल्मैन को यकीन नहीं है कि स्टोरीबुक रिलीज़ शेड्यूल क्या है (उदाहरण के लिए 5.1.x), लेकिन यह स्टोरीबुक 5 में अपग्रेड करने वाली कई परियोजनाओं को रोक रहा है, इसलिए यदि संभव हो तो इस गैर-अल्फ़ा रिलीज़ को हिट करने के लिए मुझे यह तय करना अच्छा लगेगा

यहां समस्या यह है कि यार्न (या एनपीएम) अजीब तरह से (इस मामले में, नहीं) उत्थापन पैकेज है। yarn list या yarn why आउटपुट दोषपूर्ण भी हैं:

% yarn why emotion-theming
yarn why v1.15.2
[1/4] 🤔  Why do we have the module "emotion-theming"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "_project_#some_project#@storybook#addon-actions#@storybook#theming" depends on it
   - Hoisted from "_project_#some_project#@storybook#addon-actions#@storybook#theming#emotion-theming"
✨  Done in 1.74s.

% yarn list emotion-theming
yarn list v1.15.2
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ [email protected]
✨  Done in 1.86s.

% find . -type d -name emotion-theming
./some_project/node_modules/@storybook/addon-actions/node_modules/emotion-theming
./some_project/node_modules/@storybook/theming/node_modules/emotion-theming
./node_modules/@storybook/ui/node_modules/emotion-theming
./node_modules/@storybook/router/node_modules/emotion-theming

जैसा कि आप देख सकते हैं, यार्न रिपोर्टिंग कर रहा है कि केवल एक emotion-theming पैकेज है, जिसे रूट पर फहराया जाना चाहिए, लेकिन यह मामला नहीं है: यह पैकेज को अलग-अलग पैकेजों में 4 स्थानों पर दोहरा रहा है। चाहे वह एक यार्न / एनपीएम बग हो, मुझे यकीन नहीं है। शायद निर्भरता ' dependencies और peerDependencies का संयोजन इस अजीब व्यवहार का कारण बन रहा है? जब मैं स्टोरीबुक पैकेज के विभिन्न प्रमुख संस्करणों, जैसे @storybook/[email protected] और @storybook/[email protected] ओर से हो, तो मेरी स्टोरीबुक सेटअप विफल हो जाती है।

मुझे यह भी लगता है कि मोनोरेपो यार्न के कार्यक्षेत्र और शीर्ष-स्तर के नोहोस्टिंग के हमारे संयोजन भी इस समस्या को पैदा करने में कारक हो सकते हैं:

"workspaces": { "nohoist": [ "some_project/*", "some_project/@*/*", ], "packages": [ "some_project", ] },

मैं भी समान समस्याओं का अनुभव कर रहा हूं, लेकिन लगता है कि उपरोक्त समाधानों में से अधिकांश ने मेरे लिए समस्या को ठीक नहीं किया।
मैंने अल्फ़ा संस्करण की भी कोशिश की और अभी भी त्रुटि हो रही है।
मेरे लिए समस्या अभी भी ऐसी दिखती है कि दो अलग-अलग पैकेज @emotion/core के दो अलग-अलग संस्करणों की तलाश कर रहे हैं इसलिए मैन्युअल इंस्टॉलेशन काम करता है, लेकिन हमेशा उन दो पैकेजों में से एक है जो लापता संस्करण के लिए शिकायत कर रहे हैं।

/[email protected] /repos/ui
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   └── @emotion/[email protected]  deduped
├─┬ @storybook/[email protected]
│ └── @emotion/[email protected]
└─┬ @storybook/[email protected]
  └─┬ @storybook/[email protected]
    └─┬ @storybook/[email protected]
      └── UNMET PEER DEPENDENCY @emotion/[email protected]

npm ERR! peer dep missing: @emotion/core@^10.0.0, required by [email protected]

मैं मैन्युअल रूप से npm i @storybook/theming जोड़ने की कोशिश करता हूं, लेकिन फिर भी कोई भाग्य नहीं है।

@devrelm your fix (# 6435)

@wayayala जिसने मेरे लिए काम किया, धन्यवाद!

5.x पर अपग्रेड किया गया, बग में चला गया और मैंने सिर्फ 5.1.9 में अपडेट किया है, बिल्कुल उसी समस्या के साथ।

उस ने कहा, मैं केवल एक संस्करण प्राप्त कर रहा हूँ @ भावना / कोर (10.0.10)

@alasdairhurst मैं भी इस समस्या में भाग गया।

आप इसे CRA के साथ इस डेमो प्रोजेक्ट पर देख सकते हैं
https://github.com/marco-silva0000/cra-test-pnp-storybook

हमारे लिए एक स्पष्ट निर्भरता के रूप में @storybook/theming जोड़ने के लिए काम किया

क्या आपने कभी समझा कि इसने मदद क्यों की? क्योंकि इसने हमारे लिए भी मदद की, जो महान है! लेकिन मैं नहीं समझता कि क्यों: पी

अगर यह किसी की मदद कर सकता है - मुझे यह त्रुटि भी मिली, और मुझे यह महसूस करने में थोड़ा समय लगा कि मैं वेबसाइट फ़ोल्डर के बाहर पैकेज स्थापित कर रहा था ... इसीलिए यह पैकेज.जॉन नहीं मिला ...