Storybook: babel-loader entra en conflicto con create-react-app 2.1.3

+1

¿Significa esto que no debemos instalar babel-loader para aplicaciones CRA?

Hmm, cuando elimino babel-loader dep, el libro de cuentos se rompe ... 😕

Tener el mismo problema 😕

El mismo problema ... ¿alguna solución alternativa?

@ ayoola-moore Sí, la solución es cambiar la línea en package.json a:

"babel-loader": "8.0.4"

De esta manera, funcionarán tanto react-scripts como storybook . Todavía estoy buscando una mejor solución. :confuso:

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

@shilman , también estoy pensando en esto. Podríamos considerar exponer babel-loader de react-scripts ... eso podría ayudar. Hubo un PR reciente que hizo algo similar por chalk (https://github.com/facebook/create-react-app/pull/6150).

Alternativamente, ¿sería más fácil si esto fuera una dependencia de @storybook/react ? En lugar de una dependencia de pares. Sin embargo, me doy cuenta de que eso podría causar problemas a los usuarios que no son CRA.

O podríamos, cuando exista react-scripts , importar directamente babel-loader desde react-scripts/node_modules/babel-loader . Ya cargamos la configuración desde la carpeta react-scripts .

@ igor-dv @ndelangen @tmeasday ¿ alguna opinión sobre las opciones que @mrmckeb ha expuesto anteriormente? ¿Es esto algo que podemos manejar con un preajuste de CRA?

La solución alternativa no parece funcionar para mí. Todavía veo los conflictos después de probar la solución.

La solución alternativa no parece funcionar para mí. Todavía veo los conflictos después de probar la solución.

Asegúrese de eliminar el "^" inicial; de lo contrario, seguirá obteniendo 8.0.5

Creo que probablemente podríamos requerir babel-loader fuera de donde react-scripts encuentre (usando requireFrom o algo similar, aunque si react-scripts exportara, lo haría ) si estamos usando la configuración del paquete web de CRA.

Un ajuste preestablecido lo haría mejor, pero creo que ya tenemos un código de caso especial para CRA (para usar su configuración), por lo que tal vez sería relativamente fácil hacer esto allí.

La solución alternativa no parece funcionar para mí. Todavía veo los conflictos después de probar la solución.

Asegúrese de eliminar el "^" inicial; de lo contrario, seguirá obteniendo 8.0.5

Esto es lo que tengo en mi package.json: "babel-loader": "8.0.4"

¿Hay otros pasos que deban tomarse para solucionar el problema?

@jlmelis , ¿qué versión de "react-scripts" está instalada? Puedo confirmar que para "react-scripts": la solución alternativa "2.1.3" parece estar funcionando bien

@vsubbotskyy : estoy ejecutando create-react-app con npx. La versión que muestra es 2.1.3. Algo probablemente más jodido con mi configuración. Solo vigilaré esto para ver si se soluciona. ¡Gracias!

Pude hacer que el trabajo funcionara. Gracias

Eché un vistazo y creo que en esta etapa será más fácil solicitarlo en el cargador de CRA (cuando se usa CRA). Haré un PR ahora.

@tmeasday , sería genial si pudieras echar un vistazo y proporcionar comentarios sobre el PR # 5308.

He pasado por el mismo problema y finalmente lo solucioné. Cambié el babel-loader de nuevo a "8.0.4" en mi archivo package.json y necesitaba eliminar el archivo json de bloqueo de paquete y luego pude comenzar y probar con storybook. Espero que esto sea útil.

"_He cambiado el cargador de babel de nuevo a" 8.0.4 "en mi package.json_"
Espero que esa no sea la solución y se solucione pronto porque nos bloquea la actualización de los scripts de reacción: /
Gracias

+1

Lo siento todo, estuve fuera de acción durante 1,5 semanas y no perseguí la revisión sobre esto. Haciéndolo ahora.

Sigo teniendo el mismo problema

Gracias @oscargws , estamos investigando esto activamente y se planteó el número 5308 para solucionarlo. @ndelangen , ¿puedes echar un vistazo a ese PR?

@mrmckeb ah muy agradable. Para cualquier otra persona que tenga el problema, ¡cambiar manualmente la versión de babel-loader en package.json lo ha solucionado!

¿Alguien sabe qué se rompió exactamente allí? es un golpe de versión de parche, me parece extraño.

@ igor-dv, el problema es que CRA espera una coincidencia exacta de la versión, y si se instala algo en package.json que entra en conflicto, arroja un error. Por lo tanto, cada vez que CRA tiene una versión o dos atrasadas (incluso si es una versión de parche), los usuarios pueden ver este error después de instalar Storybook.

La solución aquí es usar la versión de CRA de babel-loader cuando se trabaja con CRA, para que no ocurra este problema.

La siguiente solución me funciona:

Cambiar la línea en package.json a "babel-loader": "8.0.4" parece solucionarlo.

¿Alguna actualización sobre este? no puede resolverlo simplemente agregando "babel-loader": "8.0.4" o cualquiera de los otros pasos

¿Alguna actualización sobre este? no puede resolverlo simplemente agregando "babel-loader": "8.0.4" o cualquiera de los otros pasos

Pude resolverlo agregando babel-loader 8.0.4 como dependencia y como dependencia entre pares.

Pude resolverlo agregando babel-loader 8.0.4 como dependencia y como dependencia entre pares.

Unfournatatley no para mí, el mío me está pidiendo babel-loader": "8.0.5 , no estoy seguro de si eso hace una diferencia, también, cuando ejecuto npm ls babel-loader arroja esto:

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

@ Rolando-Barbella Intenta anclar la versión a través del campo resolution en tu package.json a 8.0.4

Cambié la versión de 2.1.2 a 2.1.5 luego se resolvió

Sí, esta es una buena solución por ahora @nguyentuandat , pero solo temporal hasta que averigüemos cómo manejar esto correctamente.

Actualizar los scripts de reacción funcionó para mí (gracias, @nguyentuandat). Estaba en 2.1.1, actualizado con instrucciones del registro de cambios :

yarn add --exact [email protected]

Después de probar todo aquí, encontré la solución.

Simplemente abra .profile en un editor de texto (está oculto en el directorio de inicio, así que presione Ctrl + H)

Simplemente pegue esta línea en la parte inferior del .profile

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

y voila .... funciona

Usando "react-scripts": "2.1.8" y storybook v5, obtengo el mismo error.
Como dijeron otros, agregar manualmente "babel-loader": "8.0.4" como devDependency solucionó.

Instalando "react-scripts": "2.1.5", y "@storybook/react": "^4.1.4", usando 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)

