Storybook: Storybook 5.0.0 - Thème des émotions et bug du chargeur React

@ afrankel-sfdo Pouvez-vous supprimer node_modules et yarn.lock et réessayer? Nous avons vu beaucoup d'étranges autour de choses comme celle-ci, par exemple https://github.com/storybooks/frontpage/pull/28#issuecomment -468666553

@shilman même sur info @storybook/react v5.0.0-rc.10 :

rm yarn.lock; rm -Rf node_modules/; yarn; yarn storybook

Error: Cannot find module 'emotion-theming/package.json'

C'est vraiment bizarre. Pouvez-vous fournir une reproduction? Ne pas voir cela dans mon application de test CRA ou dans mon application de test Gatsby

J'ai la même chose avec @storybook/[email protected]

edit: la troisième fois, la suppression de package-lock.json & node_modules a fait l'affaire pour moi

J'ai le même problème ici dans @ storybook /
Cependant, la suppression du fichier yarn.lock n'est pas une option dans notre processus

même problème sur 5.0.0 et j'ai également remarqué en bas ...

ModuleParseError: Module parse failed: Unexpected token (20:24)
You may need an appropriate loader to handle this file type.
|       console.info('HMR Configured');
|       module.hot.accept('layouts/App', () => {
>         ReactDOM.render(<App />, document.getElementById('root'));
|       });
|     }

    "@storybook/addon-a11y": "5.0.0",
    "@storybook/addon-actions": "5.0.0",
    "@storybook/addon-console": "^1.1.0",
    "@storybook/addon-info": "5.0.0",
    "@storybook/addon-knobs": "5.0.0",
    "@storybook/addon-links": "5.0.0",
    "@storybook/addon-notes": "5.0.0",
    "@storybook/addon-storyshots": "5.0.0",
    "@storybook/addon-viewport": "5.0.0",
    "@storybook/addons": "5.0.0",
    "@storybook/core": "5.0.0",
    "@storybook/react": "5.0.0",

Une nouvelle installation de livre d'histoires fonctionne bien, nous n'avons pas identifié ce qui dans notre projet pourrait causer ces problèmes.

@ afrankel-sfdo Je vois le même problème. Ma théorie actuelle est que l'absence de @emotion/core cause les ModuleParseError . J'ai couru npm i @emotion/core @emotion/styled ce qui semblait résoudre le problème. Bizarrement, j'ai remarqué que ces deux deps sont supprimés du package-lock.json , bien que je ne sache pas pourquoi. Je les ai retirés du package.json et laissé le package-lock.json avec eux, et je pense que je suis de retour dans les affaires, même si cela n'explique pas vraiment ce qui s'est passé.

Mise à jour: cela a été remarqué lors de l'exécution de npm ls @emotion/core après les étapes ci-dessus:

[email protected] /Users/jamesdigioia/Code/compiq/web
├── @emotion/[email protected]  extraneous
└─┬ @storybook/[email protected]
  └─┬ @storybook/[email protected]
    └── @emotion/[email protected]

npm ERR! extraneous: @emotion/[email protected] /Users/jamesdigioia/Code/compiq/web/node_modules/@emotion/core

@emotion/core n'est pas hissé à la racine, là où le build l'attend (c'est superflu car il n'est plus dans mon package.json ). require.resolve est appelé dans @storybook/ui/paths.js , mais il n'est installé que sous @storybook/theming , donc il est imbriqué dans le node_modules de ce dossier, ce qui signifie que le require.resolve dans @storybook/ui ne peut pas le trouver.

Je veux dire que la solution est d'ajouter @emotion/{core,styled} tant que dépendance à @storybook/ui , puisque @storybook/ui cherche.

Une autre mise à jour: si vous ne voulez pas supprimer votre package-lock.json , npm dedupe semble avoir résolu le problème pour moi.

@ FrAgFo0d Cela yarn.lock ? Vous n'avez pas besoin d'enregistrer votre modification, mais il serait utile de savoir si cette solution fonctionne pour vous. Nous allons finir par aller au fond des choses, mais pour l'instant, cela ressemble à un bug de fil ...

J'ai le même problème et je n'ai pas pu le résoudre en supprimant le yarn.lock

yarn add @emotion/core @emotion/styled immédiatement résolu

J'avais des erreurs liées aux émotions vraiment étranges. La suppression de node_modules, yarn.lock et l'exécution de yarn cache clean avant l'installation ont résolu le problème pour moi.

Peut-être que le problème est lié à deux versions d'émotions différentes utilisées par le livre d'histoires / le noyau et le livre d'histoires / la thématisation. Tout cela est très étrange, je ne peux tout simplement pas surmonter ça. Lorsque j'installe les bibliothèques d'émotions manuellement, elles se construisent, mais j'obtiens des erreurs dans le navigateur ( Cannot read property 'Consumer' of undefined at ThemeProvider ) et rien ne s'affiche.

Cela fonctionnait dans une application CRA vierge, mais dans ma configuration Webpack personnalisée, ce n'est pas le cas. J'essaie de configurer des livres d'histoires pour notre bibliothèque de composants Web natifs React. Voici mon dépôt de test: https://github.com/MrLoh/universal-react-storybook

