Storybook: त्रुटि: निर्यात परिभाषित नहीं है

मुझे टर्मिनल में export 'MatrixEffect' was not found in '../dist/index' मिल रहा है। लेकिन मैं मॉड्यूल को केवल एक सादे नोड रनटाइम में आयात कर सकता हूं (इसका उपयोग नहीं कर सकता, लेकिन कम से कम मुझे पता है कि इसे आयात किया जा सकता है)।

यह मदद कर सकता है क्योंकि हमारे पास अभी तक आधिकारिक दस्तावेज़ नहीं हैं: https://github.com/storybooks/storybook/issues/3270

यह अभी भी काम नहीं कर रहा है ...

लर्न प्रोजेक्ट में यार्न वर्कस्पेस चालू करने के बाद मैं एक स्टोरीबुक में एक ही त्रुटि संदेश के साथ एक समस्या में भाग गया। मुझे संदेह है कि यह पैकेज लोडिंग मुद्दों के कारण होता है। आगे की जांच कर रहे हैं।

ऐसा लगता है कि मेरे पास एक ही समस्या है।

अगर मैं समस्या को ठीक से समझता हूं, तो .js से .ts फ़ाइलों को हल करने में कोई समस्या है? (हालांकि, मुझे समझ में नहीं आता कि आप अपने घटक को dist से क्यों आयात कर रहे हैं)

हो सकता है कि आपको अपनी विस्तारित स्टोरीबुक webpack.config में .ts / .tsx को resolve.extensions में जोड़ना चाहिए?

@ इगोर-डीवी नहीं, मैं जेएस का उपयोग करता हूं। वैसे भी, परिवर्तनीय पहचानकर्ता ( variable से Variable ) बदलना, किसी भी तरह काम करता है।

मुझे टाइपस्क्रिप्ट का उपयोग किए बिना यह त्रुटि मिल रही है, बस वेनिला जेएस

मैंने .storybook फ़ोल्डर में webpack.config.js से बेबेल लोडर को हटा दिया और यह अब ठीक काम करता है। हालांकि मैं टाइपस्क्रिप्ट का उपयोग नहीं करता।

