Storybook: خطأ: لم يتم تعريف الصادرات

أحصل على export 'MatrixEffect' was not found in '../dist/index' في المحطة. لكن يمكنني استيراد الوحدة في وقت تشغيل عقدة عادي فقط (لا يمكن استخدامها في OFC ، ولكن على الأقل أعرف أنه يمكن استيرادها).

قد يساعد هذا لأنه ليس لدينا مستندات رسمية حتى الآن: https://github.com/storybooks/storybook/issues/3270

هذا لا يزال لا يعمل ...

لقد واجهت للتو مشكلة مع نفس رسالة الخطأ في كتاب قصص بعد تشغيل مساحات عمل الغزل في مشروع lerna. أظن أن هذا ناتج عن مشكلات تحميل الحزمة. مزيد من التحقيق.

يبدو أن لدي نفس المشكلة.

إذا فهمت المشكلة بشكل صحيح ، فهناك مشكلة في حل ملفات .ts من .js؟ (على الرغم من أنني لا أفهم سبب استيراد المكون الخاص بك من dist )

ربما يجب عليك إضافة .ts / .tsx إلى resolve.extensions في webpack.config الخاص بكتابك القصصي الموسّع؟

@ igor-dv لا ، أنا أستخدم JS. على أي حال ، تغيير معرف المتغير ( variable إلى Variable ) يعمل بطريقة ما.

أتلقى هذا الخطأ بدون استخدام TypeScript ، فقط vanilla JS

لقد أزلت مُحمل babel من webpack.config.js في المجلد .storybook وهو يعمل بشكل جيد الآن. أنا لا أستخدم Copycript بالرغم من ذلك.

أنا أواجه هذا ، في المتصفح أحصل على exports is not defined ولكن في المحطة أحصل على "تصدير 'افتراضي" (تم استيراده كـ' [ComponentName] ') لم يتم العثور عليه في' @ [namespace] / [ اسم الحزمة] '"

• باستخدام lerna
• Storybook 3.4.7
• كل شيء على ما يرام لمكوناتي مع عدم وجود تبعيات داخلية
• إذا حاولت استيراد وحدة تعتمد على حزمة أخرى في project/packages يظهر الخطأ
• أقوم بتشغيل سكربتات الإنشاء الخاصة بي ، لذا فهي تحاول الحصول على إصدار مشترك من الحزمة.

إذا قمت بتغيير التكوين الرئيسي package.json الخاص بالتبعية الداخلية إلى المصدر غير المبني ، فكل شيء يعمل

إذن ، هناك خطأ ما في تهيئة webpack في Storybook واستيراد Cjs إلى كود وحدة es ، أو شيء من هذا القبيل ...

الإصلاح الخاص بي

لذلك أدركت أنني حذفت عن طريق الخطأ حقل "الوحدة النمطية" package.json الخاص بي والذي يشير إلى إصدار الوحدة النمطية ES من البنيات الخاصة بي ، وإضافة ذلك مرة أخرى يجعل كل شيء يعمل مرة أخرى. لا يزال يبدو أن القصص القصيرة يجب أن تكون قادرة على سحب نسخة Cjs ، ولكن تم حل مشكلتي 🤷🏽‍♂️

لا يزال هذا يحدث لي في الإصدار 4.0.0-alpha.20 مع babel 7.0.0

نفسه هناtony. أنا أستخدم Flow ، على الرغم من ذلك.

ryanflorence لدي نفس إعداد lerna وإصدار الصادرات لكتاب القصص.
لدي حزمة تعرض الإصدار المدمج من عناصر واجهة المستخدم.
نأسف ولكن هل يمكنك تقديم المزيد من التفاصيل عندما تقول ، "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

بالنسبة لي ، كانت المشكلة ناتجة عن التغييرات الأخيرة لتشمل Babel-loader في 4.0.0.alpha. يمكن أن تتضمن حزمة الويب الافتراضية للخادم مجموعات Commonjs (الحزم ومساحات العمل): https://github.com/storybooks/storybook/blob/b2b73596f9dd97b4ba8c03340bd36f868e836772/lib/core/src/server/config/webpack.config.dev .
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٪.

