Storybook: babel-loader entre en conflit avec create-react-app 2.1.3

+1

Cela signifie-t-il que nous ne devrions pas installer babel-loader pour les applications de l'ARC?

Hmm quand je supprime babel-loader dep alors le livre d'histoire se brise ... 😕

Avoir le même problème 😕

Même problème ... une solution de contournement pour le moment?

@ ayoola-moore Oui, la solution de contournement consiste à changer la ligne en package.json en:

"babel-loader": "8.0.4"

De cette façon, react-scripts et storybook fonctionneront. Toujours à la recherche d'une meilleure solution. :confus:

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

@shilman , j'y pense aussi. Nous pourrions envisager d'exposer babel-loader partir de react-scripts ... cela pourrait aider. Il y a eu un PR récent qui a fait quelque chose de similaire pour chalk (https://github.com/facebook/create-react-app/pull/6150).

Sinon, serait-il simplement plus facile s'il s'agissait d'une dépendance de @storybook/react ? Plutôt qu'une dépendance entre pairs. Je me rends compte que cela pourrait cependant causer des problèmes aux utilisateurs non-CRA.

Ou, nous pourrions, lorsque react-scripts existe, importer directement babel-loader depuis react-scripts/node_modules/babel-loader . Nous chargeons déjà la configuration depuis le dossier react-scripts .

@ igor-dv @ndelangen @tmeasday des opinions sur les options que @mrmckeb a présentées ci-dessus? Est-ce quelque chose que nous pouvons gérer avec un préréglage de l'ARC?

La solution de contournement ne semble pas fonctionner pour moi. Je vois toujours les conflits après avoir essayé la solution de contournement.

La solution de contournement ne semble pas fonctionner pour moi. Je vois toujours les conflits après avoir essayé la solution de contournement.

Assurez-vous de supprimer le début "^" sinon vous obtiendrez toujours 8.0.5

Je pense que nous pourrions probablement avoir besoin de babel-loader partout où react-scripts trouve (en utilisant requireFrom ou similaire, bien que si react-scripts exportait, cela faciliterait les choses ) si nous utilisons la configuration Webpack de l'ARC.

Un préréglage rendrait cela plus agréable mais je pense que nous avons déjà un code de cas spécial pour CRA (pour utiliser sa configuration), alors peut-être que ce serait relativement facile de le faire là-bas?

La solution de contournement ne semble pas fonctionner pour moi. Je vois toujours les conflits après avoir essayé la solution de contournement.

Assurez-vous de supprimer le début "^" sinon vous obtiendrez toujours 8.0.5

Voici ce que j'ai dans mon package.json: "babel-loader": "8.0.4"

Y a-t-il d'autres étapes à suivre pour le contournement?

@jlmelis , quelle version de "

@vsubbotskyy -

J'ai pu faire fonctionner le travail. Merci

J'ai jeté un coup d'œil et je pense qu'à ce stade, il sera plus facile d'exiger le chargeur de l'ARC (lorsque l'ARC est utilisée). Je vais faire un PR maintenant.

@tmeasday , ce serait formidable si vous pouviez jeter un oeil à et faire part de vos commentaires sur le PR # 5308.

J'ai traversé le même problème et je l'ai finalement résolu. J'ai changé le babel-loader en "8.0.4" dans mon fichier package.json et j'ai dû supprimer le fichier json package-lock et j'ai ensuite pu démarrer et tester avec storybook. J'espère que ceci est utile.

"_J'ai rétabli le babel-loader en" 8.0.4 "dans mon package.json_"
J'espère que ce n'est pas la solution et que ce sera bientôt corrigé car cela nous empêche de mettre à jour react-scripts: /
Merci

+1

Désolé tout, je suis resté sans action pendant 1,5 semaine et je n'ai pas poursuivi l'examen à ce sujet. Faites-le maintenant.

J'ai toujours le même problème

Merci @oscargws , nous @ndelangen , pouvez-vous jeter un œil à ce PR?

@mrmckeb ah très gentil. Pour toute autre personne ayant le problème, changer manuellement la version de babel-loader dans package.json l'a corrigé pour moi!