Ejecutar npm ls babel-loader arroja esto:
├─┬ UNMET DEPENDENCY [email protected]
│ └── UNMET DEPENDENCY [email protected]
└─┬ UNMET DEPENDENCY [email protected]
└── UNMET DEPENDENCY [email protected]

babel-loader no está presente en mi package.json. Y agregar la versión 8.0.4 como devDependency no soluciona el problema para mí.

npm i funciona como se esperaba. Pero al intentar npm start , encuentro el mismo problema:

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)

Buen golly !! Acabo de publicar https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.25 que contiene PR # 5308 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.

Acabo de probar la última versión beta. Estamos usando storybook con [email protected] y la configuración de TypeScript que se describe aquí: https://storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

Sin embargo, esto falla ya que el require no puede encontrar el cargador de babel de CRA. ¿Existe ya una solución para eso?

@mrmckeb sabes algo sobre esto?

Acabo de probar la última versión beta. Estamos usando storybook con [email protected] y la configuración de TypeScript que se describe aquí: https://storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

Sin embargo, esto falla ya que el require no puede encontrar el cargador de babel de CRA. ¿Existe ya una solución para eso?

Sí, también tengo el mismo problema con "react-scripts": "3.0.1"

Esto es lo que obtuve después de agregar el libro de cuentos al código base:

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

Hola @patricknick y @wxqee , no deberías tener ninguna configuración personalizada si estás usando CRA :) TypeScript funciona de inmediato. Pruébelo con una instalación nueva, sin configuración personalizada, y avíseme si no le está funcionando.

@shilman , ¿quizás deberíamos actualizar los documentos para reflejar esto?

El problema babel-jest debe resolverse en la última versión de CRA @ummahusla ; de lo contrario, https://github.com/facebook/create-react-app/issues.

Hola @mrmckeb , ¡gracias por tu ayuda! Acabo de probar su solución y eliminé mi webpack.config.js personalizado:

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

Desafortunadamente, esto da como resultado el siguiente error:

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>

Este es mi 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);

¿Podría darme una pista sobre esto? ¡Gracias!

Tengo el mismo problema. Parece estar muy descontento con el análisis de JSX .