أعتقد أننا يمكن أن نفعل ما هو أفضل لمستخدمي monorepo ، وجعل تكوين webpack الافتراضي لدينا حتى لا يحدث ما سبق.

أعتقد أن إزالة include: includePaths, سيفي بالغرض ، لكن السؤال هو ما تكلفة الأداء ..

من لديه اقتراح جيد حول أفضل طريقة لحل هذه المشكلة؟

لقد عثرنا أيضًا على هذه المشكلة واستغرق الأمر أكثر من نصف يوم من التكوينات القتالية لمعرفة ما قد يكون. 😢

cilice كيف حللت هذا؟

@ 0nn0 باتباع https://github.com/storybooks/storybook/issues/3346#issuecomment-425516669 هذه النصيحة :)

أواجه نفس المشكلة مع stotybook-4.1.4 ، مشروع Lerna ، React 16.7.0 ، عادي JS. يعمل مع Storybook-4.0.12

كان لدي نفس الخطأ في 4.1.4 ، لقد عدت إلى 4.0.10 وأعمل بشكل جيد (بدون نص مكتوب) babel-webapck

سيؤدي استخدام التكوين المعدل لاستبعاد الإخراج المترجم من برنامج تحميل babel إلى تجنب هذه المشكلة لمشاريع Lerna أو monorepo مع أحدث حزمة من القصص القصيرة.

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 عدة مرات وقد عملنا سابقًا على حلها من خلال تجاوز تكوين Babel كما اقترحه الآخرون.

لكن ، بدأت مؤخرًا في النظر في هذا الأمر مرة أخرى ولاحظت أنه تم حل خاصية الاستبعاد لقاعدة JS الافتراضية إلى مسار مطلق (يوجد أدناه console.log() لتكوين Webpack الذي تم إنشاؤه):

