Storybook: يتعارض محمل babel مع تطبيق create-react-app 2.1.3

+1

هل هذا يعني أنه لا يجب تثبيت babel-loader لتطبيقات CRA؟

حسنًا ، عندما أزيل babel-loader dep ثم ينكسر كتاب القصة ... 😕

وجود نفس المشكلة 😕

نفس المشكلة ... أي حل بديل حتى الآن؟

@ ayoola-moore نعم ، الحل هو تغيير الخط في package.json إلى:

"babel-loader": "8.0.4"

بهذه الطريقة سيعمل كل من react-scripts و storybook . ما زلت تبحث عن حل أفضل. :مشوش:

سم مكعبartisologicYoannDelpierreovionlogispatricknickmrmckebivnkldviniciusreissdlevsJipperismeuskonadoxfuadajipAMTourkygreatermeanstmeasday @ يوجين-سفيريدوفnerfologist

shilman ، أفكر أيضًا في هذا. يمكننا التفكير في تعريض babel-loader من نصوص تفاعلية ... قد تساعد. كانت هناك علاقات عامة حديثة قامت بشيء مماثل مقابل chalk (https://github.com/facebook/create-react-app/pull/6150).

بدلاً من ذلك ، هل سيكون الأمر أسهل إذا كانت هذه تبعية @storybook/react ؟ بدلا من الاعتماد على الأقران. أدرك أن هذا قد يسبب مشاكل لغير مستخدمي CRA بالرغم من ذلك.

أو يمكننا ، عند وجود react-scripts ، استيراد babel-loader من react-scripts/node_modules/babel-loader . لقد قمنا بالفعل بتحميل التكوين من المجلد react-scripts .

@ ايغور-DVndelangentmeasday أي آراء حول الخيارات التيmrmckeb تمت المبينة أعلاه؟ هل هذا شيء يمكننا التعامل معه باستخدام إعداد مسبق لـ CRA؟

يبدو أن الحل البديل لا يناسبني. ما زلت أرى التعارضات بعد تجربة الحل البديل.

يبدو أن الحل البديل لا يناسبني. ما زلت أرى التعارضات بعد تجربة الحل البديل.

تأكد من إزالة "^" البادئة وإلا ستستمر في الحصول على 8.0.5

أعتقد أننا قد نطلب على الأرجح babel-loader من أي مكان يجده react-scripts (باستخدام requireFrom أو ما شابه ، على الرغم من أنه إذا تم تصدير react-scripts فإنه سيجعل الأمر أسهل ) إذا كنا نستخدم webpack config.

الإعداد المسبق سيجعل ذلك أجمل ولكن أعتقد أن لدينا بالفعل رمز حالة خاص لـ CRA (لاستخدام التكوين الخاص به) ، لذا ربما يكون من السهل نسبيًا القيام بذلك هناك؟

يبدو أن الحل البديل لا يناسبني. ما زلت أرى التعارضات بعد تجربة الحل البديل.

تأكد من إزالة "^" البادئة وإلا ستستمر في الحصول على 8.0.5

هذا ما لدي في package.json الخاص بي: "babel-loader": "8.0.4"

هل هناك خطوات أخرى يجب اتخاذها للتغلب على المشكلة؟

jlmelis ، ما هو إصدار "رد فعل البرامج النصية" المثبت؟ يمكنني أن أؤكد أنه بالنسبة إلى "البرامج النصية التفاعلية": يبدو أن الحل البديل "2.1.3" يعمل بشكل جيد

vsubbotskyy - أنا أقوم بتشغيل تطبيق create-response-app باستخدام npx. الإصدار الذي يظهره هو 2.1.3. ربما شيء آخر غير مرغوب فيه مع إعدادي. سأراقب هذا فقط لمعرفة ما إذا كان سيتم الإصلاح. شكر!

تمكنت من الحصول على العمل حول العمل. شكر

ألقيت نظرة حولها ، وأعتقد أنه في هذه المرحلة سيكون من الأسهل طلبها في اللودر من CRA (عند استخدام CRA). سأقوم بعمل علاقات عامة الآن.

tmeasday ، سيكون رائعًا إذا كان بإمكانك إلقاء نظرة وتقديم ملاحظات على PR # 5308.

لقد مررت بنفس المشكلة وأصلحتها أخيرًا. لقد غيرت برنامج تحميل babel إلى "8.0.4" في ملف package.json الخاص بي واحتجت إلى حذف ملف json لقفل الحزمة وتمكنت بعد ذلك من البدء والاختبار باستخدام Storybook. آمل أن يكون هذا مفيدا.

"_ لقد غيرت برنامج تحميل babel إلى" 8.0.4 "في الحزمة الخاصة بي. json_"
آمل ألا يكون هذا هو الحل وسيتم إصلاحه قريبًا لأنه يمنعنا من تحديث البرامج النصية للتفاعل: /
شكر

+1

آسف كل شيء ، لقد كنت خارج العمل لمدة 1.5 أسبوعًا ولم أطارد المراجعة على هذا. القيام بذلك الآن.

لا تزال تواجه نفس المشكلة

شكرًا oscargws ، نحن نحقق في هذا الأمر بنشاط وتم رفع الرقم 5308 لحل هذه المشكلة. ndelangen ، هل يمكنك إلقاء نظرة على هذا العلاقات العامة؟

mrmckeb آه لطيفة جدا. بالنسبة لأي شخص آخر يواجه مشكلة ، فإن تغيير إصدار babel-loader في package.json قد أصلحه لي يدويًا!

لا أحد يعرف بالضبط ما كسر هناك؟ إنه إصدار تصحيح ، يبدو غريبًا بالنسبة لي.

@ igor-dv ، تكمن المشكلة في أن CRA تتوقع تطابقًا تامًا مع الإصدار - وإذا تم تثبيت شيء ما على package.json الذي يتعارض ، فسيحدث خطأ. لذلك ، في أي وقت يكون CRA إصدارًا أو نسختين (حتى لو كان إصدار تصحيح) ، يمكن للمستخدمين رؤية هذا الخطأ بعد تثبيت Storybook.

الحل هنا هو استخدام إصدار CRA من babel-loader عند العمل مع CRA ، حتى لا تحدث هذه المشكلة.

الحل التالي يعمل بالنسبة لي:

يبدو أن تغيير السطر في package.json إلى "babel-loader": "8.0.4" يصلح ذلك.

أي تحديثات حول هذا؟ لا يمكن حلها بمجرد إضافة "babel-loader": "8.0.4" أو أي من الخطوات الأخرى

أي تحديثات حول هذا؟ لا يمكن حلها بمجرد إضافة "babel-loader": "8.0.4" أو أي من الخطوات الأخرى

تمكنت من حلها عن طريق إضافة برنامج تحميل برنامج babel-loader 8.0.4 باعتباره تبعية وتبعية نظير.

تمكنت من حلها عن طريق إضافة برنامج تحميل برنامج babel-loader 8.0.4 باعتباره تبعية وتبعية نظير.

إن برنامج Unfournatley ليس مناسبًا لي ، فأنا يطلب مني babel-loader": "8.0.5 ، لست متأكدًا مما إذا كان هذا يحدث فرقًا ، أيضًا ، عندما أقوم بتشغيل npm ls babel-loader فإنه يرمي هذا:

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

@ Rolando-Barbella حاول تثبيت الإصدار من خلال الحقل resolution في الحزمة الخاصة بك. json إلى 8.0.4

لقد غيرت الإصدار من 2.1.2 إلى 2.1.5 ثم تم حله

نعم ، هذا حل جيد في الوقت الحالي nguyentuandat ، ولكنه مؤقت فقط حتى نتوصل إلى كيفية التعامل مع هذا بشكل صحيح.

نجح تحديث البرامج النصية للتفاعل بالنسبة لي (thx،nguyentuandat). كنت في 2.1.1 ، محدّثًا بإرشادات من سجل التغيير :

yarn add --exact [email protected]

بعد تجربة كل شيء هنا ، وجدت الحل.

فقط افتح الملف الشخصي في محرر نصوص (مخفي في الدليل الرئيسي ، لذا اضغط على Ctrl + H)

ما عليك سوى لصق هذا السطر في الجزء السفلي من الملف الشخصي

تصدير 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 غير موجود في الحزمة الخاصة بي. json. وإضافة الإصدار 8.0.4 باعتباره devDependency لا يحل المشكلة بالنسبة لي.

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.

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

لقد جربت للتو أحدث إصدار تجريبي. نحن نستخدم Storybook مع [email protected] وإعداد Typescript الموضح هنا: https://storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

فشل هذا على الرغم من أن الطلب لا يمكنه العثور على محمل بابل CRA. هل يوجد بالفعل حل لذلك؟

mrmckeb تعرف أي شيء عن هذا؟

لقد جربت للتو أحدث إصدار تجريبي. نحن نستخدم Storybook مع [email protected] وإعداد Typescript الموضح هنا: https://storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

فشل هذا على الرغم من أن الطلب لا يمكنه العثور على محمل بابل CRA. هل يوجد بالفعل حل لذلك؟

نعم ، لدي نفس المشكلة أيضًا مع "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] 

مرحبًا patricknick و wxqee ، لا يجب أن يكون لديك أي تكوين مخصص إذا كنت تستخدم CRA :) TypeScript يعمل خارج الصندوق. جربه بتثبيت جديد ، بدون تكوين مخصص ، واسمحوا لي أن أعرف ما إذا كان لا يعمل من أجلك.

