Storybook: Storybook 5.0.0 error en el cargador de reacciones y temas emocionales

@ afrankel-sfdo ¿Puedes eliminar node_modules y yarn.lock e intentarlo de nuevo? Hemos visto mucha rareza en cosas como esta, por ejemplo, https://github.com/storybooks/frontpage/pull/28#issuecomment -468666553

@shilman incluso en 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'

Eso es realmente extraño. ¿Puede proporcionar una reproducción? No veo eso en mi aplicación de prueba CRA o en mi aplicación de prueba Gatsby

Tengo lo mismo con @storybook/[email protected]

editar: la tercera vez que borré package-lock.json y node_modules me sirvió

Tiene el mismo problema aquí en @ storybook / [email protected] ejecutándose en Mac OSX
Sin embargo, eliminar el archivo yarn.lock no es una opción en nuestro proceso

mismo problema en 5.0.0 y también noté abajo ...

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

Una instalación nueva de un libro de cuentos funciona bien, no hemos rastreado qué en nuestro proyecto podría estar causando estos problemas.

@ afrankel-sfdo Estoy viendo el mismo problema. Mi teoría actual es que la falta de @emotion/core causa el ModuleParseError . Ejecuté npm i @emotion/core @emotion/styled que pareció resolver el problema. Extrañamente, noté que esos dos departamentos se eliminan del package-lock.json , aunque no tengo idea de por qué. Los eliminé del package.json y dejé el package-lock.json con ellos, y creo que estoy de vuelta en el negocio, aunque realmente no explica lo que sucedió.

Actualización: noté esto al ejecutar npm ls @emotion/core después de los pasos anteriores:

[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 no se está elevando a la raíz, donde la compilación lo espera (es extraño porque ya no está en mi package.json ). require.resolve se llama en @storybook/ui/paths.js , pero solo se instala en @storybook/theming , por lo que está anidado en node_modules en esa carpeta, lo que significa que el require.resolve en @storybook/ui no puedo encontrarlo.

Quiero decir que la solución es agregar @emotion/{core,styled} como dependencia a @storybook/ui , ya que @storybook/ui está buscando.

Otra actualización: si no desea eliminar su package-lock.json , npm dedupe parece haber resuelto el problema por mí.

@ FrAgFo0d ¿ yarn.lock ? No es necesario que registre su cambio, pero sería útil saber si esa solución funciona para usted. Llegaremos al fondo de esto eventualmente, pero por ahora se siente como un error de hilo ...

Tengo el mismo problema y no pude resolverlo eliminando el yarn.lock

yarn add @emotion/core @emotion/styled lo resolvió inmediatamente

Estaba recibiendo algunos errores relacionados con las emociones realmente extraños. Eliminar node_modules, yarn.lock y ejecutar yarn cache clean antes de instalar solucionó el problema para mí.

Tal vez el problema esté relacionado con dos versiones de emociones diferentes que se utilizan en el libro de cuentos / núcleo y el libro de cuentos / temática. Todo esto es muy extraño, simplemente no puedo superar esto. Cuando instalo las bibliotecas de emociones manualmente, se compila, pero obtengo errores en el navegador ( Cannot read property 'Consumer' of undefined at ThemeProvider ) y no se procesa nada.

Funcionó en una aplicación CRA impecable, pero en mi configuración personalizada de Webpack no es así. Estoy intentando configurar libros de cuentos para nuestra biblioteca de componentes React Native Web. Aquí está mi repositorio de prueba: https://github.com/MrLoh/universal-react-storybook

La degradación a storybook 4.1.13 resolvió el problema, así que tal vez sea una incompatibilidad en mi proyecto entre storybook / react y storybook / react-native con diferentes versiones

@MrLoh

También encontré este problema (aunque uso @storybook/vue ).
Y encontré que uno de los paquetes en package.json dependía del antiguo paquete @storybook/addons que dependía del antiguo paquete @emotion/* internamente.

Como solución temporal, escribí el campo resolutions para esa biblioteca, y eso me resolvió el problema.

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

@ FrAgFo0d ¿ yarn.lock ? No es necesario que registre su cambio, pero sería útil saber si esa solución funciona para usted. Llegaremos al fondo de esto eventualmente, pero por ahora se siente como un error de hilo ...

Ojalá lo hiciera, pero después de hacer esto no puedo decir que el problema sea causado por otros elementos instalados con versiones que no coinciden o por el libro de cuentos en sí.

Puedo probar yarn add @emotion/core @emotion/styled para ver si se resuelve. '
Sin embargo, prefiero no agregar más dependencias en mi propio proyecto;)

Nos funcionó para agregar @storybook/theming como una dependencia explícita

Acabo de encontrar el mismo problema en Mac OSX, en Windows todo funciona bien en Mac Tuve que ejecutar npm i @emotion/core @emotion/styled para que funcione

Tuve el mismo problema con [email protected] , la solución de homburg funcionó para mí

Eliminar el archivo yarn.lock no era una opción para mí (y recomendaría no hacerlo en la mayoría de los casos). Pudimos arreglarlo por ...

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

Espero que esto ayude a cualquier otra persona a encontrarse con este problema.

+1 lo mismo para nosotros. La única solución en este hilo que funcionó fue volver al libro de cuentos 4

También tuve este problema con
@storybook/react: 5.0.3
MacOs Mojave
Resuelto con:

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

Encontramos el mismo problema después de una actualización de v5.0.3 a v5.0.5.

Resuelto con:
yarn add --dev @storybook/theming

Sigo recibiendo este problema. Tengo la última de las siguientes:

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

Todo el borrado de caché no funcionó. Todavía está tratando de encontrar el antiguo paquete 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'

Instalé el paquete emotion-theming y todo está funcionando.

Se corrigió como emotion-theming : https://emotion.sh/docs/emotion-theming recibía el siguiente error:

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'

Quiero decir que la solución es agregar @ emotion / {core, styled} como una dependencia a @ storybook / ui, ya que @ storybook / ui lo está buscando.

Estoy de acuerdo con @mAAdhaTTah en que esta será la solución correcta. Es incorrecto esperar que un administrador de paquetes eleve la dependencia.

También existe el mismo problema con @ storybook / react v5.0.6.

Error al cargar el preajuste: "/Users/vinkumar2/Documents/Projects/PatternLibs/ReactPatternLib/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
¡ERRAR! Error: no se puede encontrar el módulo '@ emotion / core / package.json'

Agregar @ emotion / core en DevDependencies ayudó y Storybook está funcionando. Parece que falta en las dependencias de paquetes con @ storybook / react.

He puesto un PR para esto aquí: # 6435

¡¡Por Dios !! Acabo de publicar https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.23 que contiene PR # 6435 que hace referencia a este problema. ¡Actualice hoy para probarlo!

Debido a que es una versión preliminar, puede encontrarla en la etiqueta @next NPM.

Cerrando este tema. Vuelva a abrir si cree que aún hay más por hacer.

La versión Alpha solucionó el problema para mí, ¡gracias @shilman !

El problema persiste en 5.0.10 (según los registros de npm, es una versión posterior a la alpha.23)

mensaje de error:

Error al cargar el preajuste: "/.../node_modules/@storybook/core/dist/server/manager/manager-preset.js"
¡ERRAR! Error: no se puede encontrar el módulo 'emotion-themeing / package.json'

seguimiento de pila:

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, esta corrección está en la rama de la versión 5.1.X, que actualmente todavía está en alfa ( 5.1.0-alpha.33 ).

@BrendanAnnable @alexlafroscia @devrelm ¿Debo volver a parchear la solución en 5.0.x ?

@shilman No estoy seguro de cuál es el calendario de lanzamiento del libro de cuentos (por ejemplo, para 5.1.x), pero esto está bloqueando una serie de proyectos que se actualizan al libro de cuentos 5, así que me encantaría que esta solución llegue a algún lanzamiento no alfa si es posible 🙂

El problema aquí es que el hilo (o npm) es extrañamente (en este caso, no) levanta paquetes. yarn list salidas de yarn why son defectuosas:

% 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

Como puede ver, Yarn informa que solo hay un paquete emotion-theming , que debería llevarse a la raíz, pero no es el caso: está duplicando el paquete en 4 lugares en diferentes paquetes. Si se trata de un error de yarn / npm, no estoy seguro. ¿Quizás la combinación de las dependencias dependencies y peerDependencies está causando este comportamiento extraño? La configuración de mi libro de cuentos falla cuando tengo diferentes versiones principales de paquetes de libros de cuentos, por ejemplo, @storybook/[email protected] y @storybook/[email protected] uno al lado del otro.

También creo que nuestra combinación de tener un espacio de trabajo de hilo monorepo y un no izado de alto nivel también podrían ser factores que causen este problema:

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

También tengo los mismos problemas, pero parece que la mayoría de las soluciones anteriores no me solucionaron el problema.
También probé la versión alfa y sigo recibiendo el error.
El problema para mí todavía parece que dos paquetes diferentes buscan dos versiones diferentes de @emotion/core por lo que la instalación manual funciona, pero siempre hay uno de los dos paquetes que se queja de la versión que falta.

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

También trato de agregar manualmente npm i @storybook/theming pero todavía no tengo suerte.

@devrelm su solución (# 6435) debería funcionar incluso con npm, y no solo con hilo ... ¿correcto?

@whyayala eso funcionó para mí, ¡gracias!

Actualizado a 5.x, encontré el error y acabo de actualizar a 5.1.9 con exactamente el mismo problema.

Dicho esto, solo obtengo una versión de @ emotion / core (10.0.10)

@alasdairhurst También encontré este problema.

puedes verlo en este proyecto de demostración con CRA
https://github.com/marco-silva0000/cra-test-pnp-storybook

Nos funcionó para agregar @storybook/theming como una dependencia explícita

¿Alguna vez entendiste por qué ayudó? Porque también nos ayudó, ¡lo cual es genial! Pero no entiendo por qué: P

Si esto puede ayudar a alguien, también recibí este error, y me tomó un tiempo darme cuenta de que estaba instalando el paquete fuera de la carpeta del sitio web ... Es por eso que no encontró el package.json ...