Storybook: Storybook 5.0.0 Emotion-Theming und React Loader Bug

@ afrankel-sfdo Kannst du node_modules und yarn.lock entfernen und es erneut versuchen? Wir haben eine Menge Verrücktheit bei solchen Dingen gesehen, z. B. https://github.com/storybooks/frontpage/pull/28#issuecomment -468666553

@shilman sogar auf 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'

Das ist wirklich bizarr. Können Sie einen Repro zur Verfügung stellen? Das sehe ich nicht in meiner CRA-Test-App oder in meiner Gatsby-Test-App

Ich habe das gleiche mit @storybook/[email protected]

Bearbeiten: Das dritte Mal das Löschen von package-lock.json & node_modules hat den Trick für mich getan

Haben Sie das gleiche Problem hier in @ storybook /
Das Entfernen der Datei yarn.lock ist in unserem Prozess jedoch keine Option

das gleiche Problem auf 5.0.0 und ich bemerkte auch tief unten ...

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

Eine neue Storybook-Installation funktioniert einwandfrei. Sie haben nicht herausgefunden, was in unserem Projekt diese Probleme verursachen könnte.

@ afrankel-sfdo Ich sehe das gleiche Problem. Meine derzeitige Theorie ist, dass das Fehlen von @emotion/core die ModuleParseError . Ich habe npm i @emotion/core @emotion/styled was das Problem zu lösen schien. Seltsamerweise habe ich bemerkt, dass diese beiden Deps aus den package-lock.json , obwohl ich keine Ahnung habe, warum. Ich habe sie aus den package.json und die package-lock.json bei ihnen gelassen, und ich glaube, ich bin wieder im Geschäft, obwohl es nicht wirklich erklärt, was passiert ist.

Update: Dies wurde bemerkt, wenn npm ls @emotion/core nach den obigen Schritten ausgeführt wurde:

[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 wird nicht zum Stamm gehisst, wo der Build es erwartet (es ist irrelevant, weil es nicht mehr in meinem package.json ). require.resolve wird in @storybook/ui/paths.js aufgerufen, aber nur unter @storybook/theming installiert, sodass es in den node_modules in diesem Ordner verschachtelt ist, was bedeutet, dass require.resolve in @storybook/ui kann es nicht finden.

Ich möchte sagen, dass die Lösung darin besteht, @emotion/{core,styled} als Abhängigkeit zu @storybook/ui hinzuzufügen, da @storybook/ui sucht.

Ein weiteres Update: Wenn Sie Ihre package-lock.json nicht löschen möchten, scheint npm dedupe das Problem für mich gelöst zu haben.

@ FrAgFo0d Funktioniert es, wenn Sie Ihre yarn.lock löschen? Sie müssen Ihre Änderung nicht einchecken, aber es wäre hilfreich zu wissen, ob diese Lösung für Sie funktioniert. Wir werden es irgendwann auf den Grund gehen, aber im Moment fühlt es sich wie ein Garnwanze an ...

Ich habe das gleiche Problem und konnte es nicht durch Löschen des Garnschlosses beheben

yarn add @emotion/core @emotion/styled sofort behoben

Ich bekam einige wirklich seltsame emotionale Fehler. Das Löschen von node_modules, yarn.lock und das Ausführen von yarn cache clean vor der Installation hat das Problem für mich behoben.

Möglicherweise hängt das Problem mit zwei verschiedenen Emotionsversionen zusammen, die von Storybook / Core und Storybook / Theming verwendet werden. Das ist alles sehr seltsam, ich komme einfach nicht daran vorbei. Wenn ich die Emotionsbibliotheken manuell installiere, wird sie erstellt, aber ich erhalte Fehler im Browser ( Cannot read property 'Consumer' of undefined at ThemeProvider ) und nichts wird gerendert.

Es hat in einer makellosen CRA-App funktioniert, in meinem benutzerdefinierten Webpack-Setup jedoch nicht. Ich versuche, Storybooks für unsere React Native-Webkomponentenbibliothek einzurichten. Hier ist mein Test-Repo: https://github.com/MrLoh/universal-react-storybook

Ein Downgrade auf Storybook 4.1.13 das Problem behoben. Vielleicht ist es in meinem Projekt eine Inkompatibilität zwischen Storybook / React und Storybook / React-Native mit verschiedenen Versionen

@ MrLoh

Ich bin auch auf dieses Problem gestoßen (ich verwende jedoch @storybook/vue ).
Und ich fand heraus, dass eines der Pakete in package.json von einem alten @storybook/addons -Paket abhing, das intern von einem alten @emotion/* -Paket abhing.

Um dieses Problem zu umgehen, habe ich ein Feld resolutions für diese Bibliothek geschrieben, und das hat das Problem für mich gelöst.

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

@ FrAgFo0d Funktioniert es, wenn Sie Ihre yarn.lock löschen? Sie müssen Ihre Änderung nicht einchecken, aber es wäre hilfreich zu wissen, ob diese Lösung für Sie funktioniert. Wir werden es irgendwann auf den Grund gehen, aber im Moment fühlt es sich wie ein Garnwanze an ...

Ich wünschte, es wäre so, aber danach kann ich nicht sagen, dass das Problem durch die Installation anderer Elemente mit nicht übereinstimmenden Versionen oder durch das Storybook selbst verursacht wird.

Ich kann yarn add @emotion/core @emotion/styled versuchen, um zu sehen, ob es gelöst ist. `
Allerdings füge ich meinem eigenen Projekt lieber keine weiteren Abhängigkeiten hinzu;)

Wir haben für uns gearbeitet, um @storybook/theming als explizite Abhängigkeit hinzuzufügen

Ich habe gerade das gleiche Problem unter Mac OSX festgestellt. Unter Windows funktioniert alles einwandfrei. Unter Mac musste ich npm i @emotion/core @emotion/styled ausführen, damit es funktioniert

Hatte das gleiche Problem mit [email protected] , Homburg- Lösung funktionierte für mich

Das Entfernen der yarn.lock -Datei war für mich keine Option (und ich würde in den meisten Fällen davon abraten). Wir konnten es beheben durch ..

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

Ich hoffe, dies hilft allen anderen, die auf dieses Problem stoßen

+1 gleich für uns. Die einzige Lösung in diesem Thread, die funktionierte, war die Rückkehr zu Storybook 4

Ich hatte auch dieses Problem mit
@storybook/react: 5.0.3
MacOs Mojave
Gelöst mit:

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

Nach einem Upgrade von Version 5.0.3 auf Version 5.0.5 ist dasselbe Problem aufgetreten.

Gelöst mit:
yarn add --dev @storybook/theming

Ich bekomme immer noch dieses Problem. Ich habe die neuesten der folgenden:

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

Das Löschen des Caches hat nicht funktioniert. Es wird immer noch versucht, das alte emotion-theming -Paket zu finden:

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'

Ich habe das Paket emotion-theming installiert und alles funktioniert.

Es wurde genau wie bei @alexreardon behoben , indem emotion-theming installiert wurde: https://emotion.sh/docs/emotion-theming erhielt den folgenden Fehler:

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'

Ich möchte sagen, dass die Lösung darin besteht, @ emotions / {core, styled} als Abhängigkeit zu @ storybook / ui hinzuzufügen, da @ storybook / ui danach sucht.

Ich stimme @mAAdhaTTah zu, dass dies die richtige Lösung sein wird. Es ist falsch zu hoffen, dass ein Paketmanager die Abhängigkeit aufhebt.

Das gleiche Problem besteht auch bei @ storybook / react v5.0.6.

Voreinstellung konnte nicht geladen werden: "/Users/vinkumar2/Documents/Projects/PatternLibs/ReactPatternLib/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
IRREN! Fehler: Modul '@ emotions / core / package.json' kann nicht gefunden werden

Das Hinzufügen von @ emotions / core in DevDependencies hat geholfen und Storybook funktioniert. Sieht so aus, als würde es in Paketabhängigkeiten mit @ storybook / react fehlen.

Ich habe hier eine PR dafür eingefügt: # 6435

Egads !! Ich habe gerade https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.23 mit PR # 6435 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.

Die Alpha-Version hat das Problem für mich behoben , danke

Das Problem besteht in 5.0.10 weiterhin (nach npm-Protokollen handelt es sich um eine Version nach Alpha.23).

Fehlermeldung:

Voreinstellung konnte nicht geladen werden: "/.../node_modules/@storybook/core/dist/server/manager/manager-preset.js"
IRREN! Fehler: Modul 'emotions-theming / package.json' kann nicht gefunden werden

Stapelverfolgung:

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 Dieser Fix befindet sich im Release-Zweig 5.1.X, der sich derzeit noch in Alpha befindet ( 5.1.0-alpha.33 ).

@BrendanAnnable @alexlafroscia @devrelm Soll ich das 5.0.x patchen?

@shilman Ich

Das Problem hierbei ist, dass Garn (oder npm) seltsamerweise (in diesem Fall nicht) Pakete hebt. yarn list oder yarn why Ausgaben sind ebenfalls fehlerhaft:

% 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

Wie Sie sehen können, meldet Garn, dass es nur ein emotion-theming -Paket gibt, das zum Rooten hochgezogen werden sollte, aber es ist nicht der Fall: Es dupliziert das Paket an 4 Stellen über verschiedene Pakete hinweg. Ob es sich um einen Garn- / Npm-Fehler handelt, weiß ich nicht genau. Vielleicht verursacht die Kombination der Abhängigkeiten ' dependencies und peerDependencies dieses seltsame Verhalten? Mein Storybook-Setup schlägt fehl, wenn ich verschiedene Hauptversionen von Storybooks-Paketen habe, z. B. @storybook/[email protected] und @storybook/[email protected] nebeneinander.

Ich denke auch, dass unsere Kombination aus einem Monorepo-Garnarbeitsbereich und Nohoisting auf höchster Ebene ebenfalls Faktoren sein könnte, die dieses Problem verursachen:

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

Ich habe auch die gleichen Probleme, aber es scheint, dass die meisten der oben genannten Lösungen das Problem für mich nicht behoben haben.
Ich habe auch die Alpha-Version ausprobiert und immer noch den Fehler erhalten.
Das Problem für mich sieht immer noch so aus, dass zwei verschiedene Pakete nach zwei verschiedenen Versionen von @emotion/core suchen, sodass die manuelle Installation funktioniert, aber es gibt immer eines der beiden Pakete, die sich über die fehlende Version beschweren.

/[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]

Ich versuche auch, npm i @storybook/theming manuell hinzuzufügen, aber immer noch kein Glück.

@devrelm Ihr Fix (# 6435) sollte auch mit npm funktionieren und nicht nur Garn .. richtig?

@whyayala das hat bei mir funktioniert, danke!

Auf 5.x aktualisiert, auf den Fehler gestoßen und ich habe gerade mit genau dem gleichen Problem auf 5.1.9 aktualisiert.

Das heißt, ich bekomme nur eine Version von @ emotions / core (10.0.10)

@alasdairhurst Ich bin auch auf dieses Problem

Sie können es in diesem Demo-Projekt mit CRA sehen
https://github.com/marco-silva0000/cra-test-pnp-storybook

Wir haben für uns gearbeitet, um @storybook/theming als explizite Abhängigkeit hinzuzufügen

Hast du jemals verstanden, warum es geholfen hat? Weil es uns auch geholfen hat, was großartig ist! Aber ich verstehe nicht warum: P.

Wenn dies jemandem helfen kann - ich habe auch diesen Fehler erhalten und es hat eine Weile gedauert, bis mir klar wurde, dass ich das Paket außerhalb des Website-Ordners installiert habe ... Deshalb wurde die package.json nicht gefunden ...