shilman - ربما يتعين علينا تحديث المستندات لتعكس ذلك؟

يجب حل مشكلة babel-jest في أحدث إصدار من CRAummahusla - إذا لم يكن الأمر كذلك ، فيرجى رفعها على 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 وأحتاج إلى تحديث مستندات الكتابة على أي حال. إذا سمحت لي بمعرفة ما يجب أن أقوله حول Typescript و CRA ، فسيسعدني أن أعمل على ذلك في التحديث. شكر! 🙇

شكرا @ شيلمان. يستخدم الإعداد المسبق لـ CRA تكوين CRA تحت الغطاء ، لذلك فهو يدعم كل ما يمكن أن تفعله CRA - TypeScript ، وحدات CSS ، Sass ، إلخ. بشكل أساسي ، لا يوجد شيء مطلوب حتى يعمل هذا ، فقط قم بالتثبيت والانطلاق!

ركض في المشكلة أعلاه babel-loader كما هو مذكور ، مع إضافة إعداد Storybook ، فجر CRA الخاص بي. لقد قمت بتثبيت الإصدار @storybook/[email protected] . سيتم إنشاء Storybook وتشغيله ، ولكن لا يتم نشر أي من القصص / المكونات الخاصة بي في واجهة المستخدم. و 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 فإنها تعمل مرة أخرى مع إصدارات Storybook ولم تعد تلقي تحذيرات. و CRA الخاص بي يعمل مرة أخرى ... هل أحتاج إلى القيام بشيء آخر لمسار الترقية؟ فقط قم بإعداد كتاب القصة بالأمس جديد جدًا على المشروع.