Quelqu'un sait-il exactement ce qui est cassé là-bas? c'est une bosse de version de patch, cela me semble étrange.

@ igor-dv, le problème est que l'ARC s'attend à une correspondance de version exacte - et si quelque chose est installé sur package.json qui est en conflit, il génère une erreur. Ainsi, chaque fois que CRA est une version ou deux derrière (même s'il s'agit d'une version de correctif), les utilisateurs peuvent voir cette erreur après l'installation de Storybook.

La solution ici consiste à utiliser la version de l'ARC de babel-loader lorsque vous travaillez avec l'ARC, afin que ce problème ne se produise pas.

La solution de contournement suivante fonctionne pour moi:

Changer la ligne de package.json en "babel-loader": "8.0.4" semble résoudre le problème.

Des mises à jour à propos de celui-ci? ne peut pas le résoudre en ajoutant simplement "babel-loader": "8.0.4" ou l'une des autres étapes

Des mises à jour à propos de celui-ci? ne peut pas le résoudre en ajoutant simplement "babel-loader": "8.0.4" ou l'une des autres étapes

J'ai pu le résoudre en ajoutant babel-loader 8.0.4 à la fois comme dépendance et comme dépendance homologue.

J'ai pu le résoudre en ajoutant babel-loader 8.0.4 à la fois comme dépendance et comme dépendance homologue.

Unfournatatley pas pour moi, le mien me demande babel-loader": "8.0.5 , je ne sais pas si cela fait une différence, aussi, quand j'exécute npm ls babel-loader cela lance ceci:

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

@ Rolando-Barbella Essayez d'épingler la version via le champ resolution de votre package.json à 8.0.4

J'ai changé la version de 2.1.2 à 2.1.5 puis il a été résolu

Oui, c'est une bonne solution pour l'instant @nguyentuandat , mais seulement temporaire jusqu'à ce que nous

La mise à jour des scripts de réaction a fonctionné pour moi (merci, @nguyentuandat). J'étais sur 2.1.1, mis à jour avec les instructions du changelog :

yarn add --exact [email protected]

Après avoir tout essayé ici, j'ai trouvé la solution.

Ouvrez simplement .profile dans un éditeur de texte (il est caché dans le répertoire Home donc appuyez sur Ctrl + H)

Collez simplement cette ligne en bas du .profile

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

et voila ... ça marche

En utilisant "react-scripts": "2.1.8" et storybook v5, j'obtiens la même erreur.
Comme indiqué par d'autres, l'ajout manuel de "babel-loader": "8.0.4" tant que devDependency corrigé.

Installer "react-scripts": "2.1.5", et "@storybook/react": "^4.1.4", utilisant 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)

Lancer npm ls babel-loader lance ceci:
├─┬ UNMET DEPENDENCY [email protected]
│ └── UNMET DEPENDENCY [email protected]
└─┬ UNMET DEPENDENCY [email protected]
└── UNMET DEPENDENCY [email protected]

babel-loader n'est pas présent dans mon package.json. Et ajouter la version 8.0.4 en tant que devDependency ne résout pas le problème pour moi.

npm i fonctionne comme prévu. Mais en essayant de npm start je trouve le même problème:

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)

Bon courage!! Je viens de publier https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.25 contenant PR # 5308 qui fait référence à ce problème. Mettez à niveau dès aujourd'hui pour l'essayer!

Comme il s'agit d'une pré-version, vous pouvez la trouver sur la balise @next NPM.

Clôture de ce numéro. Veuillez rouvrir si vous pensez qu'il reste encore beaucoup à faire.

Je viens d'essayer la dernière version bêta. Nous utilisons un storybook avec [email protected] et la configuration Typescript décrite ici: https://storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

Cela échoue cependant car le require ne peut pas trouver le chargeur babel CRA. Y a-t-il déjà une solution à cela?

@mrmckeb sait quelque chose à ce sujet?

Je viens d'essayer la dernière version bêta. Nous utilisons un storybook avec [email protected] et la configuration Typescript décrite ici: https://storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

Cela échoue cependant car le require ne peut pas trouver le chargeur babel CRA. Y a-t-il déjà une solution à cela?