{
  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 من حقن polyfills core-js (إزالة الخيار أو الإعداد useBuiltins البيئة لاستهداف أوقات التشغيل التي لا تتطلب أي polyfills يمكن أن تساعد أيضًا في تجنب هذه المشكلة.)

إذن ، هناك عدد قليل من المشكلات المختلفة قيد التشغيل والتي تؤدي إلى حدوث هذه المشكلة:

1. يمكن نقل التبعيات في مجلدات node_modules بدون قصد بواسطة Babel
2. يمكن لخيار useBuiltins حقن core-js polyfills في التعليمات البرمجية بتنسيق خاطئ لنوع الوحدة (راجع https://github.com/babel/babel/issues/7463 و https: // github.com/babel/babel/issues/9187)
3. إذا كانت الحزم مرتبطة ببعضها البعض (مثل monorepo) ، فعليك أن تخطو بحذر شديد لتجنب النقطة 1!

لسوء الحظ ، ليس من السهل جدًا تمديد خيار الاستبعاد الحالي ، لكن هذا ممكن !

لقد قمت بإنشاء حالة اختبار مصغرة لهذه المشكلة بمعلومات حول كيفية تجنبها. سأرفع قضية مع Babel إذا لزم الأمر.

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

نحن نستخدم كتب القصص + lerna + المطبوع عليها. ما تم حله بالنسبة لنا هو خلط @ 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 والإصدارات الأحدث.

فقط للتغلب على هذه المشكلة دون فهم كامل لقضايا الأشخاص (معذرة!) - إليك مقتطف من تكوين webpack الخاص بي الذي يعمل على حل هذه المشكلة ، ربما بطريقة أبسط:

  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) ، ولكن يبدو أن هذا يحل محل تكوين babel بالكامل بدلاً من تعديله ، مما تسبب في المزيد من المشكلات.

JasonTheAdams ، سيظهر مقتطف الشفرة الذي كتبته أعلاه في .storybook/webpack.config.js . أعتقد أنه مشابه لما فعلته.

هذا ما أعتقد أنه يحدث:

المشكلة هي أن الملفات الموجودة في node_modules داخل المشاريع الفرعية (مثل ./lib/components/node_modules ) يتم تجميعها بواسطة babel. إنها ملفات تم شحنها بالفعل إلى NPM ولا تحتاج إلى تجميع. في بعض الحالات ، يتسبب هذا في مشكلات محيرة ، ربما حول كيفية تحليل بابل للملفات.

أسلوبي هو فقط إخبار babel-loader بعدم تجميع أي ملف داخل أي مجلد node_modules . بشكل افتراضي ، سيتجاهل ./node_modules لذلك سيقوم بتجميع الأشياء داخل المشروع الفرعي node_modules . لذلك أضفت بعض المسارات إلى قائمة exclude .

تتمثل طريقتك في تكوين babel-loader لاستخدام اكتشاف babel sourceType لمعرفة كيفية تحليل ملف. هذا يعمل بشكل أساسي حول ملفات بابل الخاطئة. ومع ذلك ، لا يزال برنامج Babel يعمل على ملفات لا تحتاج إلى تجميع ، لذلك لا أعرف ما إذا كان هذا هو ما تريده؟

أنا لست خبيرًا ، لذا خذ كلامي بحذر ، لكن هذا ما فهمته بعد أن تعاملت مع مشكلات مماثلة بنفسي.

بعد تطبيق اقتراح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",

تضمين التغريدة لقد بدأت في التفاف رأسي حول هذه القضية. الأمر الصعب هو أنني ، في وضعي ، في الواقع _do_ أريده أن يجمع الطفل node_modules حيث أقوم بتطوير المكونات بأنفسهم ، ومعاملتها كحزمة منفصلة.

أعتقد أن اقتراح skeet ، كما ردده @ jcousins-ynap ، هو على الأرجح الحل الأفضل هنا. لا نريد أن يقوم Storybook بعمل افتراضات حول كيفية التعامل مع الحزم الفرعية (أي تجاهل وحداتها node_modules). إذا كان شخص ما لا يريد تجميع الوحدات النمطية الفرعية node_modules ، فمن المحتمل ألا يكون قد قام بتثبيت تبعيات الحزمة للبدء بها.

يبدو أن جميعًا يعود إلى قدرة babel + webpack على التعرف على وحدات CommonJS vs ES6 ، والتي لا تبدو مثالية. تؤدي إضافة الحقل "module": إلى الحزمة الفرعية package.json إلى إعلام بابل صراحةً بأن الحزمة تستخدم وحدات ES6 ، وهي الطريقة الأكثر أمانًا للتعامل مع هذا الأمر.

شكرا لإنتباهكم لهذا!

كما تريد أن تتناغم هنا. باستخدام Storybook 5 و Babel 7.4 (مع core-js 3) و TypeScript 3.4 و monorepo. لم تنجح معظم هذه الاقتراحات بنسبة 100٪ ، لكن شيئًا أدركته نجح. إن طبيعة monorepos ذاتها هي أن الحزمة تستورد الملفات "المبنية" من حزمة أخرى ، وليس الملفات المصدر ، وهذا صحيح عندما تكون في طبقة الوحدة النمطية للتسجيل / العقدة NPM ، ولكن في التطوير ، أمر مزعج للغاية. للتغلب على هذا ، قمت بتعريف الأسماء المستعارة لـ Webpack التي أعادت توجيه 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`;
});

ولجعل Babel + TS يعمل ، اخترت تغيير مُحمل babel الحالي بدلاً من إضافة مُحمل جديد ، لأن تكوين Babel المحلي الخاص بي لا يتوافق بنسبة 100٪ مع Storybook's ، ولكن التكوين الخاص به هو كذلك.

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 العمل!

أعيق تماما من قبل هذا أيضا. قضيت آخر يومين تقريبًا دون جدوى في محاولة جميع الاقتراحات من هذا الموضوع بالإضافة إلى بعض الاقتراحات الخاصة بي. لم يكن أي منها ناجحًا 😢

في النهاية ، بقيت مع:

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)

... عند عرض Storybook 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 _links_ التبعية (عبر lerna bootstrap ). تم إنشاء جميع الحزم باستخدام babel - يقوم أمر المستوى الأعلى npm run build بإنشاء الدلائل الفردية ./dist ومحتوياتها. يبني npm start المكونات أولاً ، ثم يبدأ كتاب القصة.

في الإصدار 3 ، كان كل هذا يعمل بشكل جيد - على الرغم من أنه كان من المحرج دائمًا أن تضطر إلى بناء المكونات أولاً. لقد حصلت على _Why_ على الرغم من ذلك - package.json يتضمن "main: "dist/index.js" لذلك بدون هذا الكتاب القصصي في المكان سيبلغ عن تعذر العثور على @my-monorepo/two عند محاولة الإنشاء (نظرًا لأن @my-monorepon/one يعتمد عليه). لكن بخلاف ذلك ، كنت سعيدًا بالإعداد.

لاحظت شيئًا واحدًا: عندما أضفت "module": "src/index.jsx" إلى ملفات المكونات package.json ، تخلصت من تحذير حزمة الويب لكن بقي جانب العميل ReferenceError: exports is not defined . لقد وجدت شخصًا يبلغ عن نفس الخطأ ولكن لا يوجد حل.

سألتزم بقصص القصص المصورة الإصدار 3 في الوقت الحالي ، لكنني سأراقب هذا الموضوع وسأجرب أي اقتراحات بسعادة: صلي :: + 1:

busticated يبدو وكأنه قد يكون لديك ريبو استنساخ يمكنك مشاركته يمكنني إلقاء نظرة عليه؟

ndelangen شكرا لإلقاء نظرة: صلي: الريبو الخاص بي ليس أجهزة الصراف الآلي العامة للأسف. حاولت مشاركة التفاصيل ذات الصلة أعلاه ولكن في الوقت نفسه يمكنني محاولة إنشاء مثال عملي إذا كان ذلك مفيدًا. قد يستغرق بعض الشيء بالرغم من ذلك. بخلاف ذلك ، يسعدني تجربة الاقتراحات ، وما إلى ذلك.

busticated سأكون سعيدًا بإلقاء نظرة على monorepo-repro-repo

فمن المحتمل أن:

• يتم تحليل بعض الملفات من خلال بابل مرتين
• يتم تحليل بعض الملفات من خلال برامج تحميل غير متوافقة مع بعضها البعض
• يتم تجميع بعض الملفات باستخدام ملف babel / ts config
• بعض خدع monorepo الأخرى

لسوء الحظ ، ReferenceError: exports is not defined لا يخبرنا بأي شيء آخر ، شيء ما ليس كما يفترض أن يكون.

ndelangen حسنًا ، ها هو Repro Repo

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

يجب أن تكون قادرًا على:

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

... وشاهد محاولة تحميل القصص القصيرة في المتصفح. افتح وحدة تحكم أدوات dev وسترى الخطأ exports .

بضع ملاحظات:

• قم بتشغيل npm run build لاختبار بناء ما قبل النشر
• يجب أن يعمل عبر إصدارات العقدة / npm +/- بعض ضوضاء ملف القفل (fwiw ، استخدمت node@8 و npm@5 لمحاذاة مع الوظيفة اليومية)
• قام الالتزامان الأخيران بإضافة الحقول $ # "module": "src/index.jsx" إلى ملفات packages/*/packge.json . إذا تراجعت عن ذلك ، فسترى تحذير حزمة الويب الأصلية export 'default' (imported as 'Two') was not found .

سأحاول إلقاء نظرة في أسرع وقت ممكن

أنا أستخدم Lerna ، الحزم الداخلية مجمعة بواسطة Webpack بإخراج libraryTarget: 'commonjs2' . النهج القائم على تعليق JasonTheAdams يعمل بالنسبة لي. لقد اختبرت أيضًا حل @ 0nn0 مع babelrc { "sourceType": "unambiguous" } وهو يعمل أيضًا ولكنه يتطلب أن يكون لديك .babelrc في جذر الحزمة.

بعض الإعدادات الأساسية - ربما تساعد شخصًا ما 😉 (Storybook: 5.1.10، Lerna: 3.16.4، Webpack: 4.39.1، Babel: 7.5.5)

file: _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
...

file: _lerna_repo /pack / examplePackage / package.json_

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

file: _lerna_repo /pack / examplePackage / dist / index.js_ - تم إنشاؤه بواسطة Webpack

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

ndelangen أي تحديث على ما سبق؟

حصلت على الخطأ "لم يتم تعريف الصادرات" عند محاولة "استيراد" وحدة نمط CommonJS. أدى تعيين خيار Babel sourceType إلى "لا لبس فيه" كما اقترحه الآخرون إلى الحيلة.

هذه ليست مشكلة حقيقية في Storybook ، بل نتيجة للوقوع في منتصف مواصفات الوحدة النمطية.

يبدو أنه تم إصلاحه في الإصدار 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 ويحاول babel-loader حللهم.

بشكل افتراضي ، يستبعد كتاب القصص القصيرة الجذر 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;
};

هل أظهر أي شخص بالفعل إصلاحات الحل البديل المقترحة مثل مثال repro الذي قمت بإنشائه؟

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

يبدو أن هذا من شأنه أن يجيب على السؤال بشكل نهائي.

أستطيع أن أرى أن معظم الأشخاص هنا الذين لديهم مشروع monorepo يستخدم lerna ، لديّ مشروع monorepo يستخدم yarn workspaces بدلاً من lerna وكل شيء يعمل بشكل جيد مع أحدث إصدار من storybook + typescript ، وبدون تكوينات غريبة webpack ، يجب أن يعمل بشكل جيد مع babel.

إذا أظهرت بعض الاهتمام ، فيمكنني إنشاء monorepo باستخدام storybook ، يمكنني أن أرى في ملفات busticated ، أن بعض البرامج النصية تعمل بترتيب خاطئ وبعض التبعيات في package.json غير صحيح ، أنا لا أقول أن هذا يسبب مشاكل ولكن يمكن أن يكون كذلك.

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

أستطيع أن أرى في ملفات busticated ، أن بعض البرامج النصية تعمل بترتيب خاطئ وبعض التبعيات موجودة في الحزمة غير الصحيحة.

يمكنك أن تكون أكثر تحديدا؟

أيضًا ، ضع في اعتبارك أن لدي نسخة _working_ من مثال الريبو الذي يعمل على تشغيل كتاب القصص v3 كما هو مذكور هنا https://github.com/storybookjs/storybook/issues/3346#issuecomment -513397002

pixeleate هل تمانع في مشاركة الريبو العامل الخاص بك؟

أستطيع أن أرى أن معظم الأشخاص هنا الذين لديهم مشروع monorepo يستخدم lerna ، لديّ مشروع monorepo يستخدم yarn workspaces بدلاً من lerna وكل شيء يعمل بشكل جيد مع أحدث إصدار من storybook + typescript ، وبدون تكوينات غريبة webpack ، يجب أن يعمل بشكل جيد مع babel.

إذا أظهرت بعض الاهتمام ، فيمكنني إنشاء 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 أعتقد أننا يجب أن نغيره ، لكن يجب أن يكون نسخة رئيسية

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

فتحت العلاقات العامة مع الإصلاح

شكرا!

كان هناك عدد قليل من الواردات غير الصحيحة التي كانت المشكلة الرئيسية على ما أعتقد

جلالة الملك نعم. يقدم لي الحق لعدم إعداد 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 أقوم بإجراء تغيير على Storybook لدعم استبعاد مجلدات MULTIPLE node_modules افتراضيًا.

كما هو مفصل هناك ، أنا مرعوب جدًا من طرح هذا التغيير في إصدار ثانوي ، وكذلك @ shilman. لقد قررنا أنه من الأفضل الاحتفاظ بذلك حتى الإصدار 6.0.

ستعمل مساحات عمل الغزل على رفع جميع التبعيات إلى الجذر ، وهذا سيحل الكثير من المشكلات.

على افتراض أنك تستخدم الغزل 😉

إجراء تغيير على Storybook لدعم استبعاد مجلدات MULTIPLE node_modules افتراضيًا

هل هذا هو السبب الجذري؟ لا يبدو أن تطبيق التغيير محليًا يصلح مشكلتي.

أحصل على ما يلي في وحدة تحكم المستعرض الخاص بي:

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

... ما هو مختلف قليلا على ما أعتقد ..؟ خطأ آخر تراه طوال الوقت ولكن دائمًا ما يكون حلًا مختلفًا 🤦‍♂ _ / لي عبوس في اتجاه بابل و webpack العام_ 😬

أنا مرعوب جدًا من طرح هذا التغيير في إصدار ثانوي ، وكذلك @ shilman. لقد قررنا أنه من الأفضل الاحتفاظ بذلك حتى الإصدار 6.0.

أوه نعم أسمعك - لا شيء من هذه الأشياء سهل على الإطلاق. شكرًا جزيلاً لك على العمل الذي تقوم به هنا وفي أي مكان آخر - يعتبر كتاب القصص (حتى الإصدار 3) أداة مفيدة بشكل مثير للدهشة:

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

يحدث هذا على الأرجح بسبب التفاف Webpack على وحدة CommonJS بغلاف ESM الخاص بها. سيستخدم Webpack برنامج تضمين ESM إذا رأى أي استخدام import في الوحدة النمطية. عادة ما يكون ناتجًا عن إما:

1. خلط ومطابقة ESM و CJS في شفرة المصدر الخاصة بك
2. يقوم Babel بحقن مساعدي ESM في وحدة CJS

لتجنب الحالة الثانية ، ستحتاج إلى تعيين Babel sourceType إلى "unambiguous" لإجبارها على التحقق من نوع الوحدة أولاً.

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

تحديث: تعليقي الأصلي مخفي أعلاه ولكن هذا هو التكوين الأساسي الذي كنا نستخدمه لحل هذه المشكلات عبر عدة مشاريع monorepo:

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' ؟

شكرا لنشر الحل!

سأستخدم هذا لتحسين دعم monorepo: https://github.com/storybookjs/storybook/pull/8822

(ميزة 6.0.0)

ربما لا علاقة له ، لكني كنت أواجه مشكلة exports is not defined هذه بسبب babel.config.js المخصص ، قرأت 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.

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

[محدث] - يتعين علينا استبعاد node_modules من هذه القاعدة وإلا ستؤدي إلى تعطيل البنية

لقد قمت بحلها بإضافة هذه القاعدة في ملف 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"
      }]
    ]
  }
}]

إلى جانب ذلك ، قد تحتاج أيضًا إلى تعطيل عمليات التحقق من صحة eslint لمجلد dist الخاص بك ، لذلك ، يمكنك استخدام البرنامج النصي أدناه

  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 ، ووجدت أن كتاب القصص يتم إطلاقه بشكل صحيح في وضع dev ، ولكن تم كسره في وضع الإنتاج بسبب هذا التغيير. لذلك اضطررت إلى استبعاد 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 يدويًا @babel/plugin-transform-modules-commonjs ، بينما مع الخيار debug: true على @babel/preset-env أرى أنه مستخدم بالفعل ... لا أفهم ولكنه يعمل.

تحرير: هذا ليس حلاً لأنه يفقد مزايا وحدات ESM مع حزمة الويب. أحتاج إلى فرض تحويل إلى Cjs فقط من أجل إنشاءات القصص القصيرة.

: tada: My .storybook/.babelrc :: tada:

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