في الوقت الحالي ، تعمل الأشياء مرة أخرى ... ولكن لديك مخاوف بشأن حالة بيئتي فيما يتعلق بإصدار 5.1.x .

فقط في حالة وقوع أي شخص آخر في نفس الموقف مثلي: لم أستطع طوال حياتي تشغيل تكامل Storybooks + CRA ، حيث تستخدم Storybooks إعداد إنشاء CRA. ومع ذلك ، حاولت بعد ذلك نقل قصصي إلى الدليل src/ لمشروع CRA الخاص بي ، وفجأة نجحت. لا أعرف لماذا ، أو إذا كان موصى به أو مطلوبًا طوال الوقت ، لكن هذا أصلح الأمر بالنسبة لي.

أواجه هذه المشكلة أيضًا ، مع تطبيق CRA المطبوع على الحروف جديد. أحدث CRA من Master و Storybook 5.0.11

revmischa هل قصصك أقل من src/ ؟

نعم shilman - أنا في الأساس أشغل CRA ثم sb init: https://github.com/jetbridge/create-react-app/pull/1/files#diff -0ae46a2383dedcac5f5e369f5ca5f169R35

القصص داخل 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

إذا قمت بإزالته من devDependencies:

=> 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 قديمًا بالنسبة لأولئك القادمين مع إعداد CRA جديد.