Ouais, j'ai aussi le même problème avec "react-scripts": "3.0.1"

Voici ce que j'ai après avoir ajouté un livre d'histoires à la base de code:

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

Salut @patricknick et @wxqee , vous ne devriez pas avoir de configuration personnalisée si vous utilisez CRA :) TypeScript est prêt à l' emploi . Essayez-le avec une nouvelle installation, pas de configuration personnalisée, et faites-moi savoir si cela ne fonctionne pas pour vous.

@shilman - peut-être devrions-nous mettre à jour les documents pour refléter cela?

Le problème babel-jest devrait être résolu dans la dernière version de CRA @ummahusla - sinon, veuillez le soulever à https://github.com/facebook/create-react-app/issues.

Salut @mrmckeb , merci pour votre aide! Je viens d'essayer votre solution et j'ai supprimé mon webpack.config.js personnalisé:

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

Malheureusement, cela entraîne l'erreur suivante:

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>

C'est mon 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);

Pourriez-vous me donner un indice à ce sujet? Merci!

Je reçois le même problème. Il semble être très mécontent d'analyser JSX .

@mrmckeb Je viens de publier @storybook/preset-typescript et j'ai quand même besoin de mettre à jour les documents dactylographiés. Si vous me faites savoir ce que je devrais dire à propos de Typescript et de l'ARC, je serais heureux de l'intégrer à la mise à jour. Merci! 🙇

Merci @shilman. Le préréglage CRA utilise la configuration CRA sous le capot, il prend donc en charge tout ce que CRA peut faire - TypeScript, modules CSS, Sass, etc. En gros, rien n'est nécessaire pour que cela fonctionne, installez-le et c'est parti!

Ran dans le problème babel-loader dessus comme mentionné, avec l'ajout de la configuration de Storybook, cela a fait exploser mon ARC. J'ai installé la version @storybook/[email protected] . Storybook sera construit et exécuté, mais aucune de mes histoires / composants ne se remplit dans l'interface utilisateur. Et stdout toutes mes histoires lancent ces avertissements.

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

J'ai essayé d'autres variantes et aucune ne fonctionne ...

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

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

Revenant à 5.0.11 cela fonctionne à nouveau pour les versions de Storybook et ne lance plus d'avertissements. Et mon ARC travaille à nouveau ... Dois-je faire autre chose pour le chemin de mise à niveau? Il suffit de configurer le livre d'histoires hier si nouveau dans le projet.

En ce moment, les choses fonctionnent à nouveau ... mais je m'inquiète de l'état de mon environnement concernant la sortie de 5.1.x .

Juste au cas où quelqu'un d'autre atterrirait dans la même situation que moi: je ne pourrais pas pour la vie de moi faire fonctionner l'intégration Storybooks + CRA, où Storybooks utilise la configuration de construction de CRA. Cependant, j'ai ensuite essayé de déplacer mes histoires dans le répertoire src/ de mon projet CRA, et tout à coup cela a fonctionné. Je ne sais pas pourquoi, ni si cela a été recommandé ou requis depuis le début, mais cela m'a résolu.

J'ai également ce problème avec une nouvelle application dactylographiée de l'ARC. Tout dernier CRA du maître et du livre d'histoires 5.0.11

@revmischa vos histoires sont-elles sous src/ ?

Oui @shilman - Je ne fais que https://github.com/jetbridge/create-react-app/pull/1/files#diff -0ae46a2383dedcac5f5e369f5ca5f169R35

Les histoires sont à l'intérieur de 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

Si je le supprime de 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

On dirait que j'ai eu une version différente dans un projet dans un dossier inclus.

J'ai déplacé toutes mes histoires de ./stories/* à ./src/stories/* et mis à jour mon .storybook/config.js et maintenant les choses fonctionnent avec le @storybook/[email protected] . Ayant juste configuré cela l'autre jour, la documentation / guide de configuration pour React sera obsolète pour ceux qui arrivent avec une nouvelle configuration de l'ARC.

Sinon, le problème semble corrigé 👍

Salut à tous, oui, assurez-vous de supprimer votre babel-loader et de faire une vérification ponctuelle rapide pour voir s'il est répertorié ailleurs.

