Storybook: बाबेल-लोडर बनाने के साथ प्रतिक्रिया-ऐप-ऐप 2.1.3

+1

क्या इसका मतलब है कि हमें CRA ऐप्स के लिए babel-loader स्थापित नहीं करना चाहिए?

हम्म जब मैं babel-loader dep निकालता हूं तो स्टोरीबुक टूट जाता है ... $

एक ही मुद्दा होने 😕

एक ही मुद्दा ... अभी तक कोई वर्कअराउंड?

@ ayoola-moore हां, वर्कअराउंड को package.json में लाइन में बदलना है:

"babel-loader": "8.0.4"

इस तरह दोनों react-scripts और storybook काम करेंगे। फिर भी एक बेहतर समाधान की तलाश में। : भ्रमित:

cc @artisologic @YoannDelpierre @ovionlogis @patricknick @mrmckeb @ivnkld @viniciusreiss @dlevs @Jipperism @euskonoxox @fuadajip @AMTourky @graitmeans @tmeasday @ यूजीन-स्विरडेव

@ शीलमैन , मैं भी इस बारे में सोच रहा हूं। हम प्रतिक्रिया-लिपियों से babel-loader को उजागर करने पर विचार कर सकते हैं ... जो मदद कर सकता है। हाल ही में एक पीआर था जिसने chalk (https://github.com/facebook/create-react-app/pull/6150) के लिए कुछ ऐसा ही किया था।

वैकल्पिक रूप से, क्या यह आसान होगा यदि यह @storybook/react निर्भरता थी? बल्कि एक सहकर्मी-निर्भरता से। मुझे एहसास है कि गैर-सीआरए उपयोगकर्ताओं के लिए समस्याएँ हो सकती हैं।

या, हम react-scripts मौजूद होने पर सीधे babel-loader react-scripts/node_modules/babel-loader आयात कर सकते हैं। हम पहले से ही react-scripts फ़ोल्डर से कॉन्फिगर लोड करते हैं।

@ igor-DV @ndelangen @tmeasday विकल्पों पर कोई राय जो @mrmckeb ने ऊपर रखी है? क्या यह कुछ है जिसे हम सीआरए प्रीसेट के साथ संभाल सकते हैं?

वर्कअराउंड मेरे लिए काम नहीं करता है। मैं वर्कअराउंड की कोशिश करने के बाद भी संघर्षों को देखता हूं।

वर्कअराउंड मेरे लिए काम नहीं करता है। मैं वर्कअराउंड की कोशिश करने के बाद भी संघर्षों को देखता हूं।

सुनिश्चित करें कि आप अग्रणी "^" को हटा दें अन्यथा आपको अभी भी 8.0.5 मिलेगा

मुझे लगता है कि हमें babel-loader आवश्यकता हो सकती है, जिसमें से react-scripts इसे मिल जाए ( requireFrom या जैसे का उपयोग करें, हालांकि यदि react-scripts ने इसे निर्यात किया जो इसे आसान बना देगा ) यदि हम CRA के वेबपैक विन्यास का उपयोग कर रहे हैं।

एक पूर्व निर्धारित उस नेक को बना देगा, लेकिन मुझे लगता है कि हमारे पास पहले से ही CRA के लिए विशेष केस कोड है (इसका उपयोग करने के लिए कॉन्फ़िगर है) इसलिए शायद यह वहां करना अपेक्षाकृत आसान होगा?

वर्कअराउंड मेरे लिए काम नहीं करता है। मैं वर्कअराउंड की कोशिश करने के बाद भी संघर्षों को देखता हूं।

सुनिश्चित करें कि आप अग्रणी "^" को हटा दें अन्यथा आपको अभी भी 8.0.5 मिलेगा

मेरे पैकेज में यही है: "बाबेल-लोडर": "8.0.4"

क्या अन्य कदम हैं जिनके लिए काम के लिए कदम उठाए जाने की आवश्यकता है?

@jlmelis , "रिएक्शन-स्क्रिप्ट" का कौन सा संस्करण स्थापित है? मैं पुष्टि कर सकता हूं कि "प्रतिक्रिया-स्क्रिप्ट" के लिए: "2.1.3" वर्कअराउंड ठीक काम कर रहा है

@vsubbotskyy - मैं npx के साथ create-react-app चला रहा हूँ। यह संस्करण 2.1.3 दिखाता है। शायद मेरे सेट अप के साथ कुछ और पेचीदा। मैं बस इस बात पर नज़र रखूंगा कि क्या कोई फिक्स होता है। धन्यवाद!

मैं काम करने के आसपास काम पाने में सक्षम था। धन्यवाद

मैं चारों ओर देख रहा था, और मुझे लगता है कि इस स्तर पर CRA (जब CRA का उपयोग किया जाता है) से लोडर में आवश्यकता होगी। मैं अब एक पीआर बनाऊंगा।

@ दिन , यह बहुत अच्छा होगा यदि आप PR # 5308 पर एक नज़र डाल सकते हैं और प्रतिक्रिया दे सकते हैं।

मैं एक ही मुद्दे के माध्यम से किया गया है और अंत में यह तय कर दिया। मैंने अपने पैकेज.जॉसन फ़ाइल में बैबल-लोडर को वापस "8.0.4" में बदल दिया और पैकेज-लॉक जसन फ़ाइल को हटाने की आवश्यकता थी और मैं तब स्टोरीबुक के साथ शुरू और परीक्षण करने में सक्षम था। मुझे आशा है कि यह मददगार है।

"_ मैंने अपने पैकेज में" 8.0.4 "पर बैबल-लोडर को वापस बदल दिया। json_"
मुझे उम्मीद है कि यह समाधान नहीं है और जल्द ही तय हो जाएगा क्योंकि यह हमें प्रतिक्रिया-स्क्रिप्ट को अपडेट करने के लिए अवरुद्ध कर रहा है: /
धन्यवाद

+1

क्षमा करें, मैं 1.5 सप्ताह तक कार्रवाई से बाहर रहा और इस पर समीक्षा का पीछा नहीं किया। अब कर रहे हैं।

अभी भी एक ही मुद्दा रहा है

धन्यवाद @oscargws , हम सक्रिय रूप से इसकी जांच कर रहे हैं और इसे हल करने के लिए # 5308 को उठाया गया। @ndelangen , क्या आप उस PR पर एक नज़र

@mrmckeb आह बहुत अच्छा। किसी और को समस्या होने के लिए, मैन्युअल रूप से babel-loader संस्करण को package.json में बदलना मेरे लिए इसे ठीक कर दिया है!

क्या किसी को पता है कि वास्तव में वहाँ क्या टूट गया? यह एक पैच संस्करण टक्कर है, मुझे अजीब लगता है।

@ igor-DV, मुद्दा यह है कि सीआरए एक सटीक संस्करण मैच की उम्मीद करता है - और अगर कुछ package.json में स्थापित होता है जो संघर्ष करता है, तो यह एक त्रुटि फेंकता है। इसलिए, कभी भी CRA एक संस्करण या दो पीछे (भले ही एक पैच संस्करण है), उपयोगकर्ता स्टोरीबुक को स्थापित करने के बाद इस त्रुटि को देख सकते हैं।

यहाँ समाधान CRA के साथ काम करने पर CRA के babel-loader के संस्करण का उपयोग करना है, ताकि यह समस्या उत्पन्न न हो।

निम्नलिखित वर्कअराउंड मेरे लिए काम करता है:

Package.json में लाइन को "babel-loader": "8.0.4" में बदलना इसे ठीक करने के लिए लगता है।

इस बारे में कोई अपडेट? केवल "babel-loader": "8.0.4" या किसी अन्य चरण को जोड़कर इसे हल नहीं किया जा सकता

इस बारे में कोई अपडेट? केवल "babel-loader": "8.0.4" या किसी अन्य चरण को जोड़कर इसे हल नहीं किया जा सकता

मैं एक निर्भरता और एक सहकर्मी निर्भरता के रूप में बेबल-लोडर 8.0.4 को जोड़कर इसे हल करने में सक्षम था।

मैं एक निर्भरता और एक सहकर्मी निर्भरता के रूप में बेबल-लोडर 8.0.4 को जोड़कर इसे हल करने में सक्षम था।

Unfournatatley मेरे लिए नहीं है, मेरा मुझसे babel-loader": "8.0.5 माँग रहा है, यकीन नहीं तो इससे कोई फर्क नहीं पड़ता, जब मैं npm ls babel-loader चलाता हूँ तो यह फेंकता है:

├── [email protected] 
└─┬ [email protected]
  ├── [email protected]  deduped
  └─┬ [email protected]
    └── [email protected]

@ रोलैंडो-बारबेला ने आपके पैकेज में resolution क्षेत्र के माध्यम से संस्करण को पिन करने की कोशिश की। 8.0.4

मैंने संस्करण को 2.1.2 से 2.1.5 फिर यह हल हो गया

हां, यह अब @nguyentuandat के लिए एक अच्छा समाधान है, लेकिन केवल तब तक अस्थायी है जब तक कि हम इसे ठीक से कैसे संभालना है।

प्रतिक्रिया-लिपियों को अद्यतन करना मेरे लिए काम किया (thx, @nguyentuandat)। मैं 2.1.1 पर था, चैंज से निर्देश लेकर अपडेट हुआ:

yarn add --exact [email protected]

यहाँ पर सब कुछ कोशिश करने के बाद, मुझे इसका हल मिला।

बस एक टेक्स्ट एडिटर में ओपन करें। यह होम डायरेक्टरी में छिपा हुआ है इसलिए Ctrl + H दबाएं)