خلاف ذلك ، تبدو المشكلة ثابتة 👍

مرحبًا بالجميع ، نعم ، يرجى التأكد من إزالة babel-loader الخاص بك وإجراء فحص فوري لمعرفة ما إذا كان مدرجًا في مكان آخر.

يمكنك أيضًا إخبار CRA بتخطي هذا الفحص إذا كنت تريد ، ولكنه موجود من أجل السلامة ...

ما زلت أواجه هذه المشكلة مع @ storybook / رد فعل 5.0.11 وأحدث تطبيق create-response-من master.
المشكلة هي أن CRA تريد برنامج babel-loader 8.0.5 وتشغيل sb init يضيف "babel-loader": "^8.0.6" إلى الحزم الخاصة بي. json
إذن ماذا عن الكشف عن ما يتطلبه برنامج CRA لودر babel بالفعل وإضافة ذلك؟ أو تخطي إضافة babel-loader إلى package.json في sb init إذا تم اكتشاف CRA؟ الحفاظ على النسختين الدقيقتين متزامنتين بين القصص القصيرة و CRA ليس حلاً لأي شيء ، بناءً على تاريخ هذه المشكلة.

من فضلك أنا حقا بحاجة للمساعدة.

أحاول كل شيء ما عدا العمل.

قد تكون هناك مشكلة في شجرة تبعية المشروع.
من المحتمل ألا يكون هذا خطأ في تطبيق Create React ، ولكنه شيء تحتاج إلى إصلاحه محليًا.

تتطلب حزمة البرامج النصية التفاعلية التي يوفرها تطبيق Create React تبعية:

"Babel-loader": "8.0.5"

لا تحاول تثبيته يدويًا: يقوم مدير الحزم بذلك تلقائيًا.
ومع ذلك ، تم اكتشاف نسخة مختلفة من محمل babel في أعلى الشجرة:

c: \ Users \ Z-Dra \ node_modulesbabel-loader (الإصدار: 8.0.6)

من المعروف أن تثبيت الإصدارات غير المتوافقة يدويًا يتسبب في حدوث مشكلات يصعب تصحيحها.

إذا كنت تفضل تجاهل هذا الاختيار ، أضف SKIP_PREFLIGHT_CHECK = صحيح إلى ملف .env في مشروعك.
سيؤدي ذلك إلى تعطيل هذه الرسالة بشكل دائم ولكن قد تواجه مشكلات أخرى.

لإصلاح شجرة التبعية ، حاول اتباع الخطوات أدناه بالترتيب الصحيح:

1. احذف package-lock.json (وليس package.json!) و / أو yarn.lock في مجلد مشروعك.
2. احذف node_modules من مجلد مشروعك.
3. قم بإزالة "babel-loader" من التبعيات و / أو devDependencies في ملف package.json في مجلد مشروعك.
4. قم بتشغيل تثبيت npm أو الغزل ، اعتمادًا على مدير الحزم الذي تستخدمه.

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