मैं इसमें भाग रहा हूं, ब्राउज़र में मुझे exports is not defined मिलता है लेकिन टर्मिनल में मुझे `"निर्यात 'डिफ़ॉल्ट' ('[कंपोनेंटनाम]' के रूप में आयात किया जाता है) '@ [नामस्थान]/[ में नहीं मिला पैकेज का नाम]'"

• लर्न का उपयोग करना
• स्टोरीबुक 3.4.7
• मेरे घटकों के लिए सब कुछ ठीक है जिसमें कोई आंतरिक निर्भरता नहीं है
• अगर मैं project/packages में किसी अन्य पैकेज पर निर्भरता वाले मॉड्यूल को आयात करने का प्रयास करता हूं तो त्रुटि दिखाई देती है
• मैं अपनी बिल्ड स्क्रिप्ट चला रहा हूं, इसलिए यह पैकेज के एक सामान्य-जेएस संस्करण को खींचने की कोशिश कर रहा है।

अगर मैं आंतरिक निर्भरता के package.json मुख्य कॉन्फ़िगरेशन को गैर-निर्मित स्रोत में बदलता हूं तो सब कुछ काम करता है

तो स्टोरीबुक के वेबपैक कॉन्फिगरेशन में कुछ गड़बड़ है और cjs को es मॉड्यूल कोड में आयात करना, या कुछ और ...

मेरा फिक्स

इसलिए मुझे एहसास हुआ कि मैंने गलती से अपना package.json "मॉड्यूल" फ़ील्ड हटा दिया है जो मेरे बिल्ड के ES मॉड्यूल संस्करण की ओर इशारा करता है, इसे वापस जोड़ने से सब कुछ फिर से काम करता है। अभी भी ऐसा लगता है कि स्टोरीबुक सीजेएस संस्करण को खींचने में सक्षम होना चाहिए, लेकिन मेरी समस्या हल हो गई है 🤷🏽‍♂️

यह अभी भी मेरे लिए v4.0.0-alpha.20 में बेबेल 7.0.0 . के साथ हो रहा है

यहाँ वही @tony। हालांकि, मैं फ्लो का उपयोग कर रहा हूं।

@ryanflorence मेरे पास एक ही लर्न सेटअप और स्टोरीबुक के लिए निर्यात मुद्दा है।
मेरे पास एक पैकेज है जो यूआई-एलिमेंट्स के निर्मित संस्करण को उजागर करता है।
क्षमा करें, लेकिन जब आप "module" field that pointed to the ES module version of my builds, adding that back in makes everything work again. . कहते हैं तो क्या आप अधिक विवरण प्रदान कर सकते हैं

.babelrc फ़ाइल में सही प्लगइन जोड़कर इस समस्या को ठीक किया जा सकता है, क्योंकि tsconfig फ़ाइल को commonjs संगत मॉड्यूल उत्पन्न करने के लिए कॉन्फ़िगर किया गया है, हमें उचित प्लगइन का उपयोग करने की आवश्यकता है

{
    "env": {
        "test": {
            "plugins": ["instanbul"]
        }
    },
    "plugins": ["@babel/plugin-syntax-dynamic-import", "@babel/plugin-transform-modules-commonjs"]
}

मेरी .babelrc फ़ाइल में यही है और सब कुछ ठीक काम कर रहा है, मेरे पास मेरी tsconfig फ़ाइल बिल्कुल समान विकल्पों और मूल्यों के साथ है।

"@babel/core" "^ 7.1.0"
"@storybook/react" ^4.0.0-alpha.2"
"react" "^16.4.0"

नोट: यह समाधान अन्य प्रकार के मॉड्यूल के लिए काम करता है https://babeljs.io/docs/en/next/plugins#modules

मेरे लिए समस्या 4.0.0.alpha में बेबेल-लोडर को शामिल करने के लिए हाल के परिवर्तनों के कारण हुई है। डिफ़ॉल्ट सर्वर वेबपैक कॉन्फिगरेशन में आपके कॉमनज कंपाइल (पैकेज, वर्कस्पेस) शामिल हो सकते हैं:
https://github.com/storybooks/storybook/blob/b2b73596f9dd97b4ba8c03340bd36f868e836772/lib/core/src/server/config/utils.js#L3

मेरे लिए, एक कस्टम webpack.dev.js के साथ घोषित डिफ़ॉल्ट प्लगइन को ओवरराइड करना एक फिक्स है:

https://github.com/psychobolt/react-rollup-boilerplate/blob/d9cb9179cb7c00baab486646c504110bf7e2f50a/.storybook/webpack.config.js#L7

// exclude 'babel-loader' so we can override it later
...defaultConfig.module.rules.filter(rule => !(
    (rule.use && rule.use.length && rule.use.find(({ loader }) => loader === 'babel-loader'))
)),

https://github.com/psychobolt/react-rollup-boilerplate/blob/d9cb9179cb7c00baab486646c504110bf7e2f50a/.storybook/webpack.config.js#L11

{
  test: /\.jsx?$/,
  include: require('path').resolve('./'),
  exclude: /(node_modules|dist)/, // exclude any commonjs files
  loader: 'babel-loader',
},

include को छोड़ने से भी समस्या ठीक हो जाती है और मेरे लिए इसका कोई साइड इफेक्ट नहीं है।

मुझे लगता है कि मैं समझता हूं कि क्या हो रहा है।

@psychobolt जो कह रहा है वह 100% सही है।

मुझे लगता है कि हम मोनोरेपो उपयोगकर्ताओं के लिए बेहतर कर सकते हैं, हमारी डिफ़ॉल्ट वेबपैक कॉन्फ़िगरेशन बनाएं ताकि उपरोक्त न हो।

मुझे लगता है कि include: includePaths, को हटाने से यह हो जाएगा, लेकिन सवाल यह है कि प्रदर्शन लागत पर क्या है ..

इसे सर्वोत्तम तरीके से हल करने के बारे में किसके पास अच्छा सुझाव है?

हम इस मुद्दे पर भी अड़ गए और यह पता लगाने के लिए कि यह क्या हो सकता है, इसे लड़ने में आधे दिन से अधिक का समय लगा। मैं

@cilice आपने इसे कैसे हल किया?

@0nn0 https://github.com/storybooks/storybook/issues/3346#issuecomment-425516669 इस सलाह का पालन करके :)

मैं Stotybook-4.1.4, Lerna प्रोजेक्ट, रिएक्ट 16.7.0, प्लेन JS के साथ एक ही समस्या कर रहा हूँ। स्टोरीबुक-4.0.12 . के साथ काम करता है

मुझे 4.1.4 पर एक ही त्रुटि थी, मैं 4.0.10 पर वापस आ गया हूं और ठीक काम करता है (कोई टाइपस्क्रिप्ट नहीं) बेबेल-वेबपैक

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

@psychobolt क्या आप एक उदाहरण कॉन्फ़िगरेशन प्रदान कर सकते हैं? धन्यवाद।

देखें https://github.com/storybooks/storybook/issues/3346#issuecomment -425516669

सुनिश्चित नहीं है कि यह किसी और की मदद करेगा, लेकिन हमने निम्नलिखित को चलाकर इस समस्या को ठीक किया:

npm i react-scripts -D

@skeet मुझे आश्चर्य हुआ कि स्टोरीबुक में संदेश क्यों था

info => Using base config because react-scripts is not installed.
info => Using default webpack setup based on "create-react-app".
info => Using base config because react-scripts is not installed.

तो, प्रतिक्रिया-स्क्रिप्ट स्थापित करने के बाद, अब यह कहता है

info => Loading create-react-app config.
info => Using default webpack setup based on "create-react-app".
info => Loading create-react-app config.

हमें कई बार exports is not defined समस्या का सामना करना पड़ा है और हमने पहले दूसरों द्वारा सुझाए गए बैबेल कॉन्फ़िगरेशन को ओवरराइड करके इसके आसपास काम किया है।

लेकिन, मैंने हाल ही में इस पर फिर से गौर करना शुरू किया और मैंने देखा कि डिफ़ॉल्ट जेएस नियम के लिए बहिष्कृत संपत्ति को एक पूर्ण पथ पर हल किया जा रहा था (नीचे जेनरेट किए गए वेबपैक कॉन्फ़िगरेशन का console.log() है):

{
  test: /\.(mjs|jsx?)$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        cacheDirectory: '.cache/storybook',
        presets: [
          [
            '@babel/preset-env',
            { shippedProposals: true, useBuiltIns: 'usage' }
          ],
          '@babel/preset-react',
          '@babel/preset-flow'
        ],
        plugins: [
          'babel-plugin-macros',
          '@babel/plugin-proposal-class-properties',
          [
            'babel-plugin-react-docgen',
            { DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES' }
          ]
        ]
      }
    }
  ],
  include: ['/Users/matt.hinchliffe/Project/'],
  exclude: ['/Users/matt.hinchliffe/Project/node_modules']
}

मैंने मान लिया था कि exclude संपत्ति एक RegExp होनी चाहिए, इसलिए मैंने सोचा कि यह अजीब लग रहा है! मुझे एहसास हुआ कि हमारी परियोजना की संरचना के कारण हमारे पास वास्तव में कई node_modules फ़ोल्डर्स हैं इसलिए मैंने इस लाइन को एक RegExp ( /node_modules/ ) में अपडेट करने का प्रयास किया - और इसे ठीक कर दिया!

यह ट्रांसपिलिंग मॉड्यूल से बचा जाता है जो पहले से ही ट्रांसपिल किया जा चुका है - और विशेष रूप से useBuiltins के विकल्प से बचा जाता है $ preset-env core-js पॉलीफ़िल्स को इंजेक्ट करने से ( useBuiltins विकल्प या सेटिंग को हटाकर) रनटाइम को लक्षित करने के लिए पर्यावरण जिसे किसी पॉलीफ़िल की आवश्यकता नहीं है, इस समस्या से बचने में भी मदद कर सकता है।)

तो खेल में कुछ अलग मुद्दे हैं जिसके परिणामस्वरूप यह समस्या होती है:

1. node_modules फ़ोल्डरों में निर्भरता को बेबेल द्वारा अनजाने में स्थानांतरित किया जा सकता है
2. useBuiltins विकल्प मॉड्यूल प्रकार के लिए गलत प्रारूप में आपके कोड में core-js पॉलीफ़िल को इंजेक्ट कर सकता है (देखें https://github.com/babel/babel/issues/7463 और https:// github.com/babel/babel/issues/9187)
3. यदि पैकेजों को सिम्लिंक किया जा रहा है (जैसे कि एक मोनोरेपो में) तो आपको बिंदु 1 से बचने के लिए अतिरिक्त सावधानी से चलना चाहिए!

दुर्भाग्य से मौजूदा बहिष्कृत विकल्प का विस्तार करना बहुत आसान नहीं है, लेकिन यह संभव है !

मैंने इस समस्या से बचने के तरीके के बारे में जानकारी के साथ एक कम परीक्षण केस बनाया है। यदि आवश्यक हुआ तो मैं बाबेल के साथ मामला दर्ज कराऊंगा।

https://github.com/i-like-robots/broken-webpack-bundle-test-case

हम स्टोरीबुक + लर्न + टाइपस्क्रिप्ट का उपयोग कर रहे हैं। हमारे लिए क्या हल किया गया था @i-like-robots को @psychobolt के साथ मिलाना:

module.exports = (baseConfig, env, config) => {
    config.module.rules = config.module.rules.filter(rule => !(
        (rule.use && rule.use.length && rule.use.find(({ loader }) => loader === 'babel-loader'))
    ));
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        loader: require.resolve('babel-loader'),
        options: {
            sourceType: 'unambiguous',
            presets: [['react-app', { flow: false, typescript: true }]],
        },

    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
};

हमारे पास एक ही समस्या है, जब आरयू इसे ठीक करने जा रहा है?

इस त्रुटि को नए सिरे से स्थापित करने पर प्राप्त करना। इसका कोई सुराग नहीं है कि इसका क्या कारण है (संभवतः .babelrc के बीच create-react-app के सेटअप और इस एक के बीच संघर्ष में?)

मैं .babelrc फ़ाइल में निम्न पंक्ति जोड़कर समस्या को ठीक करने में कामयाब रहा:

"sourceType": "unambiguous"

इस विकल्प के बारे में अधिक जानकारी: https://babeljs.io/docs/en/options#sourcetype
विश्वास करें कि यह विकल्प केवल Babel 7 और इसके बाद के संस्करण के साथ उपलब्ध है।

लोगों की समस्याओं को पूरी तरह से समझे बिना इस पर चलने के लिए (क्षमा करें!) - यहाँ मेरे वेबपैक कॉन्फिग से एक स्निपेट है जो इस मुद्दे के आसपास काम करता है, शायद एक सरल तरीके से:

  const babelLoader = storybookBaseConfig.module.rules[0];
  babelLoader.exclude.push(
    path.resolve('./lib/components/node_modules'),
    /* etc */
  );

@tmeasday क्या आप कृपया अपने सुझाव के बारे में विस्तार से बता सकते हैं - यानी उस कोड को कहां रखा जाए?

स्टोरीबुक कमाल की है, लेकिन यह त्रुटि रुक-रुक कर और भयानक रही है। मुझे कोई तुक या कारण नहीं मिल रहा है कि यह त्रुटि क्यों होने लगेगी। मैं घटकों के साथ इधर-उधर उपद्रव करूंगा और फिर उछाल दूंगा, सब कुछ बिना किसी वास्तविक बदलाव के काम करना शुरू कर देता है। लेकिन मैं अब एक घंटे के लिए यह काम करने की कोशिश में फंस गया हूं और मुझे अभी यह पता नहीं है कि यह क्यों टूटा हुआ है।

कृपया इस मुद्दे पर गौर करें जो कई लोगों को प्रभावित कर रहा है और एक शोस्टॉपर है।

मैंने निम्नलिखित वाली एक .storybook/weback.config.js फ़ाइल बनाकर समस्या का समाधान किया:

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
    // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    config.module.rules[0].use[0].options.sourceType = "unambiguous";

    return config;
};

ऐसा लगता है कि यह sourceType बेबेल मुद्दे पर उबलता है। मैंने एक .babelrc फ़ाइल जोड़ने का प्रयास किया (जैसा कि @ 0nn0 द्वारा सुझाया गया है), लेकिन ऐसा लगता है कि इसे संशोधित करने के बजाय संपूर्ण बेबेल कॉन्फ़िगरेशन को प्रतिस्थापित कर दिया गया है, जिससे और समस्याएं हो रही हैं।

@JasonTheAdms मैंने ऊपर लिखा कोड स्निपेट .storybook/webpack.config.js में जाएगा। मुझे लगता है कि यह वैसा ही है जैसा आपने किया है।

यहाँ मुझे लगता है कि क्या हो रहा है:

मुद्दा यह है कि सबप्रोजेक्ट्स के अंदर node_modules में फ़ाइलें (जैसे ./lib/components/node_modules ) बेबल द्वारा संकलित की जा रही हैं। वे फाइलें हैं जो पहले ही एनपीएम को भेज दी गई हैं और उन्हें संकलित करने की आवश्यकता नहीं है। कुछ मामलों में, यह भ्रमित करने वाले मुद्दों का कारण बनता है, हो सकता है कि बेबल फाइलों को कैसे पार्स करता है।

मेरा दृष्टिकोण केवल babel-loader को बताना है कि किसी भी फ़ाइल को किसी भी node_modules फ़ोल्डर के अंदर संकलित न करें। डिफ़ॉल्ट रूप से यह ./node_modules को अनदेखा कर देगा, इसलिए यह सबप्रोजेक्ट के node_modules के अंदर चीजों को संकलित करेगा । इसलिए मैं exclude सूची में कुछ पथ जोड़ता हूं।

आपका तरीका babel-loader को कॉन्फ़िगर करना है ताकि बेबेल के sourceType डिटेक्शन का उपयोग करके फ़ाइल को पार्स करने का तरीका बताया जा सके। यह मूल रूप से बेबेल गलत-पार्सिंग फ़ाइलों के आसपास काम करता है। हालांकि बेबेल अभी भी उन फाइलों पर चल रहा है जिन्हें संकलित करने की आवश्यकता नहीं है, इसलिए मुझे नहीं पता कि यह वही है जो आप चाहते हैं?

मैं एक विशेषज्ञ नहीं हूं इसलिए मेरे शब्दों को नमक के दाने के साथ लें, लेकिन मेरी समझ में इसी तरह के मुद्दों के माध्यम से काम किया गया है।

@skeet के सुझाव को लागू करने के बाद (https://github.com/storybooks/storybook/issues/3346#issuecomment-459308703) समस्या तब वापस आ गई जब मैंने एक पैकेज को कुछ अन्य लोगों की निर्भरता (सहकर्मी या देव नहीं) के रूप में संदर्भित करना शुरू किया। .

module फ़ील्ड को निर्भरता के package.json में डालकर @ryanflorence के फिक्स (https://github.com/storybooks/storybook/issues/3346#issuecomment-415982589) में काम किया।

   main: "dist/index.js",
+  module: "dist/index.js",

@tmeasday समझ गया। मैं इस मुद्दे पर अपना सिर लपेटना शुरू कर रहा हूं। क्या मुश्किल है कि, मेरी स्थिति में, मैं वास्तव में _do_ चाहता हूं कि यह बच्चे को node_modules संकलित करे क्योंकि यहीं पर मैं घटकों को स्वयं विकसित कर रहा हूं, इसे एक अलग पैकेज के रूप में मानता हूं।

मुझे लगता है कि @skeet का सुझाव, जैसा कि @jcousins-ynap द्वारा प्रतिध्वनित किया गया है, शायद यहां सबसे अच्छा समाधान है। हम नहीं चाहते कि स्टोरीबुक उप-पैकेजों को कैसे प्रबंधित किया जाए (यानी उनके नोड_मॉड्यूल को अनदेखा कर रहा है) पर यह धारणा बनाए। अगर कोई उप-मॉड्यूल नोड_मॉड्यूल संकलित नहीं करना चाहता था, तो संभवतः उन्होंने पैकेज निर्भरता को शुरू करने के लिए स्थापित नहीं किया होगा।

ऐसा लगता है कि सभी कॉमनजेएस बनाम ईएस 6 मॉड्यूल को पहचानने के लिए बेबेल + वेबपैक की क्षमता के लिए नीचे आते हैं, जो सही नहीं लगता है। उप-पैकेज के package.json में "module": फ़ील्ड जोड़ना स्पष्ट रूप से बेबेल को सूचित करता है कि पैकेज ES6 मॉड्यूल का उपयोग करता है, जो इस तक पहुंचने का सबसे सुरक्षित तरीका है।

इस पर ध्यान देने के लिए आपका धन्यवाद!

यहां भी झंकार करना चाहते हैं। स्टोरीबुक 5, बैबेल 7.4 (कोर-जेएस 3 के साथ), टाइपस्क्रिप्ट 3.4 और एक मोनोरेपो का उपयोग करना। इनमें से अधिकतर सुझावों ने 100% काम नहीं किया, लेकिन कुछ ऐसा हुआ जो मैंने महसूस किया। मोनोरपोस की प्रकृति यह है कि एक पैकेज दूसरे पैकेज से "निर्मित" फाइलों को आयात कर रहा है, स्रोत फाइलों से नहीं, जो कि एनपीएम रजिस्ट्री/नोड मॉड्यूल परत में सच है, लेकिन विकास में, काफी परेशान है। इसके आसपास जाने के लिए, मैंने वेबपैक उपनामों को परिभाषित किया जो lib/ से src/ को अग्रेषित किया, और सब कुछ बस काम किया, खासकर जब से सभी कोड अब ESNext/ESM है!

यहाँ हैक है:

glob.sync(path.join(__dirname, '../packages/*/package.json')).forEach(filePath => {
  const { name } = require(filePath);

  config.resolve.alias[`${name}$`] = `${name}/src`;
  config.resolve.alias[`${name}/lib`] = `${name}/src`;
});

और बैबेल + टीएस को काम करने के लिए, मैंने एक नया जोड़ने के बजाय मौजूदा बेबेल-लोडर को म्यूट करने का विकल्प चुना, क्योंकि मेरा स्थानीय बैबेल कॉन्फिगरेशन स्टोरीबुक के साथ 100% संगत नहीं है, लेकिन उनका अपना कॉन्फिगरेशन है।

const babelConfig = config.module.rules[0];

// Replace Flow with TypeScript
babelConfig.test = /\.(j|t)sx?$/;
babelConfig.exclude.push(/node_modules/);
babelConfig.use[0].options.sourceType = 'unambiguous';
babelConfig.use[0].options.presets[2] = require.resolve('@babel/preset-typescript');
babelConfig.use.unshift({ loader: require.resolve('react-docgen-typescript-loader') });

config.resolve.extensions.push('.ts', '.tsx');

module फ़ील्ड को हटाने के कारण भी यही समस्या थी।
बेबेल प्लगइन में @babel/plugin-transform-modules-commonjs जोड़ने से मदद मिली, जैसा कि इस टिप्पणी में वर्णित है: https://github.com/storybooks/storybook/issues/3346#issuecomment -423719241

@elado काम!

इससे भी पूरी तरह से स्तब्ध। पिछले ~ 2 दिनों में इस धागे के सभी सुझावों के साथ-साथ मेरे अपने कुछ सुझावों का असफल प्रयास किया। कोई भी सफल नहीं था

अंत में, मुझे इसके साथ छोड़ दिया गया है:

WARNING in ./packages/one/src/index.jsx 2:289-293
"export 'default' (imported as 'Two') was not found in '@my-monorepo/two'
 @ ./packages/one/src/index.stories.jsx
 @ ./packages sync \.stories\.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

...स्टोरीबुक शुरू करते समय और...

index.js:49 ReferenceError: exports is not defined
    at react-is.development.js:18
    at Module../packages/one/node_modules/react-is/cjs/react-is.development.js (react-is.development.js:226)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../packages/one/node_modules/react-is/index.js (index.js:6)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../packages/one/node_modules/prop-types/index.js (index.js:9)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)

...स्टोरीबुक ui (http://localhost:9001) देखते समय। मेरी कहानियां लोड नहीं होती हैं।

fwiw, यहाँ मेरा सेटअप है:

├── .storybook/
│   ├── addons.js
│   ├── config.js
│   └── webpack.config.js
│
├── packages/
│   ├── one
│   │   ├── src/
│   │   │   ├── index.jsx
│   │   │   ├── index.stories.jsx
│   │   │   └── index.test.jsx
│   │   ├── dist/
│   │   │   ├── index.js
│   │   │   ├── index.stories.js
│   │   │   └── index.test.js
│   │   └── package.json
│   │
│   └── two
│       ├── src/
│       │   ├── index.jsx
│       │   ├── index.stories.jsx
│       │   └── index.test.jsx
│       ├── dist/
│       │   ├── index.js
│       │   ├── index.stories.js
│       │   └── index.test.js
│       └── package.json
│
├── .babelrc
├── .eslintrc.js
├── jest.config.js
├── lerna.json
├── npm-shrinkwrap.json
└── package.json

import '@storybook/addon-knobs/register';
import '@storybook/addon-backgrounds/register';
import '@storybook/addon-storysource/register';

import { configure } from '@storybook/react';

const req = require.context('../packages', true, /.stories.jsx$/);

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

configure(loadStories, module);

module.exports = {
    module: {
        rules: [
            {
                test: /\.stories\.jsx?$/,
                loaders: [require.resolve('@storybook/addon-storysource/loader')],
                enforce: 'pre'
            }
        ]
    }
};

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        "@babel/plugin-transform-modules-commonjs"
    ]
}

{
  "name": "my-monorepo",
  "description": "monorepo containing POC react ui component library",
  "version": "1.0.0",
  "author": "me",
  "scripts": {
    "postinstall": "npm run bootstrap",
    "bootstrap": "lerna bootstrap",
    "storybook": "npm run build && start-storybook --port 9001 --config-dir .storybook --ci",
    "test": "npm run lint && npm run test:unit",
    "test:unit": "npm run build && NODE_ENV=development BABEL_ENV=test jest --no-watchman",
    "test:unit:watch": "npm run test:unit -- --watch",
    "test:unit:snapshot": "npm run test:unit -- --updateSnapshot",
    "lint": "eslint . --ext .js,.jsx --ignore-path .gitignore",
    "lint:fix": "npm run lint -- --fix",
    "build": "npm run clean && lerna run build",
    "clean": "lerna run clean",
    "clean:modules": "lerna clean --yes",
    "release": "npm run build && lerna publish",
    "start": "npm run storybook"
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/plugin-transform-modules-commonjs": "^7.5.0",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "@storybook/addon-backgrounds": "^5.1.9",
    "@storybook/addon-knobs": "^5.1.9",
    "@storybook/addon-storysource": "^5.1.9",
    "@storybook/react": "^5.1.9",
    "babel-jest": "^22.4.1",
    "babel-loader": "^8.0.6",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "enzyme-to-json": "^3.3.5",
    "eslint": "^4.18.2",
    "eslint-config-particle": "^2.2.1",
    "eslint-plugin-react": "^7.14.2",
    "jest": "^22.4.2",
    "jest-styled-components": "^6.3.3",
    "lerna": "^3.15.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "styled-components": "^4.3.2"
  }
}

{
  "name": "@my-monorepo/one",
  "description": "react component one",
  "version": "1.1.0",
  "author": "me",
  "main": "dist/index.js",
  "scripts": {
    "test": "cd ../../ && npm test",
    "build": "babel ./src --out-dir ./dist --ignore test.jsx,stories.jsx --config-file ../../.babelrc",
    "clean": "rm -rf ./dist"
  },
  "peerDependencies": {
    "react": ">=15",
    "styled-components": ">=3"
  },
  "dependencies": {
    "@my-monorepo/two": "^1.1.0",
    "create-react-class": "^15.6.3",
    "prop-types": "^15.7.2"
  }
}

{
  "name": "@my-monorepo/two",
  "description": "react component two",
  "version": "1.1.0",
  "author": "me",
  "main": "dist/index.js",
  "scripts": {
    "test": "cd ../../ && npm test",
    "build": "babel ./src --out-dir ./dist --ignore test.jsx,stories.jsx --config-file ../../.babelrc",
    "clean": "rm -rf ./dist"
  },
  "peerDependencies": {
    "react": ">=15"
  },
  "dependencies": {
    "create-react-class": "^15.6.3",
    "prop-types": "^15.7.2"
  }
}

घटकों के भीतर सब कुछ ./src निर्देशिका ESM- शैली के आयात / निर्यात का उपयोग करती है। @my-monorepo/one @my-monorepo/two पर निर्भर करता है। इंस्टाल-टाइम पर, लर्न _लिंक्स_ निर्भरता ( lerna bootstrap के माध्यम से)। सभी पैकेज बेबेल का उपयोग करके बनाए गए हैं - शीर्ष-स्तर npm run build कमांड व्यक्तिगत ./dist निर्देशिका और उनकी सामग्री उत्पन्न करता है। npm start पहले कंपोनेंट्स बनाता है, फिर स्टोरीबुक शुरू करता है।

v3 के तहत यह सब ठीक काम करता है - हालांकि पहले घटकों का निर्माण करना हमेशा थोड़ा अजीब लगता था। मुझे _why_ हालांकि मिलता है - package.json में "main: "dist/index.js" शामिल है, इसलिए इसके बिना स्टोरीबुक रिपोर्ट करेगी कि @my-monorepo/two निर्माण करने का प्रयास करते समय नहीं मिल सका ( @my-monorepon/one निर्भर करता है इस पर)। लेकिन अन्यथा, मैं सेटअप से खुश था।

एक बात मैंने देखी: जब मैंने घटकों की package.json फाइलों में "module": "src/index.jsx" जोड़ा, तो उसे वेबपैक चेतावनी से छुटकारा मिल गया लेकिन क्लाइंट-साइड ReferenceError: exports is not defined बना रहा। मैंने पाया कि कोई एक ही त्रुटि की रिपोर्ट कर रहा है लेकिन कोई समाधान नहीं है।

मैं अभी के लिए स्टोरीबुक v3 के साथ रहना चाहता हूं, लेकिन मैं इस धागे पर नजर रखूंगा और खुशी से किसी भी सुझाव का प्रयास करूंगा: प्रार्थना :: +1:

@ भद्दी आवाज़ें जैसे आपके पास एक प्रजनन रेपो हो सकता है जिसे आप साझा कर सकते हैं मैं एक नज़र डाल सकता हूँ?

@ndelangen एक नज़र डालने के लिए धन्यवाद: प्रार्थना: दुर्भाग्य से मेरा रेपो सार्वजनिक एटीएम नहीं है। मैंने उपरोक्त प्रासंगिक विवरण साझा करने का प्रयास किया लेकिन इस बीच मैं एक कामकाजी उदाहरण बनाने का प्रयास कर सकता हूं यदि यह सहायक होगा। हालांकि थोड़ा समय लग सकता है। अन्यथा, सुझावों का प्रयास करने में खुशी होगी, आदि।

@busticated मुझे एक मोनोरेपो-रेप्रो-रेपो पर एक नज़र डालने में खुशी होगी

यह संभावना है कि:

• कुछ फ़ाइलों को दो बार बेबेल के माध्यम से पार्स किया जाता है
• कुछ फाइलें पार्स की जाती हैं, हालांकि लोडर जो एक दूसरे के साथ संगत नहीं हैं
• कुछ फ़ाइलें गलत बेबेल/टीएस कॉन्फिगरेशन का उपयोग करके संकलित की जाती हैं
• कुछ अन्य मोनोरेपो शेंनिगन्स

दुर्भाग्य से ReferenceError: exports is not defined हमें कुछ और नहीं बताता है, कुछ ऐसा नहीं है जैसा होना चाहिए।

@ndelangen ठीक है, यहाँ रेपो रेपो है

https://github.com/busticated/storybook-monorepo-repo

आप बस करने में सक्षम होना चाहिए:

1. git clone
2. npm i && npm start

...और देखें स्टोरीबुक ब्राउज़र में लोड करने का प्रयास। देव उपकरण कंसोल खोलें और आपको exports त्रुटि दिखाई देगी।

नोट्स की जोड़ी:

• पूर्वप्रकाशित बिल्ड का परीक्षण करने के लिए npm run build चलाएं
• इसे नोड/एनपीएम संस्करणों में काम करना चाहिए +/- कुछ लॉक फ़ाइल शोर (fwiw, मैंने w/दिन की नौकरी को संरेखित करने के लिए node@8 और npm@5 का उपयोग किया)
• अंतिम दो कमिट "module": "src/index.jsx" फ़ील्ड को packages/*/packge.json फ़ाइलों में जोड़ते हैं। यदि आप उन्हें पूर्ववत करते हैं, तो आपको मूल export 'default' (imported as 'Two') was not found वेबपैक चेतावनी दिखाई देगी।

मैं जल्द से जल्द एक नज़र डालने की कोशिश करूँगा

मैं लर्न का उपयोग कर रहा हूं, आंतरिक पैकेज वेबपैक द्वारा आउटपुट libraryTarget: 'commonjs2' के साथ बंडल किए गए हैं। @JasonTheAdams टिप्पणी पर आधारित दृष्टिकोण मेरे लिए काम करता है। मैंने babelrc { "sourceType": "unambiguous" } के साथ @ 0nn0 समाधान का भी परीक्षण किया है और यह भी काम करता है हालांकि इसके लिए पैकेज रूट में .babelrc होना आवश्यक है।

कुछ बुनियादी सेटअप - शायद यह किसी की मदद करेगा 😉(स्टोरीबुक: 5.1.10, लर्न: 3.16.4, वेबपैक: 4.39.1, बैबेल: 7.5.5)

फ़ाइल: _lerna_repo/.storybook/webpack.config.js_ - डिफ़ॉल्ट रूप से मौजूद नहीं है

module.exports = async ({ config }) => {
  const [ mjsjsx ] = config.module.rules;
  const [ babelLoader ] = mjsjsx.use;

  babelLoader.options.sourceType = 'unambiguous'

  return config;
};

फ़ाइल: _lerna_repo/stories/index.stories.js_

import defaultExport, { namedExport } from '../packages/examplePackage' // works locally
// import defaultExport, { namedExport } from '<strong i="17">@examplePackage</strong>' // works installed
...

फ़ाइल: _lerna_repo/packages/examplePackage/package.json_

"name": "@examplePackage",
"version": "0.0.1",
"main": "./dist/index.js"
...

फ़ाइल: _lerna_repo/packages/examplePackage/dist/index.js_ - वेबपैक द्वारा उत्पन्न

module.exports=function(e){var n={};function...

@ndelangen उपरोक्त पर कोई अपडेट?

कॉमनजेएस-स्टाइल मॉड्यूल को "आयात" करने का प्रयास करते समय मुझे "निर्यात परिभाषित नहीं किया गया" त्रुटि मिली। बेबेल स्रोत टाइप विकल्प को "स्पष्ट" पर सेट करना जैसा कि दूसरों ने सुझाव दिया था, चाल चल रही थी।

यह स्टोरीबुक के साथ वास्तव में कोई समस्या नहीं है, इसके अलावा दो मॉड्यूल विनिर्देशों के बीच में फंसने का एक परिणाम है।

ऐसा लगता है कि संस्करण 5.2 . में तय किया गया है

हाय दोस्तों, क्या यह वास्तव में तय है?

मैं 5.2.1 का उपयोग कर रहा हूं और यह समस्या नव निर्मित Lerna monorepo में है।

मेरे मामले में ऐसा हो रहा है: https://github.com/storybookjs/storybook/issues/3346#issuecomment -475437230

मैंने Storybook Webpack config node_modules "Lerna" packages में Babel संकलन से बाहर करने के लिए संशोधित किया। लेकिन मुझे लगता है कि मुद्दा अभी भी वहीं है।

मैं @idbartosz की टिप्पणी के आधार पर बंद हुआ। क्या आपको लगता है कि यह अभी भी @Lighttree टूटा हुआ है?

भ्रम पैदा करने के लिए क्षमा करें, मैंने अपना उत्तर Lerna कॉन्फ़िगरेशन पर आधारित किया है जहाँ आवश्यक पैकेजों को रूट पर फहराया जाता है और वहाँ देव निर्भरता के रूप में स्थापित किया जाता है। इसलिए मुझे उनके node_modules को पार्स करने की समस्या का अनुभव नहीं हुआ।

ऐसा लगता है कि कुछ उपयोगकर्ता के पास उपयोग का मामला है जहां उन्होंने पेड़ में गहरे पैकेज स्थापित किए हैं जैसे /lib/components/node_modules https://github.com/storybookjs/storybook/issues/3346#issuecomment -475437230 और बेबेल-लोडर कोशिश करता है उन्हें पार्स करें।

डिफ़ॉल्ट रूप से स्टोरीबुक रूट node_modules को बाहर कर देता है लेकिन शायद उन सभी को बाहर करना उचित है।

https://github.com/storybookjs/storybook/blob/f7367b18ec7d6e077fba5b99da89233b63c4f280/lib/core/src/server/config/utils.js#L5 -L6

https://github.com/storybookjs/storybook/blob/f7367b18ec7d6e077fba5b99da89233b63c4f280/lib/core/src/server/common/babel-loader.js#L1 -L13

@shilman मुझे भी इस त्रुटि का सामना करना पड़ रहा है, react-motion में lerna मोनो-रेपो रिपॉजिटरी में।
क्या @idbartosz समाधान ने समस्या को ठीक किया?

@sayjeyhi हाँ, यह होना चाहिए। यह वास्तव में Storybook मुद्दा नहीं है। यह सिर्फ इसलिए होता है क्योंकि जब आप monorepo में काम करते हैं, तो आपके पास node_modules न केवल आपके प्रोजेक्ट रूट में होता है, बल्कि */packages में भी होता है, जिसे डिफ़ॉल्ट रूप से बाहर नहीं किया जाता है। (मुझे वास्तव में यकीन नहीं है कि यह नहीं होना चाहिए, क्योंकि इसका monorepo संगठन विशिष्ट है। यदि आप अपना Storybook package के रूप में Lerna packages फ़ोल्डर में बनाते हैं जिसे आपने जीता है यह मुद्दा नहीं है)

तो मेरे मामले के लिए मैंने इसे .storybook/webpack.config.js में किया है:

const path = require('path');
const glob = require('glob');

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
    // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.
    // Make whatever fine-grained changes you need
    const babelLoader = config.module.rules[0];

    /**
     * Exclude pacakge's `node_modules` from Storybook babel processing.
     */
    glob.sync('./packages/*/node_modules').forEach(match => {
        babelLoader.exclude.push(path.resolve(match));
    });

    // Return the altered config
    return config;
};

क्या किसी ने वास्तव में अपना प्रस्तावित कार्य दिखाया है- मेरे द्वारा बनाए गए उदाहरण रेप्रो को ठीक करता है?

https://github.com/storybookjs/storybook/issues/3346#issuecomment -514324312

ऐसा लगता है कि यह निश्चित रूप से प्रश्न का उत्तर देगा।

मैं देख सकता हूं कि ज्यादातर यहां monorepo प्रोजेक्ट वाला हर कोई $#$1 lerna #$ का उपयोग कर रहा है, मेरे पास monorepo प्रोजेक्ट है जो $#$ lerna $# के बजाय yarn workspaces का उपयोग करता है। lerna और सब कुछ storybook + typescript के नवीनतम संस्करण के साथ ठीक काम कर रहा है, और अजीब webpack कॉन्फ़िगरेशन के बिना, इसे बेबेल के साथ भी ठीक काम करना चाहिए।

यदि आप कुछ रुचि दिखाते हैं तो मैं monorepo एक काम कर रहे storybook के साथ बना सकता हूं, मैं @busticated की फाइलों पर देख सकता हूं, यह है कि कुछ स्क्रिप्ट गलत क्रम में चलती हैं और कुछ निर्भरताएं हैं गलत package.json , मैं यह नहीं कह रहा हूं कि यह समस्या पैदा कर रहा है लेकिन यह हो सकता है।

@pixeleate

मैं @busticated की फाइलों पर देख सकता हूं, कुछ स्क्रिप्ट गलत क्रम में चलती हैं और कुछ निर्भरताएं गलत package.json में हैं

क्या आप अधिक विशिष्ट हो सकते हैं?

यह भी ध्यान रखें कि मेरे पास मेरे उदाहरण रेपो रनिंग स्टोरीबुक v3 का _working_ संस्करण है जैसा कि यहां बताया गया है https://github.com/storybookjs/storybook/issues/3346#issuecomment -513397002

@pixeleate क्या आप अपना कामकाजी रेपो साझा करना चाहेंगे?

मैं देख सकता हूं कि ज्यादातर यहां monorepo प्रोजेक्ट वाला हर कोई $#$1 lerna #$ का उपयोग कर रहा है, मेरे पास monorepo प्रोजेक्ट है जो $#$ lerna $# के बजाय yarn workspaces का उपयोग करता है। lerna और सब कुछ storybook + typescript के नवीनतम संस्करण के साथ ठीक काम कर रहा है, और अजीब webpack कॉन्फ़िगरेशन के बिना, इसे बेबेल के साथ भी ठीक काम करना चाहिए।

यदि आप कुछ रुचि दिखाते हैं तो मैं monorepo एक कामकाजी storybook के साथ बना सकता हूं, मैं @busticated की फाइलों पर देख सकता हूं, यह है कि कुछ स्क्रिप्ट गलत क्रम में चलती हैं और कुछ @ निर्भरताएं हैं गलत package.json में, मैं यह नहीं कह रहा हूं कि यह समस्या पैदा कर रहा है लेकिन यह हो सकता है।

babelConfig.exclude.push(/node_modules/); चलाते समय मेरे लिए समस्या को हल करता है start-storybook , लेकिन मुझे exports is not defined से आउटपुट चलाते समय वही त्रुटि मिलती है build-storybook ।

संपादित करें: storybook-addon-jsx को हटाकर हल किया गया।

@busticated मैंने एक पीआर को एक फिक्स के साथ खोला:
https://github.com/busticated/storybook-monorepo-repo/pull/1

कुछ गलत आयात थे जो मेरे विचार से मुख्य समस्या थे।

@jacobrask मैं इसे स्टोरीबुक के मूल में बदलना चाहता हूं। लेकिन मुझे डर है कि अगर हम इसे मामूली रिलीज में बदल देते हैं तो यह कहर बरपाएगा।

@shilman मुझे लगता है कि हमें इसे बदलना चाहिए, लेकिन यह एक प्रमुख संस्करण टक्कर होना चाहिए

@ndelangen

मैंने फिक्स के साथ एक पीआर खोला

धन्यवाद!

कुछ गलत आयात थे जो मुझे लगता है कि मुख्य समस्या थी

एचएम हां। मुझे eslint सेट अप न करने का अधिकार देता है

उस सब ने कहा, ऐसा लगता है कि एक बार जब आप खराब चर नामों के लिए खाते हैं और @storybook/addon-backgrounds उपयोग को अपडेट करते हैं - जैसा कि मैंने master ( 1 , 2 , 3 , 4 ) पर किया था - एकमात्र बकाया परिवर्तन है यार्न का उपयोग करने के लिए।

क्या मैं सही हूँ?

संपादित करें: यहां एक साफ-सुथरी शाखा है / केवल yarn के लिए आवश्यक परिवर्तन https://github.com/busticated/storybook-monorepo-repo/commit/4fb2cac0f05b65a5983f121b92a7c2d7438d8857

यार्न कार्यक्षेत्र सभी निर्भरता को जड़ से उखाड़ देगा, इससे कई मुद्दों का समाधान होगा।

मेरे पीआर में: https://github.com/storybookjs/storybook/pull/8822 मैं डिफ़ॉल्ट रूप से MULTIPLE node_modules फ़ोल्डरों को छोड़कर समर्थन करने के लिए स्टोरीबुक में बदलाव करता हूं।

जैसा कि वहां विस्तृत है, मैं उस बदलाव को रोल करने से बहुत डरता हूं जो एक मामूली रिलीज में बदल जाता है, और ऐसा ही @shilman है। हमने तय किया है कि इसे 6.0 तक रोकना बेहतर है।

यार्न कार्यक्षेत्र सभी निर्भरता को जड़ से उखाड़ देगा, इससे कई मुद्दों का समाधान होगा।

यह मानते हुए कि आप यार्न का उपयोग करते हैं

डिफ़ॉल्ट रूप से MULTIPLE नोड_मॉड्यूल फ़ोल्डरों को छोड़कर समर्थन करने के लिए स्टोरीबुक में बदलाव करें

क्या यही मूल कारण है? स्थानीय रूप से परिवर्तन लागू करने से मेरी समस्या ठीक नहीं होती है।

मुझे अपने ब्राउज़र के कंसोल में निम्न मिल रहा है:

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

... जो थोड़ा अलग है मुझे लगता है ..? फिर भी एक और त्रुटि जो आप हर समय देखते हैं लेकिन हमेशा एक अलग समाधान होता है ‍♂ _/मुझे बेबेल और वेबपैक की सामान्य दिशा में भ्रूभंग_

मैं उस बदलाव को रोल करने से बहुत डरता हूँ जो एक मामूली रिलीज़ में बदल जाता है, और ऐसा ही @shilman भी है। हमने तय किया है कि इसे 6.0 तक रोकना बेहतर है।

ओह हाँ, मैं आपको सुनता हूँ - इनमें से कोई भी सामान कभी भी आसान नहीं होता है। आप यहां और अन्य जगहों पर जो काम करते हैं, उसके लिए बहुत-बहुत धन्यवाद - स्टोरीबुक (यहां तक ​​कि v3) एक आश्चर्यजनक रूप से सहायक उपकरण है: प्रार्थना :: क्लैप :: क्लैप :: क्लैप :: +1:

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

यह सबसे अधिक संभावना है कि वेबपैक अपने ईएसएम आवरण के साथ एक कॉमनजेएस मॉड्यूल को लपेटता है। यदि वेबपैक मॉड्यूल में import का कोई उपयोग देखता है तो वह ईएसएम रैपर का उपयोग करेगा। यह आमतौर पर किसी के कारण होता है:

1. अपने सोर्स कोड में ESM और CJS को मिलाना और मिलाना
2. बेबेल ईएसएम हेल्पर्स को सीजेएस मॉड्यूल में इंजेक्ट करता है

दूसरे मामले से बचने के लिए आपको बैबेल के sourceType को "unambiguous" पर सेट करना होगा ताकि इसे पहले मॉड्यूल प्रकार की जांच करने के लिए मजबूर किया जा सके।

https://github.com/i-like-robots/broken-webpack-bundle-test-case

अद्यतन: मेरी मूल टिप्पणी ऊपर छिपी हुई है, लेकिन यह आधार विन्यास है जिसका उपयोग हम कई मोनोरेपो परियोजनाओं में इन मुद्दों को हल करने के लिए कर रहे हैं:

const excludePaths = [/node_modules/, /dist/]

module.exports = ({ config }) => {
  // Use real file paths for symlinked dependencies do avoid including them multiple times
  config.resolve.symlinks = true

  // HACK: extend existing JS rule to ensure all dependencies are correctly ignored
  // https://github.com/storybooks/storybook/issues/3346#issuecomment-459439438
  const jsRule = config.module.rules.find((rule) => rule.test.test('.jsx'))
  jsRule.exclude = excludePaths

  // HACK: Instruct Babel to check module type before injecting Core JS polyfills
  // https://github.com/i-like-robots/broken-webpack-bundle-test-case
  const babelConfig = jsRule.use.find(({ loader }) => loader === 'babel-loader')
  babelConfig.options.sourceType = 'unambiguous'

  // HACK: Ensure we only bundle one instance of React
  config.resolve.alias.react = require.resolve('react')

  return config
}

@ i-like-robots sourceType = 'unambiguous' का उपयोग करने का नकारात्मक पक्ष क्या है?

समाधान पोस्ट करने के लिए धन्यवाद!

मैं मोनोरेपो समर्थन को बेहतर बनाने के लिए इसका उपयोग करने जा रहा हूं: https://github.com/storybookjs/storybook/pull/8822

(6.0.0 सुविधा)

शायद असंबंधित, लेकिन मेरे कस्टम babel.config.js के कारण मुझे यह exports is not defined समस्या हो रही थी, https://storybook.js.org/docs/configurations/custom-babel-config/ ने मेरे विशेष को हल किया संकट।

@qrosmeli टिप के लिए धन्यवाद। तुमने मेरा दिन बचा लिया! मैं

हुज़ाह !! मैंने अभी-अभी https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.0 जारी किया है जिसमें PR #8822 है जो इस मुद्दे का संदर्भ देता है। इसे आज़माने के लिए आज ही अपग्रेड करें!

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

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

[अद्यतन] - हमें इस नियम से नोड_मॉड्यूल को बाहर करना होगा अन्यथा यह निर्माण को तोड़ देगा

मैंने इस नियम को Storybook main.js फ़ाइल में जोड़कर इसका समाधान किया है

let rules = [{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: /dist/, //Include dist folder as well to parse using babel loader in order to resolve exports not defined error
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    presets: [
      ["@babel/preset-env", {
        modules: "commonjs"
      }]
    ]
  }
}]

इसके साथ ही, आपको अपने डिस्टर्ब फोल्डर के लिए एस्लिंट वेलिडेशन को भी डिसेबल करना पड़ सकता है, इसके लिए आप नीचे दी गई स्क्रिप्ट का उपयोग कर सकते हैं।

  webpackFinal: config => {

    //Find eslint loader rule from webpack config
    let eslintRule = config.module.rules.find(rule => {
      if (rule && rule.use) {
        return rule.use.some(use => use.loader.match('eslint-loader'))
      }
    });

    //Exclude validations of dist folder contents
    eslintRule.exclude = /dist/;

    return {
      ...config,
      module: {
        rules: [
          ...rules,
          eslintRule,
          ...config.module.rules
        ]
      }
    }
  }

धन्यवाद @ ashvin777 , एक आकर्षण की तरह काम करता है: पलक:

अरे @aperkaz , मैंने node_modules को बाहर करने के लिए नियम को अपडेट किया है, मैंने पाया कि स्टोरीबुक देव मोड में ठीक से लॉन्च हो रही थी लेकिन इस बदलाव के कारण उत्पादन मोड में टूट रही थी। इसलिए मुझे ठीक करने के लिए node_modules को बाहर करना पड़ा। आप ऊपर मेरी अद्यतन टिप्पणी से नवीनतम ले सकते हैं।

मेरे पास एक ही समस्या थी, और मेरे लिए समाधान transform-es2015-modules-commonjs से @babel/plugin-transform-modules-commonjs पर babel.config.js का उपयोग करने से स्विच कर रहा था।

इससे पहले

module.exports = {
    presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
    plugins: [
        'transform-es2015-modules-commonjs',
        '@babel/plugin-proposal-class-properties'
    ]
};

उपरांत

module.exports = {
    presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
    plugins: [
        '@babel/plugin-transform-modules-commonjs',
        '@babel/plugin-proposal-class-properties'
    ]
};

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

मैंने इस मुद्दे पर दिन बिताया, मेरे पास पहले से ही sourceType: 'unambigous' था।

मेरे हिस्से के लिए, इसे अनदेखा करने के लिए node_modules फ़ोल्डर से लिंक नहीं किया गया था क्योंकि यह इसके ठीक बगल में एक सापेक्ष फ़ाइल है।

मेरे लिए काम करने वाला एक समाधान modules: 'cjs' विकल्प को $#$ @babel/preset-env $#$ के लिए बाध्य करना है।

मुझे @storybook/react@next के साथ भी यह समस्या है, मेरे लिए अंतिम समाधान मैन्युअल रूप से बैबेल प्लगइन @babel/plugin-transform-modules-commonjs जोड़ना था, जबकि debug: true विकल्प के साथ @babel/preset-env मैं देख रहा हूँ कि यह पहले से ही उपयोग किया जा चुका है... मुझे समझ नहीं आ रहा है लेकिन यह काम करता है।

संपादित करें: यह कोई समाधान नहीं है क्योंकि यह वेबपैक के साथ ईएसएम मॉड्यूल के लाभों को खो देता है। मुझे कहानीपुस्तिका बनाने के लिए केवल सीजे में बदलने के लिए मजबूर करने की जरूरत है।

:टाडा: मेरा .storybook/.babelrc : :टाडा:

{
  "extends": "../.babelrc",
  "plugins": [
    "@babel/plugin-transform-modules-commonjs"
  ]
}