इस लाइन को .profile के नीचे चिपकाएँ

PATH = $ HOME / .node_modules_global / bin: $ PATH निर्यात करें

और वोइला .... यह काम करता है

"react-scripts": "2.1.8" और storybook v5 का उपयोग करके, मुझे वही त्रुटि मिल रही है।
जैसा कि दूसरों द्वारा कहा गया है, मैन्युअल रूप से "babel-loader": "8.0.4" को devDependency रूप में जोड़ना निश्चित है।

"react-scripts": "2.1.5", और "@storybook/react": "^4.1.4", Yarn का उपयोग करके।

The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.0.5"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree: babel-loader (version: 8.0.4)

npm ls babel-loader चल रहा है:
├─┬ UNMET DEPENDENCY [email protected]
│ └── UNMET DEPENDENCY [email protected]
└─┬ UNMET DEPENDENCY [email protected]
└── UNMET DEPENDENCY [email protected]

babel-loader मेरे पैकेज में मौजूद नहीं है। और भक्ति पर निर्भरता के रूप में 8.0.4 संस्करण जोड़ना मेरे लिए समस्या को ठीक नहीं करता है।

npm i उम्मीद के अनुसार काम करता है। लेकिन जब मैं npm start कोशिश कर रहा हूं तो मुझे यही मुद्दा मिलता है:

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.0.5"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:
.../node_modules/babel-loader (version: 8.0.4)

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

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

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

मैं सिर्फ नवीनतम बीटा निर्माण की कोशिश की। हम यहां [email protected] और टाइपस्क्रिप्ट सेटअप के साथ स्टोरीबुक का उपयोग कर रहे हैं: https://storybook.js.org/docs/configurations/typescript-config/#setting -up-टाइपस्क्रिप्ट- with-babel-loader

हालांकि यह विफल रहता है क्योंकि आवश्यकता को सीआरए बेबल-लोडर नहीं मिल सकता है। क्या उसके लिए पहले से ही कोई उपाय है?

@mrmckeb को इस बारे में कुछ पता है?

मैं सिर्फ नवीनतम बीटा निर्माण की कोशिश की। हम यहां [email protected] और टाइपस्क्रिप्ट सेटअप के साथ स्टोरीबुक का उपयोग कर रहे हैं: https://storybook.js.org/docs/configurations/typescript-config/#setting -up-टाइपस्क्रिप्ट- with-babel-loader

हालांकि यह विफल रहता है क्योंकि आवश्यकता को सीआरए बेबल-लोडर नहीं मिल सकता है। क्या उसके लिए पहले से ही कोई उपाय है?

हाँ, मुझे "react-scripts": "3.0.1" साथ भी यही समस्या

यह वही है जो मैंने कहानी को कोडबेस में जोड़ने के बाद प्राप्त किया है:

* The react-scripts package provided by Create React App requires a dependency:

  "babel-jest": "24.7.1"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-jest was detected higher up in the tree:

  /xxx/node_modules/babel-jest (version: 24.8.0) 

• devDependencies