1. إذا كنت تستخدم npm ، فقم بتثبيت الغزل (http://yarnpkg.com/) وكرر الخطوات المذكورة أعلاه بدلاً من ذلك.
   قد يساعد هذا لأن npm لديه مشكلات معروفة في رفع الحزم والتي قد يتم حلها في الإصدارات المستقبلية.

2. تحقق مما إذا كان c: \ Users \ Z-Dra \ node_modulesbabel-loader خارج دليل مشروعك.
   على سبيل المثال ، قد تكون قمت عن طريق الخطأ بتثبيت شيء ما في المجلد الرئيسي الخاص بك.

3. حاول تشغيل npm ls babel-loader في مجلد مشروعك.
   سيخبرك هذا بالحزمة الأخرى (بصرف النظر عن البرامج النصية للتفاعل المتوقع) المثبتة محمل babel.

إذا لم يساعدك شيء آخر ، فأضف SKIP_PREFLIGHT_CHECK = صحيح لملف env. في مشروعك.
سيؤدي ذلك إلى تعطيل فحص الاختبار المبدئي هذا نهائيًا في حالة رغبتك في المتابعة على أي حال.

ملاحظة: نعلم أن هذه الرسالة طويلة ولكن يُرجى قراءة الخطوات أعلاه :-) نأمل أن تجدها مفيدة!

npm خطأ! كود ELIFECYCLE
npm خطأ! يخطئ 1
npm خطأ! البداية [email protected] : react-scripts start
npm خطأ! حالة الخروج 1
npm خطأ!
npm خطأ! فشل في البرنامج النصي لبدء [email protected] .
npm خطأ! ربما لا تكون هذه مشكلة في npm. من المحتمل أن يكون هناك مخرجات تسجيل إضافية أعلاه.