Vous pouvez également dire à l'ARC de sauter ce chèque si vous le souhaitez, mais c'est là pour la sécurité ...

J'ai toujours ce problème avec @ storybook / react 5.0.11 et la dernière application create-react-app de master.
Le problème est que l'ARC veut babel-loader 8.0.5 et exécuter sb init ajoute "babel-loader": "^8.0.6" à mes packages.json
Alors qu'en est-il de détecter ce que l'ARC babel-loader requiert déjà et d'ajouter cela? ou simplement sauter l'ajout de babel-loader à package.json dans sb init si CRA est détecté? garder les deux versions exactes synchronisées entre le livre d'histoires et l'ARC n'est pas une solution pour quoi que ce soit, basée sur l'historique de ce problème.

S'il vous plaît, j'ai vraiment besoin d'aide.

j'essaye tout mais enything le travail.

`Il peut y avoir un problème avec l'arborescence des dépendances du projet.
Ce n'est probablement pas un bogue dans Create React App, mais quelque chose que vous devez corriger localement.

Le package react-scripts fourni par Create React App nécessite une dépendance:

"babel-loader": "8.0.5"

N'essayez pas de l'installer manuellement: votre gestionnaire de paquets le fait automatiquement.
Cependant, une version différente de babel-loader a été détectée plus haut dans l'arborescence:

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

L'installation manuelle de versions incompatibles est connue pour causer des problèmes difficiles à déboguer.

Si vous préférez ignorer cette vérification, ajoutez SKIP_PREFLIGHT_CHECK = true à un fichier .env de votre projet.
Cela désactivera définitivement ce message, mais vous pourriez rencontrer d'autres problèmes.

Pour corriger l'arborescence de dépendances, essayez de suivre les étapes ci-dessous dans l'ordre exact:

1. Supprimez package-lock.json (pas package.json!) Et / ou yarn.lock dans votre dossier de projet.
2. Supprimez node_modules dans votre dossier de projet.
3. Supprimez "babel-loader" des dépendances et / ou devDependencies dans le fichier package.json dans le dossier de votre projet.
4. Exécutez npm install ou yarn, selon le gestionnaire de packages que vous utilisez.

Dans la plupart des cas, cela devrait suffire à résoudre le problème.
Si cela n'a pas aidé, il y a quelques autres choses que vous pouvez essayer:

1. Si vous avez utilisé npm, installez yarn (http://yarnpkg.com/) et répétez les étapes ci-dessus avec lui à la place.
   Cela peut aider car npm a des problèmes connus avec le levage de paquets qui peuvent être résolus dans les versions futures.

2. Vérifiez si c: \ Users \ Z-Dra \ node_modulesbabel-loader est en dehors du répertoire de votre projet.
   Par exemple, vous avez peut-être accidentellement installé quelque chose dans votre dossier de départ.

3. Essayez d'exécuter npm ls babel-loader dans votre dossier de projet.
   Cela vous indiquera quel autre paquet (en dehors des scripts react attendus) a installé babel-loader.

Si rien d'autre ne vous aide, ajoutez SKIP_PREFLIGHT_CHECK = true à un fichier .env dans votre projet.
Cela désactiverait définitivement cette vérification en amont au cas où vous voudriez continuer de toute façon.

PS Nous savons que ce message est long mais veuillez lire les étapes ci-dessus :-) Nous espérons que vous les trouverez utiles!

npm ERR! code ELIFECYCLE
npm ERR! erreur no 1
npm ERR! [email protected] début: react-scripts start
npm ERR! Statut de sortie 1
npm ERR!
npm ERR! Échec du script de démarrage
npm ERR! Ce n'est probablement pas un problème avec npm. Il y a probablement une sortie de journalisation supplémentaire ci-dessus.

npm ERR! Un journal complet de cette exécution peut être trouvé dans:
npm ERR! C: \ Users \ Z-Dra \ AppData \ Roaming \ npm-cache_logs \ 2019-05-29T12_53_58_726Z-debug.log`

S'il vous plaît, quelqu'un peut m'aider?