"typescript": "3.4.5",
"@storybook/react": "^5.0.11",
"@storybook/addon-actions": "^5.0.11",
"@storybook/addon-links": "^5.0.11",
"@storybook/addons": "^5.0.11",
"@babel/core": "^7.4.4",
"babel-loader": "^8.0.6"

• npm ls babel-jest

└─┬ [email protected]
  ├── [email protected] 
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └── [email protected] 

यदि आप CRA का उपयोग कर रहे हैं तो Hi @patricknick और @wxqee , आपके पास कोई कस्टम कॉन्फ़िगरेशन नहीं होना चाहिए: टाइपस्क्रिप्ट काम करता है। इसे किसी नए इंस्टॉलेशन, किसी कस्टम कॉन्फिग के साथ आज़माएं, और मुझे बताएं कि क्या यह आपके लिए काम नहीं कर रहा है।

@ शीलमान - शायद हमें इसे दर्शाने के लिए डॉक्स अपडेट करने चाहिए?

babel-jest समस्या को CRA @ummahusla के नवीनतम संस्करण में हल किया जाना चाहिए - यदि नहीं, तो कृपया इसे https://github.com/facebook/create-react-app/issues पर उठाएं

हाय @mrmckeb , आपकी मदद के लिए धन्यवाद! मैंने सिर्फ आपके समाधान की कोशिश की और अपने कस्टम webpack.config.js को हटा दिया:

// @ts-check

module.exports = ({ config, mode }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [['react-app', { flow: false, typescript: true }]],
    },
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

दुर्भाग्य से, यह निम्नलिखित त्रुटि के परिणामस्वरूप है:

ERROR in ./.storybook/config.tsx 22:32
Module parse failed: Unexpected token (22:32)
You may need an appropriate loader to handle this file type.
 addDecorator(story => {
   const DefaultRoute = props => <div id="router">{story()}</div>;
   return (
    <BrowserRouter>

यह मेरा config.tsx है:

import { withOptions } from '@storybook/addon-options';
import { addDecorator, configure } from '@storybook/react';
import { Grommet } from 'grommet';
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import GlobalStyle from '../src/globalStyles';
import '../src/i18n';
import { theme } from '../src/theme/index';

// automatically import all files ending in *.stories.tsx
const req = require.context('../src', true, /\.stories\.tsx$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

withOptions({
  addonPanelInRight: true,
});

addDecorator(story => {
  const DefaultRoute = props => <div id="router">{story()}</div>;
  return (
    <BrowserRouter>
      <DefaultRoute default />
    </BrowserRouter>
  );
});
addDecorator(story => (
  <>
    <GlobalStyle />
    {story()}
  </>
));
addDecorator(story => <Grommet theme={theme}>{story()}</Grommet>);

configure(loadStories, module);

इस पर मुझे एक संकेत दे सकता है? धन्यवाद!

मुझे वही मुद्दा मिल रहा है। यह JSX पार्स करने के बारे में बहुत दुखी लगता है।

@mrmckeb मैंने अभी @storybook/preset-typescript जारी किए और वैसे भी टाइपस्क्रिप्ट डॉक्स को अपडेट करने की आवश्यकता है। यदि आप मुझे बताएं कि मुझे टाइपस्क्रिप्ट और सीआरए के बारे में क्या कहना चाहिए, तो मुझे उस अपडेट में काम करने में खुशी होगी। धन्यवाद! 🙇

धन्यवाद @ शीलमान सीआरए प्रीसेट हुड के तहत सीआरए कॉन्फ़िगरेशन का उपयोग करता है, इसलिए इसमें सब कुछ के लिए समर्थन है सीआरए कर सकते हैं - टाइपस्क्रिप्ट, सीएसएस मॉड्यूल, सैस, आदि। मूल रूप से, काम करने के लिए कुछ भी आवश्यक नहीं है, बस स्थापित करें और जाएं!

उपरोक्त babel-loader समस्या के रूप में बताया, स्टोरीबुक की स्थापना के साथ इसने मेरे CRA को उड़ा दिया। मैंने @storybook/[email protected] रिलीज़ स्थापित किया। स्टोरीबुक का निर्माण और संचालन होगा, लेकिन मेरी कोई भी कहानी / घटक यूआई में नहीं है। और stdout मेरी सारी कहानियाँ इन चेतावनियों को फेंक रही हैं।

WARNING in ./stories/core.stories.js
Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: /project-ui/stories/core.stories.js: Unexpected token (14:47)
  13 | storiesOf('core/component', module)
> 14 |   .add('standard text', () => <Component block={FIXTURE} />)

अन्य विविधताओं की कोशिश की और कोई भी काम नहीं ...

const FIXTURE = {..some-data...}

storiesOf('core/component', module)
   .add('standard text', () => (<Component block={FIXTURE} />))

5.0.11 वापस लौटना यह स्टोरीबुक बिल्ड के लिए फिर से काम करता है और अब चेतावनी नहीं देता है। और मेरा CRA फिर से काम कर रहा है ... क्या मुझे अपग्रेड पथ के लिए कुछ और करने की आवश्यकता है? कल सेटअप स्टोरीबुक परियोजना के लिए इतना नया है।

अभी चीजें फिर से काम कर रही हैं ... लेकिन 5.1.x की रिलीज़ के बारे में मेरे पर्यावरण की स्थिति के बारे में चिंता है।

जैसे ही कोई और मेरे साथ उसी स्थिति में भूमि करता है: मैं अपने जीवन के लिए काम करने के लिए Storybooks + CRA एकीकरण प्राप्त नहीं कर सका, जहां Storybooks CRA के बिल्ड सेटअप का उपयोग करता है। हालाँकि, मैंने तब अपनी कहानियों को मेरी CRA परियोजना के src/ निर्देशिका में स्थानांतरित करने की कोशिश की, और अचानक यह काम कर गया। मैं नहीं जानता कि क्यों, या अगर इसकी सिफारिश की गई है या सभी की आवश्यकता है, लेकिन इसने मेरे लिए इसे निर्धारित किया है।

मुझे एक नए CRA टाइपस्क्रिप्ट ऐप के साथ भी यह समस्या आ रही है। मास्टर और स्टोरीबुक 5.0.11 से बहुत नवीनतम सीआरए

@revmischa src/ तहत आपकी कहानियाँ हैं?

Yes @shilman - मैं मूल रूप से अभी CRA चला रहा हूँ, तो sb init: https://github.com/jetbridge/create-react-app/pull/1/files#diff -0ae46a2383dedcac5e5e369f5ca5f5169R3535

कहानियाँ src / के अंदर हैं।

=> Found "[email protected]"
info Has been hoisted to "babel-loader"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "92KB"
info Disk size with unique dependencies: "520KB"
info Disk size with transitive dependencies: "1.28MB"
info Number of shared dependencies: 18
=> Found "jetbridge-react-scripts#[email protected]"
info This module exists because "jetbridge-react-scripts" depends on it.
info Disk size without dependencies: "76KB"
info Disk size with unique dependencies: "536KB"
info Disk size with transitive dependencies: "2.4MB"
info Number of shared dependencies: 29
=> Found "babel-preset-react-app#[email protected]"
info This module exists because "@storybook#react#babel-preset-react-app" depends on it.
info Disk size without dependencies: "1020KB"
info Disk size with unique dependencies: "1.45MB"
info Disk size with transitive dependencies: "3.32MB"
info Number of shared dependencies: 29

अगर मैं इसे निर्भरता से दूर करता हूं:

=> Found "[email protected]"
info Reasons this module exists
   - "jetbridge-react-scripts" depends on it
   - Hoisted from "jetbridge-react-scripts#babel-loader"
   - Hoisted from "@storybook#react#babel-preset-react-app#babel-loader"
info Disk size without dependencies: "92KB"
info Disk size with unique dependencies: "552KB"
info Disk size with transitive dependencies: "2.41MB"
info Number of shared dependencies: 29

ऐसा लगता है कि मैं एक प्रोजेक्ट में एक एन्कोडिंग फ़ोल्डर में एक अलग संस्करण था।

मैंने अपनी सभी कहानियों को ./stories/* से ./src/stories/* स्थानांतरित किया और अपने .storybook/config.js अपडेट किया और अब @storybook/[email protected] साथ काम कर रहा हूं। बस दूसरे दिन इसे सेट करने के बाद, डॉक्स / सेटअप गाइड React लिए एक ताज़ा सीआरए सेटअप के साथ आने वालों के लिए आउट-ऑफ-डेट होगा।

अन्यथा, निश्चित Otherwise देखने का मुद्दा

हाय सब, हाँ, कृपया अपने babel-loader को निकालना सुनिश्चित करें और यह देखने के लिए एक त्वरित स्पॉट चेक करें कि क्या यह कहीं और सूचीबद्ध है।

आप CRA को यह भी बता सकते हैं कि आप चाहें तो उस चेक को छोड़ दें, लेकिन यह सुरक्षा के लिए है ...

मैं अभी भी @ स्टोरीबुक / रिएक्ट 5.0.11 के साथ इस मुद्दे को ले रहा हूं और मास्टर से नवीनतम क्रिएट-रिएक्शन एप हूं।
समस्या यह है कि सीआरए बेबल-लोडर 8.0.5 चाहता है और sb init चल रहा है, मेरे पैकेजों में "babel-loader": "^8.0.6" जोड़ता है।
तो क्या बाबेल-लोडर सीआरए पहले से ही आवश्यक है और इसे जोड़ने का पता लगाने के बारे में क्या? या सिर्फ बाबेल-लोडर को जोड़ने के लिए छोड़ दें। इस मुद्दे के इतिहास के आधार पर, स्टोरीबुक और सीआरए के बीच दो सटीक संस्करणों को रखना किसी भी चीज़ का हल नहीं है।

कृपया मुझे वास्तव में मदद की ज़रूरत है।

मैं सब कुछ करने की कोशिश लेकिन काम enything।

`परियोजना निर्भरता के पेड़ के साथ एक समस्या हो सकती है।
यह संभवतः क्रिएट रिएक्ट ऐप में बग नहीं है, लेकिन आपको स्थानीय रूप से ठीक करने की आवश्यकता है।

क्रिएट रिएक्ट ऐप द्वारा प्रदान किए गए प्रतिक्रिया-स्क्रिप्ट पैकेज पर निर्भरता की आवश्यकता है:

"बैबल-लोडर": "8.0.5"

इसे मैन्युअल रूप से स्थापित करने का प्रयास न करें: आपका पैकेज प्रबंधक इसे स्वचालित रूप से करता है।
हालांकि, पेड़ में बबल-लोडर के एक अलग संस्करण का पता लगाया गया था:

c: \ Users \ Z-Dra \ नोड_modulesbabel-loader (संस्करण: 8.0.6)

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

यदि आप इस चेक को अनदेखा करना चाहते हैं, तो अपने प्रोजेक्ट में .ENV फ़ाइल में SKIP_PREFLIGHT_CHECK = true जोड़ें।
यह स्थायी रूप से इस संदेश को अक्षम कर देगा लेकिन आप अन्य मुद्दों का सामना कर सकते हैं।

निर्भरता के पेड़ को ठीक करने के लिए, सटीक क्रम में नीचे दिए गए चरणों का पालन करें:

1. अपने प्रोजेक्ट फ़ोल्डर में पैकेज- lock.json (नहीं package.json!) और / या यार्न को हटा दें।
2. अपने प्रोजेक्ट फ़ोल्डर में node_modules हटाएं।
3. अपने प्रोजेक्ट फ़ोल्डर में पैकेज.जसन फ़ाइल में निर्भरता और / या अवमूल्यन से "बेबल-लोडर" निकालें।
4. आपके द्वारा उपयोग किए जाने वाले पैकेज मैनेजर के आधार पर, npm इंस्टॉल या यार्न चलाएं।

ज्यादातर मामलों में, यह समस्या को ठीक करने के लिए पर्याप्त होना चाहिए।
अगर इससे मदद नहीं मिली है, तो कुछ अन्य चीजें हैं जिन्हें आप आजमा सकते हैं:

1. यदि आपने npm का उपयोग किया है, तो यार्न स्थापित करें (http://yarnpkg.com/) और इसके साथ उपरोक्त चरणों को दोहराएं।
   यह मदद कर सकता है क्योंकि npm ने पैकेज उत्थापन के साथ मुद्दों को जाना है जो भविष्य के संस्करणों में हल हो सकते हैं।

2. जांचें कि क्या c: \ Users \ Z-Dra \ नोड_modulesbabel-loader आपकी परियोजना निर्देशिका के बाहर है।
   उदाहरण के लिए, आपने गलती से अपने होम फोल्डर में कुछ स्थापित कर लिया होगा।

3. अपने प्रोजेक्ट फ़ोल्डर में npm ls babel-loader चलाने का प्रयास करें।
   यह आपको बताएगा कि कौन सा अन्य पैकेज (अपेक्षित प्रतिक्रिया-स्क्रिप्ट के अलावा) बेबल-लोडर स्थापित है।

यदि कुछ और मदद नहीं करता है, तो अपनी परियोजना में एक .env फ़ाइल में SKIP_PREFLIGHT_CHECK = true जोड़ें।
यदि आप किसी भी तरह से आगे बढ़ना चाहते हैं, तो यह इस प्रीफ़्लाइट चेक को स्थायी रूप से अक्षम कर देगा।

पुनश्च हम जानते हैं कि यह संदेश लंबा है, लेकिन कृपया ऊपर दिए गए चरणों को पढ़ें :-) हमें उम्मीद है कि आप उन्हें उपयोगी पाएंगे!

npm ईआरआर! कोड ELIFECYCLE
npm ईआरआर! गलत 1
npm ईआरआर! [email protected] प्रारंभ: react-scripts start
npm ईआरआर! स्थिति से बाहर निकलें 1
npm ईआरआर!
npm ईआरआर! [email protected] प्रारंभ स्क्रिप्ट में विफल।
npm ईआरआर! यह शायद npm के साथ कोई समस्या नहीं है। ऊपर अतिरिक्त लॉगिंग आउटपुट होने की संभावना है।

npm ईआरआर! इस रन का एक पूर्ण लॉग इन में पाया जा सकता है:
npm ईआरआर! C: \ Users \ जेड नाटकीय \ AppData \ रोमिंग \ NPM-cache_logs \ 2019-05-29T12_53_58_726Z-debug.log`

कृपया कोई मेरी मदद कर सकता है?

मुझे पता है कि मेरे घर निर्देशिका पर babel-loader 8.0.6 विश्व स्तर पर स्थापित है /home/user/node_modules , इसलिए मेरी परियोजना निर्देशिका के तहत बाबेल-लोडर 8.0.5 स्थापित किया गया था, इसलिए मैं अपने घर पर npm remove babel-loader निकालता हूं निर्देशिका (8.0.6), सभी ठीक काम से।

यह एक गूंगा सवाल है, लेकिन मुझे यकीन है ...
यदि मैं टाइपस्क्रिप्ट का उपयोग कर रहा हूं, तो मुझे किस चीज की आवश्यकता है?

धन्यवाद @shilman , लेकिन पूर्व-रिलीज़ को बेबल-लोडर समस्या ठीक नहीं लगती है।

उठाए गए कदम:

1. नवीनतम टाइपस्क्रिप्ट सत्यापन स्थापित करें। CRA (प्रतिक्रिया-स्क्रिप्ट 3.0.1) npx create-react-app my-app --typescript
2. npx -p @storybook/cli sb init --type react
3. Https://storybook.js.org/docs/configurations/typescript-config/ & डेमो https://github.com/johot/storybook4-cra2-cypescript-docgen-typescript-demo में निर्देशों का उपयोग करके TS के लिए स्टोरीबुक कॉन्फ़िगर
4. yarn.lock और नोड मॉड्यूल फ़ोल्डर हटाएँ।
5. Package.json से @babel/core & babel-loader देव प्रतिनियुक्ति निकालें
6. yarn add -D @storybook/react@next
7. yarn
8. yarn storybook - त्रुटि: Cannot find module 'babel-loader'

Package.json deps:

  "dependencies": {
    "@types/jest": "24.0.13",
    "@types/node": "12.0.4",
    "@types/react": "16.8.19",
    "@types/react-dom": "16.8.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "styled-components": "^4.2.1",
    "typescript": "3.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5", // I added this back the first time I got babel-loader missing error, but this still doesn't solve it.
    "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-info": "^5.0.11",
    "@storybook/addon-links": "^5.0.11",
    "@storybook/addons": "^5.0.11",
    "@storybook/react": "^5.1.0-rc.3",
    "@testing-library/react": "^8.0.1",
    "@types/storybook__addon-actions": "^3.4.2",
    "@types/storybook__addon-info": "^4.1.1",
    "@types/storybook__addon-links": "^3.3.4",
    "@types/storybook__addons": "^4.1.0",
    "@types/storybook__react": "^4.0.1",
    "husky": "^2.3.0",
    "jest-dom": "^3.4.0",
    "lint-staged": "^8.1.7",
    "prettier": "^1.17.1",
    "react-docgen-typescript-loader": "^3.1.0"
  },

टाइपस्क्रिप्ट के बिना बेसिक सेटअप मेरे लिए भी काम नहीं करता है

1. npx create-react-app my-app
2. cd my-app
3. npx -p @storybook/cli sb init --type react

CRA "babel-loader": "8.0.5" अपेक्षा करता है लेकिन 8.0.6 पाता है। हालांकि सूचीबद्ध packages.json निम्नलिखित सूचीबद्ध निर्भरताएँ:

  "devDependencies": {
    "@storybook/react": "^5.0.11",
    "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-links": "^5.0.11",
    "@storybook/addons": "^5.0.11",
    "@babel/core": "^7.4.5",
    "babel-loader": "^8.0.6"
  }

संस्करण को "babel-loader": "8.0.5" सेट करना इस समस्या को हल करता है।

इसके अलावा, मेरे पास एक अन्य परियोजना में एक समान मुद्दा है जहां CRA (3.0.1) "webpack": "4.29.6" अपेक्षा करता है लेकिन 4.32.2 पाता है। यह package.json अंदर मेरे भरोसेमंद में परिभाषित नहीं है
npm ls webpack शो:

+-- @storybook/[email protected]
| +-- @storybook/[email protected]
| | `-- [email protected]  deduped
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
`-- [email protected]
  `-- [email protected]  deduped

[email protected] वेबपैक का एक नया संस्करण प्रदान करता है, लेकिन CRA एक पुराना संस्करण चाहता है।
निर्भरता में [email protected] जोड़ना इसे ठीक करता है। यकीन नहीं हो रहा है कि यह एक कहानी के साथ मुद्दा है तू ।।

@vipyoshi एक जोड़ी टिप्पणी:

• आपको --type react पास नहीं करना चाहिए। इसके बजाय CRA टेम्पलेट का उपयोग करें।
• यह नवीनतम संस्करण @storybook/cli@next में तय किया गया है और हम इसे अगले 24 घंटों में स्थिर कर रहे हैं।

यदि मैं टाइपस्क्रिप्ट का उपयोग कर रहा हूं तो गंभीरता से बाबेल की आवश्यकता क्यों है?

नवीनतम संस्करण के साथ @shilman @mrmckeb :

"@storybook/addon-actions": "^5.1.1",
"@storybook/addon-links": "^5.1.1",
"@storybook/addons": "^5.1.1",
"@storybook/react": "^5.1.1",

JSX सिंटैक्स .storybooks/config.js और start-storybook सिंटैक्स त्रुटि (पहले < ) के साथ विफल नहीं होता है।

बेबल-लोडर स्थापित होने के पिछले वर्कअराउंड का उपयोग करना लेकिन CRA के साथ सिंक में संस्करण ठीक काम करता है।

मैंने यह जांचने की कोशिश की कि क्या CRA कुछ फोल्डरों में babel-preset-react का उपयोग करता है, लेकिन कहीं नहीं मिला।

संदर्भ के लिए, मैं CRA 3.0.1 का उपयोग कर रहा हूं और इसे अस्वीकार नहीं किया है।

और क्या मुद्दा हो सकता है (क्या मुझे एक को खोलना चाहिए)?
मैं आपकी कैसे मदद कर सकता हूँ?

_{पुनश्च: मैं btw वैश्विक शैलियों के लिए एक सज्जाकार का उपयोग कर रहा हूँ।}

JSX सिंटैक्स को .storybooks / config.js में रूपांतरित नहीं किया जाता है और सिंटैक्स त्रुटि (पहले <) पर स्टार्ट-स्टोरीबुक विफल हो जाती है।

@ rlecaro2 यहाँ एक ही मुद्दा है!

ERROR in ./.storybook/config.js
Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/.../Documents/pro/workshop/workshop-atomic-design/.storybook/config.js: Unexpected token (9:34)

>  9 | const themeDecorator = storyFn => <ThemeProvider theme={Theme}>{ storyFn() }</ThemeProvider>
     |                                   ^
  10 | addDecorator(themeDecorator);
  11 | configure(loadStories, module);

(बबेल-लोडर को v8.0.5 देव-निर्भरता में घोषित करना भी उस समस्या को ठीक करता है)

@revmischa Babel यह है कि आप टाइपस्क्रिप्ट का उपयोग कैसे कर सकते हैं। TS टीम दो रास्ते देती है - टाइपस्क्रिप्ट कंपाइलर या एक बैबल प्लगइन।

@ rlecaro2 और @Akaryatrh , हमने कुछ महीने पहले एक बदलाव किया था, जहां नवीनतम स्टोरीबुक रिलीज में, CRA के साथ बैबल-लोडर स्थापित नहीं किया गया है, और इसके बजाय CRA के भीतर से पाया जाता है।

जैसा कि मैं इसे समझता हूं, आपके पास कोई समस्या नहीं है - इस तथ्य के अलावा कि .storybook भीतर फ़ाइलों को सही तरीके से संसाधित नहीं किया जा रहा है। ऐसा इसलिए है क्योंकि Create React App का कॉन्फिग सोर्स के बाहर मौजूद फाइलों को नजरअंदाज कर देता है।

हम अंदर टाइपप्रति के लिए अनुमति देने के लिए एक छोटा सा परिवर्तन किया .storybook निर्देशिका यहां , और config के बाकी के लिए एक ही कर सकता है। मुझे लगता है कि आप दोनों टाइपस्क्रिप्ट का उपयोग नहीं कर रहे हैं, यही वजह है कि यह फिक्स आपके लिए काम नहीं कर रहा है।

मैं थोड़ा उलझन में हूँ कि क्यों devDependencies फिक्स काम करता है ... मुझे लगता है कि यह भी जांच की जरूरत है।

यह भी ध्यान दें कि यह एक नया मुद्दा है, ऊपर से संबंधित नहीं है। जैसा कि यहां टिप्पणियां सभी उपयोगकर्ताओं को सचेत करती हैं, मैंने यहां एक नया टिकट बनाया है: # 7201। कृपया वहां विवरण जोड़ें।

महान! मैं यह पता लगाने की कोशिश करूंगा कि देव निर्भरता का काम क्या है। बस किसी और के लिए, मुद्दा # 7201 (मामूली टाइपो) है।

@ ramonex1

मेरे लिए हां यह सिर्फ एक बेवकूफी है।

यह मेरे फ़ोल्डर में एक और नोड मॉड्यूल है

यह अभी भी मेरे लिए काम नहीं कर रहा है, मैंने इस मुद्दे को एक गुच्छा के आसपास देखा है, लेकिन यह तय करने के लिए कोई निश्चित निर्धारण / अपग्रेड पथ या दिशानिर्देश नहीं मिल सकता है कि कैसे ठीक करें।

FYI करें हमें @mrmckeb से आने वाले CRA समर्थन पर कुछ गेम-चेंजिंग का काम

मैं भी इसी मुद्दे का सामना करता हूं, और इसे भी तय करता हूं। मेरे प्रोजेक्ट का नाम 'idash2' है और मैं इसे स्थापित करता हूं

कोड / वेब / दृश्यपटल / idash2

लेकिन समस्या यह है कि मैंने गलती से इस निर्देशिका पर नोड_मॉड्यूल स्थापित किया है

कोड / वेब / दृश्यपटल

कोड / वेब / फ्रंटएंड / नोड_मॉडल को हटाने और पुन: प्रतिक्रिया एप्लिकेशन को फिर से स्थापित करने के बाद, समस्या हल हो गई।

इस समाधान के लिए श्रेय: परिन्या ओनसुवान

मुझे वही समस्या हो रही है और काम करने के लिए कुछ भी नहीं लगता है ... क्या इस मुद्दे का स्थायी समाधान है?

@isenese मेरा मानना ​​है कि यह https://www.npmjs.com/package/@storybook/preset -create-react-app का हिस्सा है या जल्द ही होगा

@ रायसेन , माफ करना मैं हाल ही में एक्शन से बाहर हो गया हूं।

यह स्टोरीबुक के नए संस्करणों में हल किया गया है, या कम से कम होना चाहिए - कृपया संस्करण विवरण प्रदान करें यदि आप अभी भी इसका सामना कर रहे हैं और हम मदद कर सकते हैं।

नमस्कार, मैं एक CRA उपयोगकर्ता हूं और इस समस्या का सामना तब किया जब मैंने रिएक्ट के लिए दस्तावेज़ में वर्णित निम्न कमांड द्वारा स्टोरीबुक को इनिशियलाइज़ किया।

npx -p @storybook/cli sb init --type react

फिर, मैंने निम्नलिखित के साथ आरंभ करके समस्या को ठीक किया।

npx -p @storybook/cli sb init --type react_scripts

(और --type विकल्प के बिना स्वचालित पहचान भी सफल रही। शांत!)

मुझे लगता है कि यह प्रलेखन की कमी है और इस तरह की गलतियाँ हो सकती हैं।
कृपया प्रतिक्रिया पृष्ठ के --type react_scripts बारे में स्पष्टीकरण जोड़ें या CRA के लिए एक अलग ट्यूटोरियल बनाएं।

धन्यवाद!

हम CRA के लिए एक नए प्रीसेट का परीक्षण भी कर रहे हैं, जो CRA के लिए अंतर्निहित प्रीसेट की जगह लेगा। इससे भविष्य का सेट-अप आसान हो जाना चाहिए।

नमस्कार, मैं एक CRA उपयोगकर्ता हूं और इस समस्या का सामना तब किया जब मैंने रिएक्ट के लिए दस्तावेज़ में वर्णित निम्न कमांड द्वारा स्टोरीबुक को इनिशियलाइज़ किया।

npx -p @storybook/cli sb init --type react

फिर, मैंने निम्नलिखित के साथ आरंभ करके समस्या को ठीक किया।

npx -p @storybook/cli sb init --type react_scripts

(और --type विकल्प के बिना स्वचालित पहचान भी सफल रही। शांत!)

मुझे लगता है कि यह प्रलेखन की कमी है और इस तरह की गलतियाँ हो सकती हैं।
कृपया प्रतिक्रिया पृष्ठ के --type react_scripts बारे में स्पष्टीकरण जोड़ें या CRA के लिए एक अलग ट्यूटोरियल बनाएं।

धन्यवाद!

आपको बहुत - बहुत धन्यवाद! मैं इसके साथ केले जा रहा था।

धन्यवाद दोस्तों, मैं उस प्रलेखन को अद्यतन करने के लिए एक नोट करूँगा।

@mrmckeb अभी भी एक ही समस्या में चल रहा है (CRA 3.3 + स्टोरीबुक 5.2.8) और डॉक्स में react_scripts फ्लैग के बारे में कुछ भी नहीं पाया जा सकता है - यह बहुत अच्छा होगा कि इसे अन्य लोगों के पास जाने की आवश्यकता न पड़े। जीएच मुद्दों के माध्यम से इसे खोजने के लिए ... find

@aericson , असुविधा के लिए खेद है। मैं आज देखूंगा।

ध्यान दें, यह उन्नत कॉन्फ़िगरेशन में है। इसे कहते हैं:

आपने स्टोरीबुक के लिए अपने प्रोजेक्ट को सेटअप करने के लिए हमारे क्विक स्टार्ट गाइड का उपयोग करने की कोशिश की होगी। यदि यह विफल हो गया क्योंकि यह पता नहीं लगा सका कि आप रिएक्ट का उपयोग कर रहे हैं, तो आप इसे रिएक्ट का उपयोग करने के लिए मजबूर कर सकते हैं।

मैं CRA का भी उल्लेख करने के लिए अद्यतन करूँगा।

@mrmckeb मुझे लगता है कि यह केवल खोजने के बारे में अधिक है

npx -p @storybook/cli sb init --type react

लेकिन नहीं

npx -p @storybook/cli sb init --type react_scripts

डॉक्स में जब देख रहे हैं:

• https://storybook.js.org/docs/guides/quick-start-guide/
• https://storybook.js.org/docs/guides/guide-react/

इसलिए आपको लगता है कि जब आपके पास CRA रेपो है तो आप --type react का उपयोग करके सब कुछ सही कर रहे हैं।

--type react का उपयोग करके Cannot find module 'babel-jest' त्रुटियाँ हुईं - --type react_scripts बॉक्स से बाहर काम कर रहा है।

समझ गए, और डॉक्स अब @pkyeck अपडेट किए

मुझे लगता है कि कुल मिलाकर, डॉक्स का वह हिस्सा स्पष्ट होना चाहिए ... मुझे आशा है कि # 9182 में संशोधन है। @ शिल्मैन जल्द ही रिलीज होगा मुझे लगता है।

जब आपके पास package.json पर बैबल-लोडर है, तो आप एप्लिकेशन का निर्माण नहीं कर सकते। सबसे अच्छा समाधान जो मुझे मिला है:
`

"भक्ति"
"@ बेबल / कोर": "^ 7.12.3",
"@ स्टोरीबुक / एडऑन-एक्शन": "^ 6.0.28",
"@ स्टोरीबुक / एडऑन-एसेंस": "^ 6.0.28",
"@ स्टोरीबुक / एडऑन-लिंक": "^ 6.0.28",
"@ स्टोरीबुक / नोड-लॉगर": "^ 6.0.28",
"@ स्टोरीबुक / प्रीसेट-क्रिएट-रिएक्शन-ऐप": "^ 3.1.5",
"@ स्टोरीबुक / प्रतिक्रिया": "^ 6.0.28",
"@ परीक्षण-पुस्तकालय / डोम": "^ 7.26.5",
"@ परीक्षण-पुस्तकालय / प्रतिक्रिया-हुक": "^ 3.4.2",
"@ प्रकार / प्रतिक्रिया": "^ 16.9.56",
"@ प्रकार / प्रतिक्रिया-डोम": "^ 16.9.9",
"@ प्रकार / स्टाइल-घटक": "^ 5.1.4",
"बेबल-लोडर": "8.1.0",
"बेबेल-एस्लिंट": "^ 10.1.0",
"एस्लिंट-कॉन्फिग-प्रीटीयर": "^ 6.14.0",
"एस्लिन-कॉन्फिग-रिएक्ट-ऐप": "^ 5.2.1",
"एस्लिंट-इम्पोर्ट-रिज़ॉल्वर-टाइपस्क्रिप्ट": "^ 2.3.0",
"एस्लिंट-प्लगइन-फ्लो टाइप": "^ 4.7.0",
"एस्लिन-प्लगइन-आयात": "^ 2.22.1",
"एस्लिन्ट-प्लगइन-जेएक्सएक्स-ए 11 वाई": "^ 6.3.1",
"एस्लिंट-प्लगइन-प्रीटीयर": "^ 3.1.4",
"एस्लिन-प्लगइन-रिएक्शन": "^ 7.21.5",
"एस्लिन-प्लगइन-रिएक्शन-हुक": "^ 4.2.0",
"jest-environment-jsdom-सोलह": "^ 1.0.3",
"जेस्ट-स्टाइल-कम्पोनेंट्स": "^ 7.0.3",
"json-server": "^ 0.16.2",
"msw": "^ 0.21.3",
"प्रेटियर": "^ 2.1.2",
"प्रतिक्रिया-डोकगेन-टाइपस्क्रिप्ट-प्लगइन": "^ 0.6.0",
"प्रतिक्रिया-है": "^ 17.0.1",
"प्रतिक्रिया-परीक्षण-रेंडरर": "^ 17.0.1"
},
"संकल्प": {
"" और प्रतिक्रिया-स्क्रिप्ट / / बेबल-लोडर ":" ^ 8.1.0 "
}

`

बाबेल-लोडर के समान उपयोग का उपयोग करके रिज़ॉल्यूशन रिज़ॉल्यूशन।

इस बात की पुष्टि करते हुए कि यह अभी भी एक नवीनतम संस्करण है जिसके साथ जीव-प्रतिक्रिया-ऐप और स्टोरीबुक के नवीनतम संस्करण हैं।

संपादित करें: create-react-app एक गलत बेबल-लोडर संस्करण के बारे में शिकायत करेगा node_modules में। मैं yarn add -D --exact [email protected] का उपयोग करके समस्या को हल करने में सक्षम था, जो कि वह संस्करण था जिसे CRA की आवश्यकता थी।

क्या मैं इस बात की पुष्टि कर सकता हूं कि क्या हम इस मुद्दे को फिर से खोल सकते हैं? मैं वास्तव में अपने पैकेज में बैबेल-लोडर को शामिल नहीं करना चाहता हूं यदि मैं इसे स्वयं का उपयोग नहीं कर रहा हूं?
मैं हालांकि @DylanCulfogienis फिक्स कार्यों की पुष्टि कर सकता हूं!

अब हम CRA ऐप्स में बैबल-लोडर इंस्टॉल नहीं करते हैं, इसलिए मुझे नहीं लगता कि हमें इस मुद्दे को दोबारा खोलने की जरूरत है @eglavin

क्या यह अभी भी आपके लिए एक नई स्थापना पर विफल है?

यहाँ एक ही मुद्दा है

अब हम CRA ऐप्स में बैबल-लोडर इंस्टॉल नहीं करते हैं, इसलिए मुझे नहीं लगता कि हमें इस मुद्दे को दोबारा खोलने की जरूरत है @eglavin

क्या यह अभी भी आपके लिए एक नई स्थापना पर विफल है?

यहाँ एक ही मुद्दा, अगर आपके ऐप को स्टोरीबुक के साथ चलाने की आवश्यकता है तो आपको अभी भी babel-loader शामिल करने की आवश्यकता है।

बैबल-लोडर पहले से ही सीआरए में शामिल है और स्टोरीबुक बस उस एक का उपयोग कर सकता है। नहीं?

यह अभी भी नवीनतम CRA / SB संस्करणों (4.0.1 और 6.1.18, क्रमशः इस लेखन के समय) की ताजा इंस्टॉल पर एक मुद्दा है।

एसबी v6.1 के साथ CRA v4 को स्थापित करने पर भी इसमें भाग लिया:

यहां भी यही समस्या है: रिएक्ट 4.0.1 और

yarn install @storybook/react 

front  | There might be a problem with the project dependency tree.
front  | It is likely not a bug in Create React App, but something you need to fix locally.
front  | The react-scripts package provided by Create React App requires a dependency:
front  |   "babel-loader": "8.1.0"
front  | Don't try to install it manually: your package manager does it automatically.
front  | However, a different version of babel-loader was detected higher up in the tree:
front  |   /path/to/front/node_modules/babel-loader (version: 8.2.2) 

पुनश्च: क्या हमें एक नया मुद्दा खोलना चाहिए क्योंकि यह एक ही समस्या के विभिन्न संस्करण की चिंता करता है?

बहुत धन्यवाद @DylanCulfogienis , आपने मेरा दिन बचाया !! मैं स्टोरीबुक को हटाने और स्थापित करने के लिए घंटों खर्च करता हूं और यहां तक ​​कि पकड़ नोड_मॉड्यूल फिर से और एगियन, और yarn add -D --exact [email protected] काम किया!

मेरे पास एक मोनोरपो है और मैंने ऊपर (8.1.0) के रूप में babel-loader अपने रिएक्ट web पैकेज में जोड़ा है। इसने babel-loader त्रुटि का समाधान किया लेकिन नई त्रुटियां पैदा कीं:

../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2982,14): error TS2300: Duplicate identifier 'LibraryManagedAttributes'.
../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2995,13): error TS2717: Subsequent property declarations must have the same type.  Property 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2996,13): error TS2717: Subsequent property declarations must have the same type.  Property 'abbr' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2997,13): error TS2717: Subsequent property declarations must have the same type.  Property 'address' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.

मैं @types/react-dom के संस्करण को "17.0.0" में अपग्रेड करके इसे हल करने में सक्षम था।

आधे दिन की लड़ाई के बाद @DylanCulfogienis समाधान ने इसे मेरे लिए भी तय किया। Https://github.com/storybookjs/storybook/issues/12408 से एक और कमांड यहाँ लिपट गया है, लेकिन यह सेटअप है जो मुझे मिल रहा है:

# Create project
npx create-react-app my-project
cd my-project

# Add Storybook:
npx -p @storybook/cli sb init

# Update Storybook
npx sb<strong i="8">@next</strong> upgrade --prerelease

# Fix babel error
yarn add -D --exact [email protected]

# Start app
yarn start

# Start Storybook
yarn storybook

# 4764 को डुप्लिकेट