npm خطأ! يمكن العثور على سجل كامل لهذا التشغيل في:
npm خطأ! C: \ Users \ Z-Dra \ AppData \ Roaming \ npm-cache_logs \ 2019-05-29T12_53_58_726Z-debug.log`

من فضلك شخص ما يمكن أن يساعدني؟

اكتشفت أن لديّ babel-loader 8.0.6 مثبتًا عالميًا على دليلي الرئيسي /home/user/node_modules ، لذلك تم تثبيت برنامج تحميل برنامج babel 8.0.5 ضمن دليل مشروعي ، لذا قمت بإزالة npm remove babel-loader منزلي الدليل (8.0.6) ، من كل شيء يعمل بشكل جيد.

أنا متأكد من أن هذا سؤال غبي ولكن ...
إذا كنت أستخدم الكتابة المطبوعة ، فماذا أحتاج إلى Babel؟

شكرًا shilman ، ولكن لا يبدو أن الإصدار المسبق يعمل على إصلاح مشكلة تحميل برنامج babel.

الخطوات المتخذة:

1. قم بتثبيت أحدث إصدار من Typescript. من CRA (نص رد الفعل 3.0.1) عبر npx create-react-app my-app --typescript
2. npx -p @storybook/cli sb init --type react
3. قم بتكوين Storybook لـ TS باستخدام الإرشادات الموجودة في https://storybook.js.org/docs/configurations/typescript-config/ & demo https://github.com/johot/storybook4-cra2-typescript-react-docgen-typescript-demo (ملاحظة: webpack.config.js في العرض التوضيحي قديم وتم إصلاحه هنا: https://github.com/storybookjs/storybook/issues/5877#issuecomment-470186882)
4. حذف المجلد yarn.lock & node modules.
5. إزالة تبعيات تطوير @babel/core & babel-loader من package.json
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"
  },

الإعداد الأساسي بدون Typescript لا يعمل حتى بالنسبة لي

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 hsa التالي لتتبع اعتمادات التطوير المدرجة:

  "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 ساعة القادمة.

على محمل الجد ، لماذا هناك حاجة إلى بابل إذا كنت أستخدم TypeScript؟

mrmckebshilman مع الإصدار الأخير:

"@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 مع خطأ في بناء الجملة (على < ).

إن استخدام الحل السابق المتمثل في تثبيت برنامج تحميل برنامج babel ولكن مع الإصدار المتزامن مع CRA يعمل بشكل جيد.

حاولت التحقق مما إذا كانت CRA تستخدم babel-preset-react في بعض المجلدات ولكن ليس كلها ولكن لم تصل إلى أي مكان.

للسياق ، أنا أستخدم CRA 3.0.1 ولم يتم إخراجها.

ماذا يمكن أن تكون المشكلة أيضًا (هل يجب أن أفتح واحدة)؟
كيف يمكنني أن أقدم المساعدة؟

_{ملاحظة: أنا أستخدم مصمم الديكور للأنماط العالمية بالمناسبة.}

لم يتم تحويل بناء جملة JSX إلى .storybooks / config.js ويفشل start-storybook مع وجود خطأ في بناء الجملة (في أول <).

@ 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);

(إعلان babel-loader لـ v8.0.5 في devDependencies أيضًا يعمل على إصلاح هذه المشكلة)

revmischa Babel هو كيف يمكنك استخدام TypeScript. يقدم فريق TS مسارين - مترجم TypeScript أو ملحق Babel.

@ rlecaro2 و Akaryatrh ، أجرينا تغييرًا منذ بضعة أشهر ، حيث في أحدث إصدارات Storybook ، لم يتم تثبيت تحميل babel جنبًا إلى جنب مع CRA ، وبدلاً من ذلك تم العثور عليه من داخل CRA.

كما أفهمها ، ليس لديك أي مشاكل على الإطلاق - بصرف النظر عن حقيقة أن الملفات الموجودة داخل .storybook لا تتم معالجتها بشكل صحيح. هذا لأن تكوين تطبيق Create React يتجاهل الملفات خارج المصدر.

لقد أجرينا تغييرًا بسيطًا للسماح لـ TypeScript داخل دليل .storybook هنا ، ويمكننا أن نفعل الشيء نفسه لبقية التكوين. أفترض أن كلاكما لا يستخدم TypeScript وهذا هو سبب عدم نجاح هذا الإصلاح بالنسبة لك.

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

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

عظيم! سأحاول معرفة ما الذي يجعل تبعية dev تعمل. فقط بالنسبة لأي شخص آخر ، المشكلة هي # 7201 (خطأ إملائي بسيط).

ههههههههه

نعم بالنسبة لي إنه مجرد فكرة غبية.

إنها وحدات عقدة أخرى في مجلداتي

هذا لا يزال لا يعمل بالنسبة لي ، لقد رأيت هذه المشكلة مجموعة كبيرة ولكن لا يبدو أن العثور على مسار إصلاح / ترقية نهائي أو إرشادات حول كيفية الإصلاح.

لمعلوماتك ، لدينا بعض العمل الذي يغير قواعد اللعبة بشأن دعم CRA القادم من

أواجه أيضًا نفس المشكلة ، وقمت أيضًا بإصلاحها. اسم مشروعي هو "idash2" وقمت بتثبيته على

كود / ويب / الواجهة الأمامية / idash2

لكن المشكلة هي أنني قمت بتثبيت node_modules بطريق الخطأ على هذا الدليل

كود / ويب / الواجهة الأمامية

بعد أن أزيل الكود / الويب / الواجهة الأمامية / node_modules وأعد تثبيت تطبيق رد الفعل مرة أخرى ، تم حل المشكلة.

الائتمان لهذا الحل: Parinya Onsuwan

أواجه نفس المشكلة ولا يبدو أنه يعمل ... هل يوجد حل دائم لهذه المشكلة؟

isenese أعتقد أن هذا جزء من https://www.npmjs.com/package/@storybook/preset -create-reaction-app أو سيكون قريبًا

isenese ، آسف لقد توقفت عن العمل مؤخرًا.

تم حل هذه المشكلة في الإصدارات الجديدة من Storybook ، أو على الأقل يجب أن يتم حلها - يرجى تقديم تفاصيل الإصدار إذا كنت لا تزال تواجه هذا ويمكننا المساعدة.

مرحبًا ، أنا من مستخدمي CRA وواجهت هذه المشكلة عندما قمت بتهيئة القصة المصورة عن طريق الأمر التالي الموضح في مستند React .

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

بعد ذلك ، أصلحت المشكلة عن طريق التهيئة بما يلي.

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

(وكان الاكتشاف التلقائي بدون خيار --type ناجحًا أيضًا. رائع!)

أعتقد أن هذا نقص في التوثيق ويمكن أن يرتكب مثل هذا النوع من الأخطاء.
الرجاء إضافة شرح حول --type react_scripts إلى Storybook for React page أو إنشاء برنامج تعليمي منفصل لـ CRA.

شكر!

نقوم أيضًا بتجربة إعداد مسبق جديد لـ CRA ، والذي سيحل محل الإعداد المسبق المدمج لـ CRA. هذا من شأنه أن يجعل الإعداد في المستقبل أسهل.

مرحبًا ، أنا من مستخدمي CRA وواجهت هذه المشكلة عندما قمت بتهيئة القصة المصورة عن طريق الأمر التالي الموضح في مستند React .

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

بعد ذلك ، أصلحت المشكلة عن طريق التهيئة بما يلي.

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

(وكان الاكتشاف التلقائي بدون خيار --type ناجحًا أيضًا. رائع!)

أعتقد أن هذا نقص في التوثيق ويمكن أن يرتكب مثل هذا النوع من الأخطاء.
الرجاء إضافة شرح حول --type react_scripts إلى Storybook for React page أو إنشاء برنامج تعليمي منفصل لـ CRA.

شكر!

شكرا جزيلا لك! كنت أذهب مع هذا الموز.

شكرًا يا رفاق ، سأدلي بملاحظة لتحديث تلك الوثائق.

لا يزال mrmckeb يواجه نفس المشكلة (CRA 3.3 + Storybook 5.2.8) ولا يمكن العثور على أي شيء في المستندات حول علامة react_scripts - سيكون من الرائع وجوده هناك حتى لا يحتاج الآخرون للذهاب من خلال قضايا GH للعثور على هذا ... 🎉

aericson ، آسف على الإزعاج. سأبحث اليوم.

لاحظ أن هذا موجود في التكوين المتقدم. انها تقول:

ربما حاولت استخدام دليل البدء السريع لإعداد مشروعك لـ Storybook. إذا فشلت لأنها لا تستطيع اكتشاف أنك تستخدم React ، يمكنك محاولة إجبارها على استخدام React.

سوف أقوم بالتحديث لذكر 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/

لذلك تعتقد أنك تفعل كل شيء بشكل صحيح باستخدام --type react عندما يكون لديك مستودع CRA.

استخدام --type react أدى إلى أخطاء Cannot find module 'babel-jest' - --type react_scripts يعمل خارج الصندوق.

فهمت ، ويتم الآن تحديث المستندات pkyeck :)

أعتقد بشكل عام أن هذا الجزء من المستندات يجب أن يكون أكثر وضوحًا ... آمل أن تكون المراجعة في # 9182 كذلك. shilman سيصدر قريباً على ما أعتقد.

عندما يكون لديك babel-loader على package.json ، لا يمكنك إنشاء التطبيق. أفضل حل حصلت عليه هو:
"

"devDependencies": {
"@ babel / core": "^ 7.12.3"،
"@ storybook / addon-Actions": "^ 6.0.28"،
"@ storybook / addon-essentials": "^ 6.0.28"،
"@ storybook / addon-links": "^ 6.0.28"،
"@ storybook / node-logger": "^ 6.0.28"،
"@ storybook / preset-create-reaction-app": "^ 3.1.5"،
"@ storybook / رد فعل": "^ 6.0.28"،
"@ testing-library / dom": "^ 7.26.5"،
"@ test-library / reaction-hooks": "^ 3.4.2"،
"@ أنواع / رد فعل": "^ 16.9.56"،
"@ types / reaction-dom": "^ 16.9.9"،
"@ types / Styled-components": "^ 5.1.4"،
"babel-loader": "8.1.0"،
"babel-eslint": "^ 10.1.0"،
"eslint-config-prettier": "^ 6.14.0"،
"eslint-config-reaction-app": "^ 5.2.1"،
"eslint-import-solutionver-typescript": "^ 2.3.0"،
"eslint-plugin-flowtype": "^ 4.7.0"،
"eslint-plugin-import": "^ 2.22.1"،
"eslint-plugin-jsx-a11y": "^ 6.3.1"،
"eslint-plugin-prettier": "^ 3.1.4"،
"eslint-plugin-reaction": "^ 7.21.5"،
"eslint-plugin-React-hooks": "^ 4.2.0"،
"jest-environment-jsdom-sixteen": "^ 1.0.3"،
"مكونات jest-style": "^ 7.0.3"،
"خادم json": "^ 0.16.2"،
"msw": "^ 0.21.3" ،
"أجمل": "^ 2.1.2"،
"React-docgen-typescript-plugin": "^ 0.6.0"،
"رد فعل هو": "^ 17.0.1"،
"رد فعل-اختبار-عارض": "^ 17.0.1"
} ،
"القرارات": {
" / رد فعل-
}

"

دقة السمة باستخدام نفس lib من محمل babel.

التأكيد على أن هذا لا يزال يمثل مشكلة في أحدث إصدارات تطبيق creat-reaction-app وكتاب القصص.

تحرير: سيشتكي create-react-app من إصدار محمل babel غير صحيح في node_modules. تمكنت من حل المشكلة باستخدام yarn add -D --exact [email protected] ، وهو الإصدار الذي تطلبه CRA.

يمكن أن أؤكد أنني واجهت هذا أيضًا ، هل يمكننا إعادة فتح هذه المشكلة؟ لا أريد حقًا أن أضطر إلى تضمين أداة تحميل babel في الحزمة الخاصة بي إذا لم أستخدمها بنفسي؟
يمكنني أن أؤكد أن DylanCulfogienis يعمل الإصلاح رغم ذلك!

لم نعد نثبت babel-loader في تطبيقات CRA ، لذلك لا أعتقد أننا بحاجة إلى إعادة فتح المشكلة eglavin

هل ما زال يفشل بالنسبة لك عند تثبيت جديد؟

نفس المشكلة هنا

لم نعد نثبت babel-loader في تطبيقات CRA ، لذلك لا أعتقد أننا بحاجة إلى إعادة فتح المشكلةeglavin

هل ما زال يفشل بالنسبة لك عند تثبيت جديد؟

نفس المشكلة هنا ، إذا كان تطبيقك يحتاج إلى العمل مع Storybook ، فلا تزال بحاجة إلى تضمين babel-loader .

تم تضمين Babel-loader بالفعل في CRA ويمكن للكتاب القصصي استخدام ذلك فقط. لا؟

لا تزال هذه مشكلة في عمليات التثبيت الحديثة لأحدث إصدارات CRA / SB (4.0.1 و 6.1.18 ، على التوالي ، في وقت كتابة هذا التقرير).

واجهت هذا أيضًا عند تثبيت CRA v4 مع SB v6.1:

نفس المشكلة هنا: React 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 ، لقد أنقذت يومي !! أقضي ساعات في إزالة وتثبيت القصص القصيرة وحتى عقد node_modules dir مرة أخرى و agian ، و yarn add -D --exact [email protected] نجح!

لدي Monorepo وأضفت babel-loader إلى حزمة React web النحو الوارد أعلاه (8.1.0). تم حل الخطأ 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