Storybook: babel-loader kollidiert mit create-react-app 2.1.3

+1

Bedeutet dies, dass wir babel-loader für CRA-Apps nicht installieren sollten?

Hmm, wenn ich babel-loader dep entferne, bricht das Bilderbuch ... 😕

Das gleiche Problem haben 😕

Gleiches Problem ... gibt es schon eine Problemumgehung?

@ ayoola-moore Ja, die Problemumgehung besteht darin, die Zeile in package.json zu ändern in:

"babel-loader": "8.0.4"

Auf diese Weise funktionieren sowohl react-scripts als auch storybook . Ich suche immer noch nach einer besseren Lösung. :verwirrt:

cc @artisologic @YoannDelpierre @ovionlogis @patricknick @mrmckeb @ivnkld @viniciusreiss @dlevs @Jipperism @euskonadox @fuadajip @AMTourky @greatermeans @tmeasday @ Eugene-Sviridov @nerfologist

@shilman , ich denke auch darüber nach. Wir könnten in Betracht ziehen, babel-loader aus Reaktionsskripten freizulegen ... das könnte helfen. Es gab kürzlich eine PR, die etwas Ähnliches für chalk tat (https://github.com/facebook/create-react-app/pull/6150).

Wäre es alternativ einfacher, wenn dies eine Abhängigkeit von @storybook/react ? Anstatt einer Peer-Abhängigkeit. Mir ist jedoch klar, dass dies für Nicht-CRA-Benutzer zu Problemen führen kann.

Oder wir könnten, wenn react-scripts existiert, babel-loader direkt aus react-scripts/node_modules/babel-loader importieren. Wir laden die Konfiguration bereits aus dem Ordner react-scripts .

@ igor-dv @ndelangen @tmeasday irgendwelche Meinungen zu den Optionen, die @mrmckeb oben

Die Problemumgehung scheint für mich nicht zu funktionieren. Ich sehe immer noch die Konflikte, nachdem ich die Problemumgehung versucht habe.

Die Problemumgehung scheint für mich nicht zu funktionieren. Ich sehe immer noch die Konflikte, nachdem ich die Problemumgehung versucht habe.

Stellen Sie sicher, dass Sie das führende "^" entfernen, da Sie sonst immer noch 8.0.5 erhalten

Ich denke, wir könnten wahrscheinlich babel-loader von jedem Ort verlangen, an dem react-scripts findet (unter Verwendung von requireFrom oder ähnlichem, obwohl es einfacher wäre, wenn react-scripts exportieren würde ), wenn wir die Webpack-Konfiguration von CRA verwenden.

Ein Preset würde das schöner machen, aber ich denke, wir haben bereits einen speziellen Fallcode für CRA (um die Konfiguration zu verwenden). Vielleicht wäre es dort relativ einfach, dies zu tun?

Die Problemumgehung scheint für mich nicht zu funktionieren. Ich sehe immer noch die Konflikte, nachdem ich die Problemumgehung versucht habe.

Stellen Sie sicher, dass Sie das führende "^" entfernen, da Sie sonst immer noch 8.0.5 erhalten

Folgendes habe ich in meinem package.json: "babel-loader": "8.0.4"

Gibt es andere Schritte, die für die Umgehung unternommen werden müssen?

@jlmelis , welche Version von "

@vsubbotskyy - Ich verwende die Create-React-App mit npx. Die angezeigte Version ist 2.1.3. Etwas anderes ist wahrscheinlich verrückt nach meinem Setup. Ich werde das nur im Auge behalten, um zu sehen, ob eine Lösung vorliegt. Vielen Dank!

Ich konnte die Arbeit zum Laufen bringen. Vielen Dank

Ich habe mich umgesehen und denke, dass es zu diesem Zeitpunkt einfacher sein wird, den Lader von CRA zu benötigen (wenn CRA verwendet wird). Ich mache jetzt eine PR.

@tmeasday , es wäre großartig, wenn Sie sich PR # 5308 ansehen und Feedback dazu geben könnten.

Ich habe das gleiche Problem durchgemacht und es schließlich behoben. Ich habe den Babel-Loader in meiner Datei package.json wieder auf "8.0.4" geändert und musste die json-Datei für die Paketsperre löschen. Anschließend konnte ich mit dem Storybook beginnen und testen. Ich hoffe das ist hilfreich.

"_Ich habe den Babel-Loader in meinem package.json_ wieder auf" 8.0.4 "geändert."
Ich hoffe, dass dies nicht die Lösung ist und bald behoben wird, da es uns daran hindert, Reaktionsskripte zu aktualisieren: /
Vielen Dank

+1

Tut mir leid, ich war 1,5 Wochen lang außer Gefecht und habe die Bewertung dazu nicht verfolgt. Tun Sie das jetzt.

Immer noch das gleiche Problem

Vielen Dank an @oscargws , wir untersuchen dies aktiv und # 5308 wurde @ndelangen , kannst du dir diese PR ansehen?

@ Mrmckeb ah sehr schön. Für alle anderen, die das Problem haben, hat das manuelle Ändern der Babel-Loader-Version in package.json das Problem für mich behoben!

Weiß jemand was genau dort kaputt ist? Es ist eine Patch-Version, scheint mir seltsam.

@ igor-dv, das Problem ist, dass CRA eine genaue Versionsübereinstimmung erwartet - und wenn etwas auf package.json installiert wird, das in Konflikt steht, wird ein Fehler ausgegeben. Immer wenn CRA eine oder zwei Versionen hinter sich hat (auch wenn es sich um eine Patch-Version handelt), können Benutzer diesen Fehler nach der Installation von Storybook sehen.

Die Lösung besteht darin, bei der Arbeit mit CRA die CRA-Version von babel-loader zu verwenden, damit dieses Problem nicht auftritt.

Die folgende Problemumgehung funktioniert für mich:

Das Ändern der Zeile in package.json in "babel-loader": "8.0.4" scheint das Problem zu beheben.

Irgendwelche Updates zu diesem? kann es nicht lösen, indem Sie einfach "babel-loader": "8.0.4" oder einen der anderen Schritte hinzufügen

Irgendwelche Updates zu diesem? kann es nicht lösen, indem Sie einfach "babel-loader": "8.0.4" oder einen der anderen Schritte hinzufügen

Ich konnte es beheben, indem ich Babel-Loader 8.0.4 sowohl als Abhängigkeit als auch als Peer-Abhängigkeit hinzufügte.

Ich konnte es beheben, indem ich Babel-Loader 8.0.4 sowohl als Abhängigkeit als auch als Peer-Abhängigkeit hinzufügte.

Leider nicht für mich, meine bittet mich um babel-loader": "8.0.5 , nicht sicher, ob das einen Unterschied macht, auch wenn ich npm ls babel-loader laufen lasse es dies:

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

@ Rolando-Barbella Versuchen Sie, die Version über das Feld resolution in Ihrer package.json auf 8.0.4

Ich habe die Version von 2.1.2 in 2.1.5 geändert und dann behoben

Ja, dies ist eine gute Problemumgehung für den

Das Aktualisieren von React-Skripten hat bei mir funktioniert (thx, @nguyentuandat). Ich war am 2.1.1, aktualisiert mit Anweisungen aus dem Changelog :

yarn add --exact [email protected]

Nachdem ich hier alles ausprobiert hatte, fand ich die Lösung.

Öffnen Sie einfach .profile in einem Texteditor (es ist im Home-Verzeichnis versteckt, drücken Sie also Strg + H).

Fügen Sie diese Zeile einfach am unteren Rand des .profils ein

export PATH = $ HOME / .node_modules_global / bin: $ PATH

und Voila ... es funktioniert

Bei Verwendung von "react-scripts": "2.1.8" und storybook v5 wird der gleiche Fehler angezeigt.
Wie von anderen angegeben, wurde das manuelle Hinzufügen von "babel-loader": "8.0.4" als devDependency behoben.

Installieren von "react-scripts": "2.1.5", und "@storybook/react": "^4.1.4", mit 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)