@mrmckeb Acabo de publicar @storybook/preset-typescript y necesito actualizar los documentos mecanografiados de todos modos. Si me deja saber lo que debo decir sobre Typecript y CRA, me complacerá incluirlo en la actualización. ¡Gracias! 🙇

Gracias @shilman. El ajuste preestablecido de CRA usa la configuración de CRA bajo el capó, por lo que tiene soporte para todo lo que CRA puede hacer: TypeScript, módulos CSS, Sass, etc. Básicamente, no se requiere nada para que esto funcione, ¡simplemente instálelo y listo!

Me encontré con el problema babel-loader como se mencionó, con la adición de configurar Storybook hizo explotar mi CRA. Instalé la versión @storybook/[email protected] . Storybook se compilará y se ejecutará, pero ninguna de mis historias / componentes se completará en la interfaz de usuario. Y stdout todas mis historias están lanzando estas advertencias.

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

Probé otras variaciones y ninguna funciona ...

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

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

Volviendo a 5.0.11 , funciona nuevamente para las compilaciones de Storybook y ya no arroja advertencias. Y mi CRA está funcionando de nuevo ... ¿Tengo que hacer algo más para la ruta de actualización? Simplemente configuró el libro de cuentos ayer tan nuevo en el proyecto.

Ahora mismo las cosas están funcionando de nuevo ... pero me preocupa el estado de mi entorno con respecto al lanzamiento de 5.1.x .

En caso de que alguien más caiga en la misma situación que yo: no pude por mi vida hacer que la integración de Storybooks + CRA funcionara, donde Storybooks usa la configuración de compilación de CRA. Sin embargo, luego intenté mover mis historias al directorio src/ de mi proyecto CRA, y de repente funcionó. No sé por qué, o si se ha recomendado o requerido todo el tiempo, pero esto me solucionó.

También tengo este problema, con una nueva aplicación de mecanografiado CRA. CRA más reciente del master and storybook 5.0.11

@revmischa, ¿ están tus historias por debajo de src/ ?

Sí @shilman : básicamente estoy ejecutando CRA y luego sb init: https://github.com/jetbridge/create-react-app/pull/1/files#diff -0ae46a2383dedcac5f5e369f5ca5f169R35

Las historias están dentro 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 lo elimino 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

Parece que tenía una versión diferente en un proyecto en una carpeta adjunta.