Je découvre que j'ai babel-loader 8.0.6 installé globalement sur mon répertoire personnel /home/user/node_modules , donc sous mon répertoire de projet a été installé babel-loader 8.0.5, donc je supprime npm remove babel-loader sur ma maison répertoire (8.0.6), que tous fonctionnent très bien.

C'est une question stupide, j'en suis sûr mais ...
Si j'utilise dactylographié, pourquoi ai-je besoin de babel?

Merci @shilman , mais la pré-version ne semble pas résoudre le problème du chargeur babel.

Mesures prises:

1. Installez la dernière version de Typescript. de l'ARC (react-script 3.0.1) via npx create-react-app my-app --typescript
2. npx -p @storybook/cli sb init --type react
3. Configurez le livre d'histoires pour TS en utilisant les instructions de https://storybook.js.org/docs/configurations/typescript-config/ & demo https://github.com/johot/storybook4-cra2-typescript-react-docgen-typescript-demo (note: webpack.config.js dans la démo est obsolète et est corrigé ici: https://github.com/storybookjs/storybook/issues/5877#issuecomment-470186882)
4. Supprimez le dossier yarn.lock & modules de nœuds.
5. Supprimez les dépendances de @babel/core & babel-loader dev de package.json
6. yarn add -D @storybook/react@next
7. yarn
8. yarn storybook - Erreur: 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"
  },

La configuration de base sans Typescript ne fonctionne même pas pour moi

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

L'ARC s'attend à "babel-loader": "8.0.5" mais trouve 8.0.6 . Cependant, le packages.json hsa généré suivant devDependencies est répertorié:

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

La définition de la version sur "babel-loader": "8.0.5" résout ce problème.

J'ai également un problème similaire dans un autre projet où l'ARC (3.0.1) attend "webpack": "4.29.6" mais trouve 4.32.2 . Cela n'est pas défini dans ma dépendance à l'intérieur du package.json
npm ls webpack spectacles:

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

[email protected] fournit une version plus récente de Webpack, mais l'ARC souhaite une version plus ancienne.
L'ajout de [email protected] aux dépendances résout le problème. Je ne sais pas si c'est un problème avec le livre d'histoires.

@vipyoshi Quelques commentaires:

• Vous ne devriez pas passer --type react . Laissez-le utiliser le modèle de l'ARC à la place.
• Ceci est corrigé dans la dernière version @storybook/cli@next et nous publierons cela comme stable dans les prochaines 24h.

Mais sérieusement, pourquoi babel est-il nécessaire si j'utilise TypeScript?

@shilman @mrmckeb avec la dernière version:

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

La syntaxe JSX n'est pas transformée en .storybooks/config.js et start-storybook échoue avec une erreur de syntaxe (sur le premier < ).

L'utilisation de la solution de contournement précédente consistant à installer babel-loader mais avec la version synchronisée avec CRA fonctionne bien.

J'ai essayé de vérifier si l'ARC utilise babel-preset-react dans certains dossiers, mais pas dans tous, mais je n'ai obtenu aucun résultat.

Pour le contexte, j'utilise CRA 3.0.1 et je n'ai pas éjecté.

Quel autre pourrait être le problème (devrais-je en ouvrir un)?
Comment puis-je aider?