Le passage au livre de contes 4.1.13 résolu le problème, alors c'est peut-être une incompatibilité dans mon projet entre storybook / react et storybook / react-native avec différentes versions

@MrLoh

J'ai également rencontré ce problème (j'utilise cependant @storybook/vue ).
Et j'ai trouvé que l'un des paquets dans package.json dépendait de l'ancien paquet @storybook/addons qui dépendait de l'ancien paquet @emotion/* en interne.

Pour contourner le problème, j'ai écrit le champ resolutions pour cette bibliothèque, et cela a résolu le problème pour moi.

  "resolutions": {
    "my-old-library/@storybook/addons":"^5.0.0"
  }

@ FrAgFo0d Cela yarn.lock ? Vous n'avez pas besoin d'enregistrer votre modification, mais il serait utile de savoir si cette solution fonctionne pour vous. Nous allons finir par aller au fond des choses, mais pour l'instant, cela ressemble à un bug de fil ...

J'aurais bien aimé, mais après cela, je ne peux pas dire que le problème est causé par l'installation d'autres éléments avec des versions non correspondantes ou par le livre d'histoires lui-même.

Je peux essayer yarn add @emotion/core @emotion/styled pour voir s'il est résolu. »
Cependant je préfère ne pas ajouter plus de dépendances dans mon propre projet;)

Nous avons travaillé pour ajouter @storybook/theming tant que dépendance explicite

Je viens de rencontrer le même problème sur Mac OSX, sous Windows tout fonctionne bien sur Mac, j'ai dû exécuter npm i @emotion/core @emotion/styled pour le faire fonctionner

Eu le même problème avec [email protected] , Hombourg solution a fonctionné pour moi

Supprimer le fichier yarn.lock n'était pas une option pour moi (et je recommanderais de ne pas le faire dans la plupart des cas). Nous avons pu y remédier en ..

$ rm -rf node_modules
$ yarn cache clean
$ yarn remove @storybook/core @storybook/theming [all other storybook deps]
$ yarn add -D @storybook/core @storybook/theming ....

j'espère que cela aidera quiconque à rencontrer ce problème

+1 même pour nous. La seule solution dans ce fil qui a fonctionné était de revenir au livre d'histoires 4

J'ai également eu ce problème avec
@storybook/react: 5.0.3
MacOs Mojave
Résolu avec:

yarn add --dev @emotion/core -W
yarn add --dev emotion-theming -W

Nous avons rencontré le même problème après une mise à niveau de la v5.0.3 vers la v5.0.5.

Résolu avec:
yarn add --dev @storybook/theming

Je reçois toujours ce problème. J'ai le dernier des éléments suivants:

• @storybook/theming
• @emotion/core
• @emotion/styled

Tout l'effacement du cache n'a pas fonctionné. Il essaie toujours de trouver l'ancien package emotion-theming :

info => Loading presets
WARN   Failed to load preset: "/Users/areardon/code/react-beautiful-dnd/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module 'emotion-theming/package.json'

J'ai installé le package emotion-theming et tout fonctionne.

Correction du problème comme emotion-theming : https://emotion.sh/docs/emotion-theming obtenait l'erreur suivante:

info @storybook/react v5.0.5
info 
info => Loading presets
WARN   Failed to load preset: "/Users/Felipe/Local_Projects/monorepo/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module 'emotion-theming/package.json'

Je veux dire que la solution est d'ajouter @ emotion / {core, styled} comme dépendance à @ storybook / ui, puisque @ storybook / ui le cherche.

Je suis d'accord avec @mAAdhaTTah que ce sera la bonne solution. Il est faux d'espérer qu'un gestionnaire de paquets lèvera la dépendance.

Le même problème existe également avec @ storybook / react v5.0.6.

Échec du chargement du préréglage: "/Users/vinkumar2/Documents/Projects/PatternLibs/ReactPatternLib/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
SE TROMPER! Erreur: impossible de trouver le module '@ emotion / core / package.json'

L'ajout de @ emotion / core dans DevDependencies a aidé et Storybook fonctionne. On dirait qu'il manque dans les dépendances de package avec @ storybook / react.

J'ai mis un PR pour ça ici: # 6435

Egads !! Je viens de publier https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.23 contenant PR # 6435 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.

La version Alpha a résolu le problème pour moi, merci @shilman !

Le problème persiste toujours dans la version 5.0.10 (par npm logs, c'est une version après l'alpha.23)

Message d'erreur:

Échec du chargement du préréglage: "/.../node_modules/@storybook/core/dist/server/manager/manager-preset.js"
SE TROMPER! Erreur: impossible de trouver le module 'emotion-theming / package.json'

trace de la pile:

stack: 'Error: Cannot find module \'emotion-theming/package.json\'\n    
at Function.Module._resolveFilename (module.js:536:15)\n    
at Function.resolve (internal/module.js:18:19)\n   
at Object.<anonymous> (/.../node_modules/@storybook/ui/paths.js:16:38)\n    
at Module._compile (module.js:635:30)\n    
at Object.Module._extensions..js (module.js:646:10)\n    
at Module.load (module.js:554:32)\n    
at tryModuleLoad (module.js:497:12)\n    
at Function.Module._load (module.js:489:3)\n    
at Module.require (module.js:579:17)\n    
at require (internal/module.js:11:18)\n    
at Object.<anonymous> (/.../node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:18:37)\n    
at Module._compile (module.js:635:30)\n    
at Object.Module._extensions..js (module.js:646:10)\n    
at Module.load (module.js:554:32)\n    
at tryModuleLoad (module.js:497:12)\n    
at Function.Module._load (module.js:489:3)',

@Stralos ce correctif se trouve dans la branche de version 5.1.X, qui est actuellement toujours en alpha ( 5.1.0-alpha.33 ).

@BrendanAnnable @alexlafroscia @devrelm Dois-je corriger le correctif dans 5.0.x ?

@shilman Je ne sais pas quel est le calendrier de publication du livre de contes (par exemple pour 5.1.x), mais cela bloque un certain nombre de projets de mise à niveau vers le livre de contes 5, alors j'aimerais que ce correctif atteigne une version non alpha si possible 🙂

Le problème ici est que le fil (ou npm) est étrangement (dans ce cas, pas) le levage de paquets. yarn list sorties yarn why sont également défectueuses:

% yarn why emotion-theming
yarn why v1.15.2
[1/4] 🤔  Why do we have the module "emotion-theming"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "_project_#some_project#@storybook#addon-actions#@storybook#theming" depends on it
   - Hoisted from "_project_#some_project#@storybook#addon-actions#@storybook#theming#emotion-theming"
✨  Done in 1.74s.

% yarn list emotion-theming
yarn list v1.15.2
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ [email protected]
✨  Done in 1.86s.

% find . -type d -name emotion-theming
./some_project/node_modules/@storybook/addon-actions/node_modules/emotion-theming
./some_project/node_modules/@storybook/theming/node_modules/emotion-theming
./node_modules/@storybook/ui/node_modules/emotion-theming
./node_modules/@storybook/router/node_modules/emotion-theming

Comme vous pouvez le voir, yarn rapporte qu'il n'y a qu'un seul package emotion-theming , qui devrait être hissé à la racine, mais ce n'est pas le cas: il duplique le package à 4 endroits sur différents packages. Que ce soit un bug de fil / npm, je ne suis pas sûr. Peut-être que la combinaison des dépendances ' dependencies et peerDependencies est à l'origine de ce comportement étrange? La configuration de mon livre de contes échoue lorsque j'ai différentes versions majeures de packages de livres de contes, par exemple @storybook/[email protected] et @storybook/[email protected] côte à côte.

Je pense également que notre combinaison d'un espace de travail de fil monorepo et de nohoisting de haut niveau pourrait également être des facteurs à l'origine de ce problème:

"workspaces": { "nohoist": [ "some_project/*", "some_project/@*/*", ], "packages": [ "some_project", ] },