Moví todas mis historias de ./stories/* a ./src/stories/* y actualicé mi .storybook/config.js y ahora todo está funcionando con @storybook/[email protected] . Habiendo configurado esto el otro día, la guía de documentación / configuración de React estará desactualizada para aquellos que ingresen con una nueva configuración de CRA.

De lo contrario, el problema parece arreglado 👍

Hola a todos, sí, asegúrese de eliminar su babel-loader y haga una verificación rápida para ver si aparece en otro lugar.

También puede decirle a CRA que omita esa verificación si lo desea, pero está ahí por seguridad ...

Todavía tengo este problema con @ storybook / react 5.0.11 y la última aplicación create-react-app de master.
El problema es que CRA quiere babel-loader 8.0.5 y ejecutar sb init agrega "babel-loader": "^8.0.6" a mis paquetes.json
Entonces, ¿qué hay de detectar lo que la CRA de babel-loader ya requiere y agregar eso? o simplemente omita agregar babel-loader a package.json en sb init si se detecta CRA? mantener las dos versiones exactas sincronizadas entre el libro de cuentos y la CRA no es una solución para nada, según la historia de este problema.

Por favor, realmente necesito ayuda.

Intento todo, pero todo funciona.

`Puede haber un problema con el árbol de dependencias del proyecto.
Es probable que no sea un error en la aplicación Create React, sino algo que debe solucionar localmente.

El paquete react-scripts proporcionado por Create React App requiere una dependencia:

"babel-loader": "8.0.5"

No intente instalarlo manualmente: su administrador de paquetes lo hace automáticamente.
Sin embargo, se detectó una versión diferente de babel-loader más arriba en el árbol:

c: \ Users \ Z-Dra \ node_modulesbabel-loader (versión: 8.0.6)

Se sabe que la instalación manual de versiones incompatibles causa problemas difíciles de depurar.

Si prefiere ignorar esta verificación, agregue SKIP_PREFLIGHT_CHECK = true a un archivo .env en su proyecto.
Eso desactivará permanentemente este mensaje, pero es posible que encuentre otros problemas.

Para arreglar el árbol de dependencias, intente seguir los pasos a continuación en el orden exacto:

1. Elimine package-lock.json (¡no package.json!) Y / o yarn.lock en la carpeta de su proyecto.
2. Elimina node_modules en la carpeta de tu proyecto.
3. Elimine "babel-loader" de las dependencias y / o devDependencies en el archivo package.json en la carpeta de su proyecto.
4. Ejecute npm install o yarn, según el administrador de paquetes que utilice.

En la mayoría de los casos, esto debería ser suficiente para solucionar el problema.
Si esto no ha ayudado, hay algunas otras cosas que puede probar:

1. Si usó npm, instale yarn (http://yarnpkg.com/) y repita los pasos anteriores con él.
   Esto puede ayudar porque npm tiene problemas conocidos con la elevación de paquetes que pueden resolverse en versiones futuras.

2. Compruebe si c: \ Users \ Z-Dra \ node_modulesbabel-loader está fuera del directorio de su proyecto.
   Por ejemplo, es posible que haya instalado accidentalmente algo en su carpeta de inicio.

3. Intente ejecutar npm ls babel-loader en la carpeta de su proyecto.
   Esto le dirá qué otro paquete (además de los scripts de reacción esperados) instaló babel-loader.

Si nada más ayuda, agregue SKIP_PREFLIGHT_CHECK = true a un archivo .env en su proyecto.
Eso deshabilitaría permanentemente esta verificación previa al vuelo en caso de que desee continuar de todos modos.

PD: Sabemos que este mensaje es largo, pero lea los pasos anteriores :-) ¡Esperamos que los encuentre útiles!

npm ERR! código ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] inicio: react-scripts start
npm ERR! Estado de salida 1
npm ERR!
npm ERR! Falló en el script de inicio
npm ERR! Probablemente esto no sea un problema con npm. Es probable que haya una salida de registro adicional arriba.

npm ERR! Puede encontrar un registro completo de esta ejecución en:
npm ERR! C: \ Users \ Z-Dra \ AppData \ Roaming \ npm-cache_logs \ 2019-05-29T12_53_58_726Z-debug.log`

¿Alguien me puede ayudar?

Descubro que tengo babel-loader 8.0.6 instalado globalmente en mi directorio de inicio /home/user/node_modules , así que en el directorio de mi proyecto se instaló babel-loader 8.0.5, así que elimino npm remove babel-loader en mi hogar directorio (8.0.6), que todos funcionan bien.

Esta es una pregunta tonta, estoy seguro, pero ...
Si estoy usando mecanografiado, ¿para qué necesito babel?

Gracias @shilman , pero la versión preliminar no parece solucionar el problema de babel-loader.

Pasos tomados:

1. Instale la última versión de Typecript. de CRA (react-script 3.0.1) a través de npx create-react-app my-app --typescript
2. npx -p @storybook/cli sb init --type react
3. Configure el libro de cuentos para TS usando las instrucciones en https://storybook.js.org/docs/configurations/typescript-config/ & demo https://github.com/johot/storybook4-cra2-typescript-react-docgen-typescript-demo (nota: webpack.config.js en la demostración está desactualizado y se corrige aquí: https://github.com/storybookjs/storybook/issues/5877#issuecomment-470186882)
4. Elimina la carpeta de módulos yarn.lock & node.
5. Eliminar las dependencias de @babel/core & babel-loader dev de package.json
6. yarn add -D @storybook/react@next
7. yarn
8. yarn storybook - Error: 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 configuración básica sin TypeScript ni siquiera me funciona

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

CRA espera "babel-loader": "8.0.5" pero encuentra 8.0.6 . Sin embargo, el packages.json hsa generado después de devDependencies enumerado:

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

Establecer la versión en "babel-loader": "8.0.5" resuelve este problema.

También tengo un problema similar en otro proyecto donde CRA (3.0.1) espera "webpack": "4.29.6" pero encuentra 4.32.2 . Eso no está definido en mi dependiente dentro de package.json
npm ls webpack muestra:

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

[email protected] proporciona una versión más reciente del paquete web, pero CRA quiere una versión anterior.
Agregar [email protected] a las dependencias lo soluciona. No estoy seguro de si esto es un problema con el libro de cuentos.

@vipyoshi Un par de comentarios:

• No debe pasar --type react . Deje que use la plantilla CRA en su lugar.
• Esto se solucionó en la última versión @storybook/cli@next y lo publicaremos como estable en las próximas 24 horas.

En serio, ¿por qué se necesita babel si estoy usando TypeScript?

@shilman @mrmckeb con la última versión:

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

La sintaxis JSX no se transforma en .storybooks/config.js y start-storybook falla con un error de sintaxis (en el primer < ).

Usar la solución anterior de tener babel-loader instalado pero con la versión sincronizada con CRA funciona bien.

Traté de verificar si CRA usa babel-preset-react en algunas carpetas, pero no en todas, pero no llegué a ninguna parte.

Para el contexto, estoy usando CRA 3.0.1 y no lo he expulsado.

¿Qué más podría ser el problema (debería abrir uno)?
¿Cómo puedo ayudar?

_{PD: Estoy usando un decorador para estilos globales por cierto.}

La sintaxis JSX no se transforma en .storybooks / config.js y start-storybook falla con un error de sintaxis (en el primer <).

@ rlecaro2 ¡ Exactamente el mismo problema aquí!

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

(declarar babel-loader en v8.0.5 en devDependencies también soluciona ese problema)

@revmischa Babel es cómo puedes usar TypeScript. El equipo de TS ofrece dos caminos: el compilador de TypeScript o un complemento de Babel.

@ rlecaro2 y @Akaryatrh , hicimos un cambio hace algunos meses, donde en las últimas versiones de Storybook, babel-loader no se instala junto con CRA, sino que se encuentra dentro de CRA.

Según tengo entendido, no tiene ningún problema, aparte del hecho de que los archivos dentro de .storybook no se están procesando correctamente. Esto se debe a que la configuración de Create React App ignora los archivos fuera de la fuente.

Hicimos un pequeño cambio para permitir TypeScript dentro del directorio .storybook aquí , y podríamos hacer lo mismo para el resto de la configuración. Supongo que ambos no están usando TypeScript, por lo que esa solución no funcionó para ustedes.

Sin embargo, estoy un poco confundido por qué funciona ese arreglo devDependencies ... Creo que eso también necesita investigación.

También tenga en cuenta que este es un problema nuevo, no relacionado con el anterior. Como los comentarios aquí alertan a todos los usuarios, he creado un nuevo ticket aquí: # 7201. Agregue detalles allí.

¡Excelente! Intentaré averiguar qué hace que funcione la dependencia de desarrollo. Para cualquier otra persona, el problema es # 7201 (error tipográfico menor).

@ ramonex1

Sí, para mí es una idea estúpida.

Es otro módulo de nodo en mis carpetas.

Esto todavía no funciona para mí, he visto este problema un montón pero parece que no puedo encontrar una ruta definitiva de reparación / actualización o pautas sobre cómo solucionarlo.

Para su información, tenemos un trabajo revolucionario en el soporte de CRA proveniente de

También enfrento el mismo problema y también lo solucioné. El nombre de mi proyecto es 'idash2' y lo instalo en

código / web / frontend / idash2

Pero el problema es que accidentalmente instalé node_modules en este directorio

código / web / frontend

Después de eliminar el código / web / frontend / node_modules y reinstalar la aplicación de reacción nuevamente, problema resuelto.

Crédito por esta solución: Parinya Onsuwan

Tengo el mismo problema y nada parece funcionar ... ¿Existe una solución permanente para este problema?

@isenese Creo que esto es parte de https://www.npmjs.com/package/@storybook/preset -create-react-app o lo será en breve

@isenese , lo siento, he estado fuera de acción un poco recientemente.

Esto se resuelve en las nuevas versiones de Storybook, o al menos debería estarlo; proporcione los detalles de la versión si aún se enfrenta a esto y podemos ayudarlo.

Hola, soy un usuario de CRA y enfrenté este problema cuando inicialicé el libro de cuentos con el siguiente comando descrito en el documento de React .

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

Luego, solucioné el problema inicializando con lo siguiente.

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

(Y la detección automática sin la opción --type también fue exitosa. ¡Genial!)

Creo que esto es una falta de documentación y puede cometer ese tipo de errores.
Agregue una explicación sobre --type react_scripts a la página Storybook for React o cree un tutorial separado para CRA.

¡Gracias!

También estamos probando un nuevo ajuste preestablecido para CRA, que reemplazaría el ajuste preestablecido incorporado para CRA. Esto debería facilitar la configuración futura.

Hola, soy un usuario de CRA y enfrenté este problema cuando inicialicé el libro de cuentos con el siguiente comando descrito en el documento de React .

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

Luego, solucioné el problema inicializando con lo siguiente.

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

(Y la detección automática sin la opción --type también fue exitosa. ¡Genial!)

Creo que esto es una falta de documentación y puede cometer ese tipo de errores.
Agregue una explicación sobre --type react_scripts a la página Storybook for React o cree un tutorial separado para CRA.

¡Gracias!

Muchas gracias! Me estaba volviendo loco con esto.

Gracias chicos, tomaré nota para actualizar esa documentación.

@mrmckeb todavía se encuentra con el mismo problema (CRA 3.3 + Storybook 5.2.8) y no se puede encontrar nada en los documentos sobre la bandera react_scripts ; sería genial tenerlo allí para que otros no tuvieran que ir a través de los problemas de GH para encontrar esto ... 🎉

@aericson , disculpa las molestias. Miraré hoy.

Tenga en cuenta que esto está en la configuración avanzada. Dice:

Es posible que haya intentado utilizar nuestra guía de inicio rápido para configurar su proyecto para Storybook. Si falló porque no pudo detectar que estás usando React, puedes intentar forzarlo a usar React.

Actualizaré para mencionar CRA también.

@mrmckeb Creo que se trata más de solo encontrar

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

pero no

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

en los documentos al mirar:

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

por lo que cree que está haciendo todo correctamente utilizando --type react cuando tiene un repositorio de CRA.

el uso de --type react condujo a Cannot find module 'babel-jest' errores - --type react_scripts está funcionando de inmediato.

Entendido, y los documentos ahora están actualizados @pkyeck :)

Creo que, en general, esa parte de los documentos debería ser más clara ... Espero que la revisión en # 9182 lo sea. @shilman se lanzará pronto, creo.

Cuando tiene babel-loader en package.json, no puede compilar la aplicación. La mejor solución que obtuve es:
'

"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-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",
"componentes-estilo-broma": "^ 7.0.3",
"servidor-json": "^ 0.16.2",
"msw": "^ 0.21.3",
"más bonita": "^ 2.1.2",
"react-docgen-typescript-plugin": "^ 0.6.0",
"react-is": "^ 17.0.1",
"react-test-renderer": "^ 17.0.1"
},
"resoluciones": {
" / react-scripts / / babel-loader": "^ 8.1.0"
}

'

La resolución de atributo usando la misma biblioteca de babel-loader.

Confirmando que esto sigue siendo un problema con las últimas versiones de creat-react-app y storybook.

Editar: create-react-app se quejará de una versión incorrecta de babel-loader en node_modules. Pude resolver el problema usando yarn add -D --exact [email protected] , que era la versión que requería CRA.

Puedo confirmar que también me encuentro con esto. ¿Podemos reabrir este problema? ¿Realmente no quiero tener que incluir babel-loader en mi paquete si no lo estoy usando yo mismo?
¡Puedo confirmar que la corrección de @DylanCulfogienis funciona!

ya no instalamos babel-loader en aplicaciones de CRA, así que no creo que tengamos que volver a abrir el problema @eglavin

¿Sigue fallando en una instalación nueva?

mismo problema aquí

ya no instalamos babel-loader en las aplicaciones de CRA, por lo que no creo que tengamos que volver a abrir el problema @eglavin

¿Sigue fallando en una instalación nueva?

El mismo problema aquí, si su aplicación necesita ejecutarse con el libro de cuentos, aún debe incluir babel-loader .

Babel-loader ya está incluido en CRA y el libro de cuentos puede usarlo. ¿No?

Esto sigue siendo un problema en las instalaciones nuevas de las últimas versiones de CRA / SB (4.0.1 y 6.1.18, respectivamente, en el momento de escribir este artículo).

También encontré esto cuando instalé CRA v4 con SB v6.1:

El mismo problema aquí: React 4.0.1 y

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) 

PD: ¿Deberíamos abrir un nuevo número ya que se refiere a una versión diferente del mismo problema?

Muchas gracias yarn add -D --exact [email protected] funcionó!

Tengo un Monorepo y agregué babel-loader a mi paquete React web como arriba (8.1.0). Resolvió el error babel-loader pero creó nuevos errores:

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

Pude resolver esto actualizando la versión de @types/react-dom a "17.0.0".

La solución de https://github.com/storybookjs/storybook/issues/12408 envuelto aquí, pero esta es la configuración que me puso en marcha:

# 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

duplicar a # 4764