Wenn Sie npm ls babel-loader ausführen, wird
├─┬ UNMET DEPENDENCY [email protected]
│ └── UNMET DEPENDENCY [email protected]
└─┬ UNMET DEPENDENCY [email protected]
└── UNMET DEPENDENCY [email protected]

babel-loader ist in meinem package.json nicht vorhanden. Und das Hinzufügen der Version 8.0.4 als devDependency behebt das Problem für mich nicht.

npm i funktioniert wie erwartet. Aber wenn ich versuche, npm start finde ich das gleiche Problem:

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)

Guter Junge !! Ich habe gerade https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.25 mit PR # 5308 veröffentlicht, das auf dieses Problem verweist. Aktualisieren Sie noch heute, um es auszuprobieren!

Da es sich um eine Vorabversion handelt, finden Sie sie auf dem NPM-Tag @next .

Dieses Problem schließen. Bitte öffnen Sie erneut, wenn Sie der Meinung sind, dass noch mehr zu tun ist.

Ich habe gerade die neueste Betaversion ausprobiert. Wir verwenden das Storybook mit [email protected] und dem hier beschriebenen Typescript-Setup: https://storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

Dies schlägt jedoch fehl, da die Anforderung den CRA-Babel-Loader nicht finden kann. Gibt es dafür schon eine Lösung?