_{PS: J'utilise un décorateur pour les styles globaux btw.}

La syntaxe JSX n'est pas transformée dans .storybooks / config.js et start-storybook échoue avec une erreur de syntaxe (sur le premier <).

@ rlecaro2 Exactement le même problème ici!

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

(déclarer babel-loader à v8.0.5 dans devDependencies corrige également ce problème)

@revmischa Babel est la façon dont vous pouvez utiliser TypeScript. L'équipe TS donne deux chemins: le compilateur TypeScript ou un plugin Babel.

@ rlecaro2 et @Akaryatrh , nous avons fait un changement il y a quelques mois, où dans les dernières versions de Storybook, babel-loader n'est pas installé aux côtés de l'ARC, mais se trouve à la place depuis l'ARC.

Si je comprends bien, vous n'avez aucun problème - mis à part le fait que les fichiers dans .storybook ne sont pas traités correctement. En effet, la configuration de Create React App ignore les fichiers en dehors de la source.

Nous avons fait une petite modification pour autoriser TypeScript dans le répertoire .storybook ici , et pourrions faire de même pour le reste de la configuration. Je suppose que vous n'utilisez pas tous les deux TypeScript, c'est pourquoi ce correctif n'a pas fonctionné pour vous.

Je ne sais pas pourquoi ce correctif devDependencies fonctionne bien ... Je pense que cela nécessite également une enquête.

Notez également qu'il s'agit d'un nouveau problème, non lié à ce qui précède. Comme les commentaires ici alertent tous les utilisateurs, j'ai créé un nouveau ticket ici: # 7201. Veuillez y ajouter des détails.

Génial! Je vais essayer de comprendre ce qui fait fonctionner la dépendance dev. Pour n'importe qui d'autre, le problème est # 7201 (faute de frappe mineure).

@ ramonex1

Oui pour moi, c'est juste une pensée stupide.

C'est un autre module de nœud dans mes dossiers

Cela ne fonctionne toujours pas pour moi, j'ai vu ce problème beaucoup mais je n'arrive pas à trouver un chemin de correctif / mise à niveau définitif ou des instructions sur la façon de résoudre.

Pour info, nous avons un travail révolutionnaire sur le soutien de l'ARC provenant de

Je suis également confronté au même problème et je l'ai également résolu. Mon nom de projet est 'idash2' et je l'installe sur

code / web / frontend / idash2

Mais le problème est que j'ai accidentellement installé node_modules sur ce répertoire

code / web / frontend

Après avoir supprimé code / web / frontend / node_modules et réinstallé l'application react, le problème est résolu.

Crédit pour cette solution: Parinya Onsuwan

J'ai le même problème et rien ne semble fonctionner ... y a-t-il une solution de travail permanente pour ce problème?

@isenese Je crois que cela fait partie de https://www.npmjs.com/package/@storybook/preset -create-react-app ou le sera bientôt

@isenese , désolé, j'ai été un peu hors de combat récemment.

Ce problème est résolu dans les nouvelles versions de Storybook, ou du moins devrait l'être - veuillez fournir les détails de la version si vous êtes toujours confronté à ce problème et nous pouvons vous aider.

Bonjour, je suis un utilisateur CRA et j'ai rencontré ce problème lorsque j'ai initialisé le livre de contes par la commande suivante décrite dans le document pour React .

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

Ensuite, j'ai résolu le problème en initialisant avec ce qui suit.

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

(Et la détection automatique sans l'option --type a également réussi. Cool!)

Je pense que c'est un manque de documentation et que cela peut faire ce genre d'erreurs.
Veuillez ajouter une explication sur --type react_scripts à la page Storybook for React ou créer un didacticiel distinct pour l'ARC.

Merci!

Nous testons également un nouveau préréglage pour l'ARC, qui remplacerait le préréglage intégré pour l'ARC. Cela devrait faciliter la configuration future.

Bonjour, je suis un utilisateur CRA et j'ai rencontré ce problème lorsque j'ai initialisé le livre de contes par la commande suivante décrite dans le document pour React .

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

Ensuite, j'ai résolu le problème en initialisant avec ce qui suit.

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

(Et la détection automatique sans l'option --type a également réussi. Cool!)

Je pense que c'est un manque de documentation et que cela peut faire ce genre d'erreurs.
Veuillez ajouter une explication sur --type react_scripts à la page Storybook for React ou créer un didacticiel distinct pour l'ARC.

Merci!

Merci beaucoup! J'allais à la banane avec ça.

Merci les gars, je ferai une note pour mettre à jour cette documentation.

@mrmckeb rencontre toujours le même problème (CRA 3.3 + Storybook 5.2.8) et rien ne peut être trouvé dans la documentation à propos du drapeau react_scripts - ce serait bien de l'avoir là-bas pour que d'autres n'aient pas besoin d'y aller à travers les problèmes GH pour trouver cela ... 🎉

@aericson , désolé pour la gêne occasionnée. Je vais regarder aujourd'hui.

Remarque, ceci est dans la configuration avancée. Ça dit:

Vous avez peut-être essayé d'utiliser notre guide de démarrage rapide pour configurer votre projet pour Storybook. S'il échoue car il n'a pas pu détecter que vous utilisez React, vous pouvez essayer de le forcer à utiliser React.

Je mettrai à jour pour mentionner l'ARC aussi.

@mrmckeb Je pense qu'il s'agit plus uniquement de trouver

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

mais non

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

dans la documentation en regardant:

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

vous pensez donc que vous faites tout correctement en utilisant --type react lorsque vous avez un repo de l'ARC.

l'utilisation de --type react conduit à des erreurs Cannot find module 'babel-jest' - --type react_scripts fonctionne immédiatement.

Compris, et les documents sont maintenant mis à jour @pkyeck :)

Je pense que dans l'ensemble, cette partie de la documentation devrait être plus claire ... J'espère que la révision du # 9182 l'est. @shilman sortira bientôt je pense.

Lorsque vous avez babel-loader sur package.json, vous ne pouvez pas créer l'application. La meilleure solution que j'ai obtenue est:
»

"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-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-joli": "^ 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-plus jolie": "^ 3.1.4",
"eslint-plugin-react": "^ 7.21.5",
"eslint-plugin-react-hooks": "^ 4.2.0",
"jest-environnement-jsdom-seize": "^ 1.0.3",
"jest-styled-components": "^ 7.0.3",
"json-server": "^ 0.16.2",
"msw": "^ 0.21.3",
"plus joli": "^ 2.1.2",
"react-docgen-typescript-plugin": "^ 0.6.0",
"react-is": "^ 17.0.1",
"react-test-renderer": "^ 17.0.1"
},
"résolutions": {
" / react-scripts / / babel-loader": "^ 8.1.0"
}

»

La résolution d'attibute utilisant la même bibliothèque que babel-loader.

Confirmer qu'il s'agit toujours d'un problème avec les dernières versions de creat-react-app et storybook.

Edit: create-react-app se plaindra d'une version incorrecte de babel-loader dans node_modules. J'ai pu résoudre le problème en utilisant yarn add -D --exact [email protected] , qui était la version requise par l'ARC.

Puis-je confirmer que je rencontre également ce problème? Pouvons-nous rouvrir ce problème? Je ne veux pas vraiment avoir à inclure babel-loader dans mon paquet si je ne l'utilise pas moi-même?
Je peux cependant confirmer que le correctif

nous n'installons plus babel-loader dans les applications CRA, donc je ne pense pas que nous devions rouvrir le problème @eglavin

échoue-t-il toujours pour vous sur une nouvelle installation?

même problème ici

nous n'installons plus babel-loader dans les applications CRA, donc je ne pense pas que nous devions rouvrir le problème @eglavin

échoue-t-il toujours pour vous sur une nouvelle installation?

Même problème ici, si votre application doit fonctionner avec un livre d'histoires, vous devez toujours inclure babel-loader .

Babel-loader est déjà inclus dans l'ARC et le livre d'histoires peut simplement l'utiliser. Non?

C'est toujours un problème sur les nouvelles installations des dernières versions de CRA / SB (4.0.1 et 6.1.18, respectivement, au moment de la rédaction de cet article).

Également rencontré ce problème lors de l'installation de CRA v4 avec SB v6.1:

Même problème ici: React 4.0.1 et

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: Doit-on ouvrir un nouveau problème car il concerne une version différente du même problème?

Merci beaucoup @DylanCulfogienis , vous avez sauvé ma journée !! Je passe des heures à supprimer et installer le livre de contes et même le répertoire hold node_modules à nouveau et agian, et yarn add -D --exact [email protected] a fonctionné!

J'ai un Monorepo et j'ai ajouté babel-loader à mon package React web comme ci-dessus (8.1.0). Il a résolu l'erreur babel-loader mais a créé de nouvelles erreurs:

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

J'ai pu résoudre ce problème en mettant à jour la version de @types/react-dom vers "17.0.0".

La solution https://github.com/storybookjs/storybook/issues/12408 terminée ici, mais c'est la configuration qui m'a permis de démarrer:

# 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

dupliquer vers # 4764