Je rencontre également les mêmes problèmes, mais il semble que la plupart des solutions ci-dessus ne résolvent pas le problème pour moi.
J'ai également essayé la version alpha et j'ai toujours l'erreur.
Le problème pour moi ressemble toujours à ce que deux packages différents recherchent deux versions différentes de @emotion/core donc l'installation manuelle fonctionne, mais il y a toujours l'un des deux packages qui se plaignent de la version manquante.

/[email protected] /repos/ui
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   └── @emotion/[email protected]  deduped
├─┬ @storybook/[email protected]
│ └── @emotion/[email protected]
└─┬ @storybook/[email protected]
  └─┬ @storybook/[email protected]
    └─┬ @storybook/[email protected]
      └── UNMET PEER DEPENDENCY @emotion/[email protected]

npm ERR! peer dep missing: @emotion/core@^10.0.0, required by [email protected]

J'essaye aussi d'ajouter manuellement npm i @storybook/theming mais toujours pas de chance.

@devrelm votre correctif (# 6435) devrait fonctionner même avec npm, et pas seulement yarn .. correct?

@whyayala qui a fonctionné pour moi, merci!

Mise à niveau vers 5.x, a rencontré le bogue et je viens de mettre à jour vers 5.1.9 avec exactement le même problème.

Cela dit, je n'obtiens qu'une seule version de @ emotion / core (10.0.10)

@alasdairhurst J'ai également couru dans ce problème.

vous pouvez le voir sur ce projet de démonstration avec l'ARC
https://github.com/marco-silva0000/cra-test-pnp-storybook

Nous avons travaillé pour ajouter @storybook/theming tant que dépendance explicite

Avez-vous déjà compris pourquoi cela a aidé? Parce que cela nous a également aidé, ce qui est génial! Mais je ne comprends pas pourquoi: P

Si cela peut aider quelqu'un - j'ai aussi eu cette erreur, et il m'a fallu un certain temps pour réaliser que j'installais le package en dehors du dossier du site Web ... C'est pourquoi il n'a pas trouvé le package.json ...