@mrmckeb etwas darüber wissen?

Ich habe gerade die neueste Betaversion ausprobiert. Wir verwenden das Storybook mit [email protected] und dem hier beschriebenen Typescript-Setup: https://storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

Dies schlägt jedoch fehl, da die Anforderung den CRA-Babel-Loader nicht finden kann. Gibt es dafür schon eine Lösung?

Ja, ich habe das gleiche Problem auch mit "react-scripts": "3.0.1"

Folgendes habe ich, nachdem ich der Codebasis ein Storybook hinzugefügt habe:

* 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] 

Hallo @patricknick und @wxqee , Sie sollten keine benutzerdefinierte Konfiguration haben, wenn Sie CRA verwenden :) TypeScript funktioniert

@shilman - Vielleicht sollten wir die Dokumente aktualisieren, um dies widerzuspiegeln?

Das babel-jest -Problem sollte in der neuesten Version von CRA wenden Sie sich bitte an https://github.com/facebook/create-react-app/issues.

Hallo @mrmckeb , danke für deine Hilfe! Ich habe gerade Ihre Lösung ausprobiert und meine benutzerdefinierte Datei webpack.config.js entfernt:

// @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;
};

Dies führt leider zu folgendem Fehler:

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>

Dies ist meine 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);

Könnte mir einen Hinweis dazu geben? Vielen Dank!

Ich bekomme das gleiche Problem. Es scheint sehr unglücklich zu sein, JSX analysieren.

@mrmckeb Ich habe gerade @storybook/preset-typescript und muss die Typoskript-Dokumente trotzdem aktualisieren. Wenn Sie mir mitteilen, was ich zu Typescript und CRA sagen soll, würde ich das gerne in das Update einarbeiten. Vielen Dank! 🙇

Danke @shilman. Das CRA-Preset verwendet die CRA-Konfiguration unter der Haube, sodass es alles unterstützt, was CRA tun kann - TypeScript, CSS-Module, Sass usw. Grundsätzlich ist nichts erforderlich, damit dies funktioniert. Installieren Sie es einfach und los geht's!

Wie oben erwähnt, stieß ich auf das oben genannte Problem mit babel-loader das Einrichten von Storybook wurde meine CRA in die Luft gesprengt. Ich habe die Version @storybook/[email protected] installiert. Das Storybook wird erstellt und ausgeführt, aber keine meiner Stories / Komponenten wird in der Benutzeroberfläche angezeigt. Und stdout alle meine Geschichten werfen diese Warnungen.

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} />)

Versuchte andere Variationen und keine Arbeit ...

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

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

Zurück zu 5.0.11 funktioniert es wieder für Storybook-Builds und gibt keine Warnungen mehr aus. Und meine CRA funktioniert wieder ... Muss ich etwas anderes für den Upgrade-Pfad tun? Richten Sie einfach das Storybook gestern so neu im Projekt ein.

Im Moment funktionieren die Dinge wieder ... aber ich habe Bedenken hinsichtlich des Zustands meiner Umgebung hinsichtlich der Veröffentlichung von 5.1.x .

Nur für den Fall, dass jemand anderes in der gleichen Situation wie ich landet: Ich konnte die Storybooks + CRA-Integration für mein ganzes Leben nicht zum Laufen bringen, wobei Storybooks das Build-Setup von CRA verwendet. Dann habe ich jedoch versucht, meine Geschichten in das Verzeichnis src/ meines CRA-Projekts zu verschieben, und plötzlich hat es funktioniert. Ich weiß nicht warum oder ob es die ganze Zeit empfohlen oder benötigt wurde, aber das hat es für mich behoben.

Ich habe auch dieses Problem mit einer neuen CRA-Typoskript-App. Neueste CRA aus Master und Storybook 5.0.11

@revmischa sind deine Geschichten unter src/ ?

Ja @shilman - Ich verwende im Grunde nur CRA und dann sb init: https://github.com/jetbridge/create-react-app/pull/1/files#diff -0ae46a2383dedcac5f5e369f5ca5f169R35

Die Geschichten sind in 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

Wenn ich es aus devDependencies entferne:

=> 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

Sieht so aus, als hätte ich eine andere Version in einem Projekt in einem umschließenden Ordner.

Ich habe alle meine Geschichten von ./stories/* auf ./src/stories/* verschoben und meine .storybook/config.js aktualisiert. Jetzt funktionieren die Dinge mit @storybook/[email protected] . Nachdem Sie dies neulich eingerichtet haben, ist die Dokumentation / Setup-Anleitung für React für diejenigen, die ein neues CRA-Setup erhalten, veraltet.

Andernfalls wird das Problem behoben 👍

Hallo zusammen, ja, bitte entfernen Sie Ihr babel-loader und führen Sie eine schnelle Stichprobe durch, um festzustellen, ob es woanders aufgeführt ist.

Sie können CRA auch anweisen, diese Prüfung zu überspringen, wenn Sie möchten, aber sie dient der Sicherheit ...

Ich habe immer noch dieses Problem mit @ storybook / react 5.0.11 und der neuesten Create-React-App von Master.
Das Problem ist, dass CRA Babel-Loader 8.0.5 will und sb init Ausführen "babel-loader": "^8.0.6" zu meiner packages.json hinzufügt
Wie wäre es also damit, zu erkennen, was Babel-Loader CRA bereits benötigt, und das hinzuzufügen? oder überspringen Sie einfach das Hinzufügen von babel-loader zu package.json in sb init, wenn CRA erkannt wird? Die beiden exakten Versionen zwischen Storybook und CRA synchron zu halten, ist keine Lösung für irgendetwas, basierend auf der Geschichte dieses Problems.

Bitte ich brauche wirklich Hilfe.

Ich versuche alles außer alles Arbeit.

`Möglicherweise liegt ein Problem mit dem Projektabhängigkeitsbaum vor.
Es ist wahrscheinlich kein Fehler in der Create React App, sondern etwas, das Sie lokal beheben müssen.

Das von Create React App bereitgestellte React-Scripts-Paket erfordert eine Abhängigkeit:

"babel-loader": "8.0.5"

Versuchen Sie nicht, es manuell zu installieren: Ihr Paketmanager führt es automatisch aus.
Eine andere Version von Babel-Loader wurde jedoch weiter oben im Baum erkannt:

c: \ Users \ Z-Dra \ node_modulesbabel-loader (Version: 8.0.6)

Es ist bekannt, dass die manuelle Installation inkompatibler Versionen zu schwer zu debuggenden Problemen führt.

Wenn Sie diese Prüfung lieber ignorieren möchten, fügen Sie einer .env-Datei in Ihrem Projekt SKIP_PREFLIGHT_CHECK = true hinzu.
Dadurch wird diese Nachricht dauerhaft deaktiviert, es können jedoch andere Probleme auftreten.

Führen Sie die folgenden Schritte in der genauen Reihenfolge aus, um den Abhängigkeitsbaum zu reparieren:

1. Löschen Sie package-lock.json (nicht package.json!) Und / oder yarn.lock in Ihrem Projektordner.
2. Löschen Sie node_modules in Ihrem Projektordner.
3. Entfernen Sie "babel-loader" aus Abhängigkeiten und / oder devDependencies in der Datei package.json in Ihrem Projektordner.
4. Führen Sie je nach verwendetem Paketmanager npm install oder garn aus.

In den meisten Fällen sollte dies ausreichen, um das Problem zu beheben.
Wenn dies nicht geholfen hat, können Sie noch einige andere Dinge ausprobieren:

1. Wenn Sie npm verwendet haben, installieren Sie Garn (http://yarnpkg.com/) und wiederholen Sie stattdessen die obigen Schritte damit.
   Dies kann hilfreich sein, da bei npm Probleme mit dem Heben von Paketen bekannt sind, die in zukünftigen Versionen möglicherweise behoben werden.

2. Überprüfen Sie, ob sich c: \ Users \ Z-Dra \ node_modulesbabel-loader außerhalb Ihres Projektverzeichnisses befindet.
   Beispielsweise haben Sie möglicherweise versehentlich etwas in Ihrem Home-Ordner installiert.

3. Versuchen Sie, npm ls babel-loader in Ihrem Projektordner auszuführen.
   Hier erfahren Sie, welches andere Paket (abgesehen von den erwarteten React-Skripten) den Babel-Loader installiert hat.

Wenn nichts anderes hilft, fügen Sie SKIP_PREFLIGHT_CHECK = true zu einer .env-Datei in Ihrem Projekt hinzu.
Dies würde diese Preflight-Prüfung dauerhaft deaktivieren, falls Sie trotzdem fortfahren möchten.

PS Wir wissen, dass diese Nachricht lang ist, aber bitte lesen Sie die obigen Schritte :-) Wir hoffen, Sie finden sie hilfreich!

npm ERR! Code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-scripts start
npm ERR! Beenden Sie den Status 1
npm ERR!
npm ERR! Fehler beim
npm ERR! Dies ist wahrscheinlich kein Problem mit npm. Es gibt wahrscheinlich zusätzliche Protokollierungsausgabe oben.

npm ERR! Ein vollständiges Protokoll dieses Laufs finden Sie in:
npm ERR! C: \ Benutzer \ Z-Dra \ AppData \ Roaming \ npm-cache_logs \ 2019-05-29T12_53_58_726Z-debug.log`

Bitte kann mir jemand helfen?

Ich stelle fest, dass ich babel-loader 8.0.6 global in meinem Home-Verzeichnis /home/user/node_modules installiert habe. Daher wurde unter meinem Projektverzeichnis Babel-Loader 8.0.5 installiert, sodass ich npm remove babel-loader auf meinem Home-Verzeichnis entferne Verzeichnis (8.0.6), als alle funktionieren gut.

Das ist eine blöde Frage, aber ...
Wofür brauche ich babel, wenn ich Typoskript verwende?

Danke @shilman , aber die Vorabversion scheint das Problem mit dem Babel-Loader nicht zu beheben.

Schritte gemacht:

1. Installieren Sie die neueste Typescript-Version. von CRA (React-Script 3.0.1) über npx create-react-app my-app --typescript
2. npx -p @storybook/cli sb init --type react
3. Konfigurieren Sie das Storybook für TS anhand der Anweisungen in https://storybook.js.org/docs/configurations/typescript-config/ & demo https://github.com/johot/storybook4-cra2-typescript-react-docgen-typescript-demo (Hinweis: webpack.config.js in der Demo ist veraltet und wird hier behoben: https://github.com/storybookjs/storybook/issues/5877#issuecomment-470186882)
4. Löschen Sie den Ordner yarn.lock & node modules.
5. Entfernen Sie @babel/core & babel-loader dev depedencies aus package.json
6. yarn add -D @storybook/react@next
7. yarn
8. yarn storybook - Fehler: 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"
  },

Grundlegendes Setup ohne Typescript funktioniert bei mir nicht einmal

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

CRA erwartet "babel-loader": "8.0.5" , findet aber 8.0.6 . Die generierten packages.json hsa sind jedoch folgende devDependencies aufgelistet:

  "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"
  }

Wenn Sie die Version auf "babel-loader": "8.0.5" , wird dieses Problem behoben.

Ich habe auch ein ähnliches Problem in einem anderen Projekt, in dem CRA (3.0.1) "webpack": "4.29.6" erwartet, aber 4.32.2 . Das ist in meinem Dependecird innerhalb der package.json nicht definiert
npm ls webpack zeigt:

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

[email protected] bietet eine neuere Version des Webpacks, CRA möchte jedoch eine ältere Version.
Das Hinzufügen von [email protected] zu den Abhängigkeiten behebt das Problem. Ich bin mir nicht ganz sicher, ob dies ein Problem mit dem Bilderbuch ist.

@vipyoshi Ein paar Kommentare:

• Sie sollten --type react . Lassen Sie es stattdessen die CRA-Vorlage verwenden.
• Dies ist in der neuesten Version @storybook/cli@next behoben und wir veröffentlichen dies in den nächsten 24 Stunden als stabil.

Im Ernst, warum wird Babel benötigt, wenn ich TypeScript verwende?

@shilman @mrmckeb mit der neuesten Version:

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

Die JSX-Syntax wird nicht in .storybooks/config.js und start-storybook schlägt mit einem Syntaxfehler fehl (beim ersten < ).

Die Verwendung der vorherigen Problemumgehung, bei der Babel-Loader installiert ist, die Version jedoch mit CRA synchronisiert ist, funktioniert einwandfrei.

Ich habe versucht zu überprüfen, ob CRA in einigen, aber nicht allen Ordnern babel-preset-react verwendet, bin aber nicht weitergekommen.

Für den Kontext verwende ich CRA 3.0.1 und habe es nicht ausgeworfen.

Was könnte das Problem noch sein (sollte ich eines öffnen)?
Wie kann ich helfen?

_{PS: Ich benutze übrigens einen Dekorateur für globale Stile.}

Die JSX-Syntax wird in .storybooks / config.js nicht transformiert, und start-storybook schlägt mit einem Syntaxfehler fehl (beim ersten <).

@ rlecaro2 Genau das gleiche Problem hier!

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

(Das Deklarieren von babel-loader auf v8.0.5 in devDependencies behebt ebenfalls dieses Problem.)

@revmischa Babel ist, wie Sie TypeScript verwenden können. Das TS-Team gibt zwei Pfade an - den TypeScript-Compiler oder ein Babel-Plugin.

@ rlecaro2 und @Akaryatrh , wir haben vor einigen Monaten eine Änderung vorgenommen, bei der in den neuesten Storybook-Versionen der Babel-Loader nicht neben CRA installiert ist, sondern in CRA gefunden wird.

Soweit ich weiß, haben Sie überhaupt keine Probleme - abgesehen von der Tatsache, dass Dateien innerhalb von .storybook nicht korrekt verarbeitet werden. Dies liegt daran, dass die Konfiguration der Create React App Dateien außerhalb der Quelle ignoriert.

Wir haben eine kleine Änderung vorgenommen, um TypeScript im Verzeichnis .storybook hier zuzulassen, und konnten dies auch für den Rest der Konfiguration tun. Ich gehe davon aus, dass Sie beide kein TypeScript verwenden, weshalb dieses Update bei Ihnen nicht funktioniert hat.

Ich bin ein wenig verwirrt, warum dieses devDependencies Fix funktioniert ... Ich denke, das muss auch untersucht werden.

Beachten Sie auch, dass dies ein neues Problem ist, das nicht mit dem oben genannten zusammenhängt. Da Kommentare hier alle Benutzer benachrichtigen, habe ich hier ein neues Ticket erstellt: # 7201. Bitte fügen Sie dort Details hinzu.

Großartig! Ich werde versuchen herauszufinden, wie die Dev-Abhängigkeit funktioniert. Nur für alle anderen ist das Problem # 7201 (kleiner Tippfehler).

@ ramonex1

Ja für mich ist es nur ein dummer Gedanke.

Es ist ein weiteres Knotenmodul in meinen Ordnern

Dies funktioniert bei mir immer noch nicht. Ich habe dieses Problem schon oft gesehen, kann aber anscheinend keinen endgültigen Fix- / Upgrade-Pfad oder Richtlinien zur Behebung finden.

Zu Ihrer Information, wir haben einige @mrmckeb - hoffentlich wird das

Ich habe auch das gleiche Problem und habe es auch behoben. Mein Projektname ist 'idash2' und ich installiere es auf

code / web / frontend / idash2

Das Problem ist jedoch, dass ich versehentlich node_modules in diesem Verzeichnis installiert habe

Code / Web / Frontend

Nachdem ich Code / Web / Frontend / Node_Modules entfernt und die React App erneut installiert habe, ist das Problem behoben.

Gutschrift für diese Lösung: Parinya Onsuwan

Ich habe das gleiche Problem und nichts scheint zu funktionieren ... gibt es eine dauerhafte Lösung für dieses Problem?

@isenese Ich glaube, dies ist Teil von https://www.npmjs.com/package/@storybook/preset -create-react-app oder wird in Kürze verfügbar sein

@isenese , sorry, ich war in letzter Zeit ein bisschen außer Gefecht.

Dies wird in neuen Versionen von Storybook behoben oder sollte es zumindest sein - bitte geben Sie Versionsdetails an, wenn Sie immer noch damit konfrontiert sind und wir Ihnen helfen können.

Hallo, ich bin ein CRA-Benutzer und hatte dieses Problem, als ich das Storybook mit dem folgenden Befehl initialisierte, der im Dokument für React beschrieben ist .

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

Dann habe ich das Problem behoben, indem ich Folgendes initialisiert habe.

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

(Und die automatische Erkennung ohne --type Option war auch erfolgreich. Cool!)

Ich denke, dies ist ein Mangel an Dokumentation und kann solche Fehler machen.
Bitte fügen Sie der Storybook for React- Seite eine Erklärung zu --type react_scripts oder erstellen Sie ein separates Tutorial für CRA.

Vielen Dank!

Wir testen auch eine neue Voreinstellung für CRA, die die integrierte Voreinstellung für CRA ersetzen würde. Dies sollte die zukünftige Einrichtung erleichtern.

Hallo, ich bin ein CRA-Benutzer und hatte dieses Problem, als ich das Storybook mit dem folgenden Befehl initialisierte, der im Dokument für React beschrieben ist .

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

Dann habe ich das Problem behoben, indem ich Folgendes initialisiert habe.

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

(Und die automatische Erkennung ohne --type Option war auch erfolgreich. Cool!)

Ich denke, dies ist ein Mangel an Dokumentation und kann solche Fehler machen.
Bitte fügen Sie der Storybook for React- Seite eine Erklärung zu --type react_scripts oder erstellen Sie ein separates Tutorial für CRA.

Vielen Dank!

Ich danke dir sehr! Ich ging damit Bananen.

Vielen Dank, ich werde mir eine Notiz machen, um diese Dokumentation zu aktualisieren.

@mrmckeb hat immer noch das gleiche Problem (CRA 3.3 + Storybook 5.2.8) und in den Dokumenten ist nichts über das Flag react_scripts - wäre toll, wenn es dort wäre, damit andere nicht gehen müssten durch die GH-Fragen, um dies zu finden ... 🎉

@aericson , entschuldige die Unannehmlichkeiten. Ich werde heute schauen.

Beachten Sie, dass dies in der erweiterten Konfiguration ist. Es sagt:

Möglicherweise haben Sie versucht, unsere Kurzanleitung zu verwenden, um Ihr Projekt für Storybook einzurichten. Wenn dies fehlschlug, weil nicht erkannt werden konnte, dass Sie React verwenden, können Sie versuchen, React zu verwenden.

Ich werde aktualisieren, um auch CRA zu erwähnen.

@mrmckeb Ich denke, es geht mehr nur ums Finden

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

aber nicht

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

in den Dokumenten beim Betrachten von:

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

Sie denken also, Sie machen alles richtig, indem Sie --type react wenn Sie ein CRA-Repo haben.

Die Verwendung von --type react führte zu Cannot find module 'babel-jest' Fehlern - --type react_scripts funktioniert sofort.

Verstanden, und die Dokumente sind jetzt @pkyeck aktualisiert :)

Ich denke insgesamt, dass ein Teil der Dokumente klarer sein sollte ... Ich hoffe, die Überarbeitung in # 9182 ist. @shilman wird bald veröffentlicht, denke ich.

Wenn Sie babel-loader auf package.json haben, können Sie die Anwendung nicht erstellen. Die beste Lösung, die ich bekommen habe, ist:
`

"devDependencies": {
"@ babel / core": "^ 7.12.3",
"@ storybook / addon-action": "^ 6.0.28",
"@ storybook / addon-essentials": "^ 6.0.28",
"@ storybook / addon-links": "^ 6.0.28",
"@ storybook / node-logger": "^ 6.0.28",
"@ storybook / preset-create-react-app": "^ 3.1.5",
"@ storybook / react": "^ 6.0.28",
"@ testing-library / dom": "^ 7.26.5",
"@ testing-library / react-hooks": "^ 3.4.2",
"@ types / react": "^ 16.9.56",
"@ types / react-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-react-app": "^ 5.2.1",
"eslint-import-resolver-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-react": "^ 7.21.5",
"eslint-plugin-react-hooks": "^ 4.2.0",
"jest-environment-jsdom-sixteen": "^ 1.0.3",
"jest-styled-components": "^ 7.0.3",
"json-server": "^ 0.16.2",
"msw": "^ 0,21.3",
"hübscher": "^ 2.1.2",
"react-docgen-typescript-plugin": "^ 0.6.0",
"reagieren-ist": "^ 17.0.1",
"React-Test-Renderer": "^ 17.0.1"
},
"Vorsätze": {
" / react-scripts / / babel-loader": "^ 8.1.0"
}}

`

Die Attibute-Auflösung mit der gleichen Bibliothek von Babel-Loader.

Bestätigen, dass dies immer noch ein Problem mit den neuesten Versionen von Creat-React-App und Storybook ist.

Bearbeiten: create-react-app beschwert sich über eine falsche Babel-Loader-Version in node_modules. Ich konnte das Problem mit yarn add -D --exact [email protected] beheben, der von CRA benötigten Version.

Kann bestätigen, dass ich auch darauf stoße? Können wir dieses Problem erneut öffnen? Ich möchte Babel-Loader nicht wirklich in mein Paket aufnehmen müssen, wenn ich es nicht selbst benutze?
Ich kann jedoch bestätigen, dass @DylanCulfogienis Fix funktioniert!

Wir installieren Babel-Loader nicht mehr in CRA-Apps, daher müssen wir das Problem @eglavin nicht erneut öffnen

Schlägt es bei einer Neuinstallation immer noch fehl?

das gleiche Problem hier

Wir installieren Babel-Loader nicht mehr in CRA-Apps, daher müssen wir das Problem @eglavin nicht erneut öffnen

Schlägt es bei einer Neuinstallation immer noch fehl?

Gleiches Problem hier: Wenn Ihre App mit Storybook ausgeführt werden muss, müssen Sie immer noch babel-loader einschließen.

Babel-Loader ist bereits in CRA enthalten und Storybook kann nur diesen verwenden. Nein?

Dies ist immer noch ein Problem bei Neuinstallationen der neuesten CRA / SB-Versionen (4.0.1 bzw. 6.1.18 zum Zeitpunkt dieses Schreibens).

Auch bei der Installation von CRA v4 mit SB v6.1 ist dies aufgetreten:

Gleiches Problem hier: Reagiere 4.0.1 und

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) 

PS: Sollten wir ein neues Problem eröffnen, da es sich um eine andere Version desselben Problems handelt?

Vielen Dank yarn add -D --exact [email protected] hat funktioniert!

Ich habe eine Monorepo und habe babel-loader zu meinem React web -Paket wie oben (8.1.0) hinzugefügt. Es hat den Fehler babel-loader behoben, aber neue Fehler erstellt:

../../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>'.

Ich konnte dieses Problem beheben, indem ich die Version von @types/react-dom auf "17.0.0" aktualisierte.

Die @ DylanCulfogienis- Lösung hat es nach einem halbtägigen Kampf auch für mich behoben. Es gibt einen weiteren Befehl von https://github.com/storybookjs/storybook/issues/12408, der hier eingepackt ist, aber dies ist das Setup, das mich zum Laufen gebracht hat:

# 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

Duplikat zu # 4764