Storybook: conflito do babel-loader com create-react-app 2.1.3

+1

Isso significa que não devemos instalar babel-loader para aplicativos CRA?

Hmm, quando eu removo babel-loader dep, o livro de histórias quebra ... 😕

Tendo o mesmo problema 😕

Mesmo problema ... alguma solução alternativa ainda?

@ ayoola-moore Sim, a solução alternativa é alterar a linha em package.json para:

"babel-loader": "8.0.4"

Desta forma, tanto react-scripts quanto storybook funcionarão. Ainda procurando uma solução melhor. :confuso:

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

@shilman , também estou pensando nisso. Poderíamos considerar expor babel-loader de scripts de reação ... isso pode ajudar. Houve um PR recente que fez algo semelhante para chalk (https://github.com/facebook/create-react-app/pull/6150).

Alternativamente, seria mais fácil se fosse uma dependência de @storybook/react ? Em vez de uma dependência de pares. Mas eu sei que isso pode causar problemas para usuários não CRA.

Ou poderíamos, quando react-scripts existir, importar diretamente babel-loader de react-scripts/node_modules/babel-loader . Já carregamos a configuração da pasta react-scripts .

@ igor-dv @ndelangen @tmeasday alguma opinião sobre as opções que @mrmckeb colocou acima? Isso é algo que podemos lidar com uma predefinição CRA?

A solução alternativa não parece funcionar para mim. Ainda vejo os conflitos depois de tentar a solução alternativa.

A solução alternativa não parece funcionar para mim. Ainda vejo os conflitos depois de tentar a solução alternativa.

Certifique-se de remover o "^" inicial, caso contrário, você ainda obterá 8.0.5

Acho que provavelmente poderíamos exigir babel-loader de onde react-scripts encontrar (usando requireFrom ou algo semelhante, embora se react-scripts exportasse isso tornaria mais fácil ) se estivermos usando a configuração do webpack do CRA.

Uma predefinição tornaria isso melhor, mas acho que já temos um código de caso especial para CRA (para usar sua configuração), então talvez seja relativamente fácil fazer isso lá?

A solução alternativa não parece funcionar para mim. Ainda vejo os conflitos depois de tentar a solução alternativa.

Certifique-se de remover o "^" inicial, caso contrário, você ainda obterá 8.0.5

Isso é o que tenho em meu package.json: "babel-loader": "8.0.4"

Existem outras etapas que precisam ser executadas para a solução?

@jlmelis , qual versão de "

@vsubbotskyy - Estou executando o create-react-app com npx. A versão que mostra é 2.1.3. Provavelmente algo mais complicado com minha configuração. Vou ficar de olho nisso para ver se há uma solução. Obrigado!

Consegui fazer o trabalho funcionar. obrigado

Dei uma olhada ao redor e acho que, neste estágio, será mais fácil solicitar no carregador do CRA (quando o CRA for usado). Vou fazer uma RP agora.

@tmeasday , seria ótimo se você pudesse dar uma olhada e fornecer comentários sobre o PR # 5308.

Já passei pelo mesmo problema e finalmente resolvi. Mudei o babel-loader de volta para "8.0.4" no meu arquivo package.json e precisei deletar o arquivo json package-lock e então pude iniciar e testar o storybook. Espero que isto seja útil.

"_Mudei o babel-loader de volta para" 8.0.4 "no meu package.json_"
Espero que não seja a solução e seja corrigida em breve, pois está nos impedindo de atualizar os react-scripts: /
obrigado

+1

Desculpe a todos, estive fora de ação por uma semana e meia e não persegui a revisão sobre isso. Fazendo isso agora.

Ainda tendo o mesmo problema

Obrigado @oscargws , estamos investigando ativamente isso e # 5308 foi criado para resolver isso. @ndelangen , você pode dar uma olhada nesse PR?

@mrmckeb ah muito bom. Para qualquer outra pessoa com o problema, alterar manualmente a versão do babel-loader no package.json corrigiu isso para mim!

Alguém sabe o que exatamente quebrado lá? é uma versão do patch bump, parece estranho para mim.

@ igor-dv, o problema é que o CRA espera uma correspondência de versão exata - e se algo for instalado em package.json que entre em conflito, ele gerará um erro. Portanto, sempre que o CRA estiver uma ou duas versões atrasado (mesmo se uma versão de patch), os usuários podem ver esse erro após instalar o Storybook.

A solução aqui é usar a versão do CRA de babel-loader ao trabalhar com o CRA, para que esse problema não ocorra.

A seguinte solução alternativa funciona para mim:

Alterar a linha em package.json para "babel-loader": "8.0.4" parece consertar isso.

Alguma atualização sobre este? não posso resolver apenas adicionando "babel-loader": "8.0.4" ou qualquer uma das outras etapas

Alguma atualização sobre este? não posso resolver apenas adicionando "babel-loader": "8.0.4" ou qualquer uma das outras etapas

Consegui resolver isso adicionando o babel-loader 8.0.4 como uma dependência e uma dependência de par.

Consegui resolver isso adicionando o babel-loader 8.0.4 como uma dependência e uma dependência de par.

Unfournatatley não é para mim, o meu está me pedindo babel-loader": "8.0.5 , não tenho certeza se isso faz diferença, também, quando eu executo npm ls babel-loader ele joga isso:

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

@ Rolando-Barbella Tente fixar a versão através do campo resolution em seu package.json para 8.0.4

Mudei a versão de 2.1.2 para 2.1.5 então resolvi

Sim, esta é uma boa solução por enquanto, @nguyentuandat , mas apenas temporária até descobrirmos como lidar com isso corretamente.

Atualizar scripts de reação funcionou para mim (thx, @nguyentuandat). Eu estava no 2.1.1, atualizado com as instruções do changelog :

yarn add --exact [email protected]

Depois de tentar de tudo aqui, encontrei a solução.

Basta abrir o .profile em um editor de texto (ele está oculto no diretório inicial, então pressione Ctrl + H)

Basta colar esta linha na parte inferior do .profile

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

e Voila .... funciona

Usando "react-scripts": "2.1.8" e storybook v5, estou recebendo o mesmo erro.
Conforme declarado por outros, adicionar manualmente "babel-loader": "8.0.4" como devDependency corrigiu o problema.

Instalando "react-scripts": "2.1.5", e "@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)

Executar npm ls babel-loader joga isto:
├─┬ UNMET DEPENDENCY [email protected]
│ └── UNMET DEPENDENCY [email protected]
└─┬ UNMET DEPENDENCY [email protected]
└── UNMET DEPENDENCY [email protected]

babel-loader não está presente no meu package.json. E adicionar a versão 8.0.4 como uma devDependency não resolve o problema para mim.

npm i funciona conforme o esperado. Mas ao tentar npm start , encontro o mesmo 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)

Bom Deus !! Acabei de lançar https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.25 contendo PR # 5308 que faz referência a esse problema. Atualize hoje para experimentar!

Por ser um pré-lançamento, você pode encontrá-lo na tag @next NPM.

Fechando esta questão. Abra novamente se achar que ainda há mais a fazer.

Acabei de experimentar a versão beta mais recente. Estamos usando o livro de histórias com [email protected] e a configuração do Typescript descrita aqui: https://storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

Porém, isto falha porque o require não consegue encontrar o CRA babel-loader. Já existe uma solução para isso?

@mrmckeb sabe alguma coisa sobre isso?

Acabei de experimentar a versão beta mais recente. Estamos usando o livro de histórias com [email protected] e a configuração do Typescript descrita aqui: https://storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

Porém, isto falha porque o require não consegue encontrar o CRA babel-loader. Já existe uma solução para isso?

Sim, também tenho o mesmo problema com "react-scripts": "3.0.1"

Isto é o que obtive depois de adicionar o livro de histórias à base de código:

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

Olá, @patricknick e @wxqee , você não deve ter nenhuma configuração personalizada se estiver usando o CRA :) O TypeScript funciona imediatamente. Experimente com uma nova instalação, sem configuração personalizada, e me avise se não estiver funcionando para você.

@shilman - talvez devêssemos atualizar a documentação para refletir isso?

O problema babel-jest deve ser resolvido na versão mais recente do CRA @ummahusla - se não, levante-o em https://github.com/facebook/create-react-app/issues.

Olá @mrmckeb , obrigado pela ajuda! Acabei de experimentar sua solução e removi meu 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;
};

Infelizmente, isso resulta no seguinte erro:

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

Poderia me dar uma dica sobre isso? Obrigado!

Estou tendo o mesmo problema. Parece estar muito infeliz com a análise de JSX .

@mrmckeb Acabei de lançar @storybook/preset-typescript e preciso atualizar a documentação datilografada de qualquer maneira. Se você me informar o que devo dizer sobre o Typescript e o CRA, ficarei feliz em trabalhar com isso na atualização. Obrigado! 🙇

Obrigado @shilman. A predefinição CRA usa a configuração CRA por baixo do capô, portanto, tem suporte para tudo que o CRA pode fazer - TypeScript, módulos CSS, Sass, etc. Basicamente, nada é necessário para que isso funcione, basta instalar e pronto!

Encontrei o problema babel-loader acima mencionado, com a adição de configurar o Storybook, ele explodiu meu CRA. Instalei a versão @storybook/[email protected] . O Storybook será construído e executado, mas nenhuma das minhas histórias / componentes são preenchidos na IU. E stdout todas as minhas histórias estão lançando esses avisos.

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

Tentei outras variações e nenhuma funcionou ...

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

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

Revertendo para 5.0.11 ele funciona novamente para compilações de Storybook e não emite mais avisos. E meu CRA está funcionando novamente ... Eu preciso fazer algo mais para o caminho de atualização? Acabei de configurar o livro de histórias ontem, tão novo no projeto.

No momento, as coisas estão funcionando de novo ... mas estou preocupado com o estado do meu ambiente em relação ao lançamento de 5.1.x .

Apenas no caso de alguém cair na mesma situação que eu: eu não poderia por minha vida fazer a integração Storybooks + CRA funcionar, onde Storybooks usa a configuração de compilação do CRA. No entanto, tentei mover minhas histórias para o diretório src/ do meu projeto CRA e de repente funcionou. Não sei por que, ou se sempre foi recomendado ou exigido, mas isso resolveu para mim.

Também estou tendo esse problema, com um novo aplicativo de texto digitado CRA. Muito mais recente CRA do mestre e livro de histórias 5.0.11

@revmischa são suas histórias sob src/ ?

Sim, @shilman - estou basicamente executando o CRA e o sb init: https://github.com/jetbridge/create-react-app/pull/1/files#diff -0ae46a2383dedcac5f5e369f5ca5f169R35

As histórias estão 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

Se eu removê-lo 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 eu tinha uma versão diferente em um projeto em uma pasta anexa.

Mudei todas as minhas histórias de ./stories/* para ./src/stories/* e atualizei meu .storybook/config.js e agora as coisas estão funcionando com @storybook/[email protected] . Tendo acabado de configurar isso outro dia, os documentos / guia de configuração de React estarão desatualizados para aqueles que vêm com uma configuração de CRA nova.

Caso contrário, o problema parece resolvido 👍

Olá a todos, sim, certifique-se de remover seu babel-loader e faça uma verificação rápida para ver se ele está listado em outro lugar.

Você também pode dizer ao CRA para pular essa verificação se quiser, mas ela está lá por segurança ...

Ainda estou tendo esse problema com @ storybook / react 5.0.11 e o último create-react-app do master.
O problema é que o CRA quer o babel-loader 8.0.5 e executando sb init adiciona "babel-loader": "^8.0.6" ao meu packages.json
Então, que tal detectar o que o babel-loader CRA já requer e adicionar isso? ou apenas pule a adição de babel-loader a package.json em sb init se CRA for detectado? manter as duas versões exatas em sincronia entre o livro de histórias e o CRA não é solução para nada, com base no histórico desse problema.

Por favor, eu realmente preciso de ajuda.

Eu tento de tudo, menos funcionar.

`Pode haver um problema com a árvore de dependências do projeto.
Provavelmente não é um bug no Create React App, mas algo que você precisa corrigir localmente.

O pacote react-scripts fornecido pelo Create React App requer uma dependência:

"babel-loader": "8.0.5"

Não tente instalá-lo manualmente: seu gerenciador de pacotes o faz automaticamente.
No entanto, uma versão diferente do babel-loader foi detectada em uma parte superior da árvore:

c: \ Users \ Z-Dra \ node_modulesbabel-loader (versão: 8.0.6)

A instalação manual de versões incompatíveis pode causar problemas difíceis de depurar.

Se você preferir ignorar essa verificação, adicione SKIP_PREFLIGHT_CHECK = true a um arquivo .env em seu projeto.
Isso desativará permanentemente esta mensagem, mas você pode encontrar outros problemas.

Para corrigir a árvore de dependência, tente seguir as etapas abaixo na ordem exata:

1. Exclua package-lock.json (não package.json!) E / ou yarn.lock na pasta do projeto.
2. Exclua node_modules em sua pasta de projeto.
3. Remova "babel-loader" das dependências e / ou devDependencies no arquivo package.json na pasta do seu projeto.
4. Execute npm install ou yarn, dependendo do gerenciador de pacotes que você usa.

Na maioria dos casos, isso deve ser o suficiente para resolver o problema.
Se isso não ajudou, existem algumas outras coisas que você pode tentar:

1. Se você usou o npm, instale o yarn (http://yarnpkg.com/) e repita as etapas acima com ele.
   Isso pode ajudar porque o npm tem problemas conhecidos com o levantamento de pacotes que podem ser resolvidos em versões futuras.

2. Verifique se c: \ Users \ Z-Dra \ node_modulesbabel-loader está fora do diretório do projeto.
   Por exemplo, você pode ter instalado acidentalmente algo em sua pasta de início.

3. Tente executar npm ls babel-loader na pasta do projeto.
   Isto irá dizer-lhe qual outro pacote (além dos esperados react-scripts) instalou o babel-loader.

Se nada mais ajudar, adicione SKIP_PREFLIGHT_CHECK = true a um arquivo .env em seu projeto.
Isso desativaria permanentemente essa verificação preflight caso você queira continuar de qualquer maneira.

PS Sabemos que esta mensagem é longa, mas leia os passos acima :-) Esperamos que sejam úteis!

npm ERR! código ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-scripts start
npm ERR! Status de saída 1
npm ERR!
npm ERR! Falha no script de inicialização [email protected] .
npm ERR! Isso provavelmente não é um problema com o npm. Provavelmente, há uma saída de registro adicional acima.

npm ERR! Um registro completo desta execução pode ser encontrado em:
npm ERR! C: \ Users \ Z-Dra \ AppData \ Roaming \ npm-cache_logs \ 2019-05-29T12_53_58_726Z-debug.log`

Por favor, alguém pode me ajudar?

Eu descobri que tenho babel-loader 8.0.6 instalado globalmente no meu diretório inicial /home/user/node_modules , então no meu diretório do projeto foi instalado o babel-loader 8.0.5, então eu removo npm remove babel-loader da minha casa diretório (8.0.6), do que todos funcionam bem.

Esta é uma pergunta idiota, tenho certeza, mas ...
Se estou usando o texto datilografado, para que preciso do babel?

Obrigado @shilman , mas o pré-lançamento não parece corrigir o problema do babel-loader.

Passos dados:

1. Instale a versão mais recente do Typescript. de CRA (react-script 3.0.1) via npx create-react-app my-app --typescript
2. npx -p @storybook/cli sb init --type react
3. Configure o livro de histórias para TS usando as instruções em https://storybook.js.org/docs/configurations/typescript-config/ & demo https://github.com/johot/storybook4-cra2-typescript-react-docgen-typescript-demo (observação: webpack.config.js na demonstração está desatualizado e corrigido aqui: https://github.com/storybookjs/storybook/issues/5877#issuecomment-470186882)
4. Exclua yarn.lock & pasta de módulos de nó.
5. Remova @babel/core & babel-loader dev dependências de package.json
6. yarn add -D @storybook/react@next
7. yarn
8. yarn storybook - Erro: Cannot find module 'babel-loader'

Deps Package.json:

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

A configuração básica sem typescript nem mesmo funciona para mim

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" mas encontra 8.0.6 . No entanto, as packages.json hsa geradas a seguir às devDependencies listadas:

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

Definir a versão para "babel-loader": "8.0.5" resolve esse problema.

Também tenho um problema semelhante em outro projeto onde CRA (3.0.1) espera "webpack": "4.29.6" mas encontra 4.32.2 . Isso não está definido no meu dependecird dentro do package.json
npm ls webpack programas:

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

[email protected] fornece uma versão mais recente do webpack, mas o CRA quer uma versão mais antiga.
Adicionar [email protected] às dependências corrige isso. Não tenho certeza se este é um problema com o livro de histórias tu ..

@vipyoshi Alguns comentários:

• Você não deve passar --type react . Deixe-o usar o modelo CRA.
• Isso foi corrigido na última versão @storybook/cli@next e vamos lançar isso como estável nas próximas 24h.

Sério, por que o babel é necessário se estou usando o TypeScript?

@shilman @mrmckeb com a versão mais recente:

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

A sintaxe JSX não é transformada em .storybooks/config.js e start-storybook falha com um erro de sintaxe (no primeiro < ).

Usar a solução anterior de ter o babel-loader instalado, mas com a versão em sincronia com o CRA, funciona bem.

Tentei verificar se o CRA usa babel-preset-react em algumas, mas não em todas as pastas, mas não achei nada.

Para contexto, estou usando o CRA 3.0.1 e não ejetado.

Qual mais poderia ser o problema (devo abrir um)?
Como posso ajudar?

_{PS: Estou usando um decorador para estilos globais btw.}

A sintaxe JSX não é transformada em .storybooks / config.js e o start-storybook falha com um erro de sintaxe (no primeiro <).

@ rlecaro2 Exatamente o mesmo problema aqui!

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 o babel-loader para v8.0.5 em devDependencies também corrige esse problema)

@revmischa Babel é como você pode usar o TypeScript. A equipe de TS fornece dois caminhos - o compilador TypeScript ou um plugin Babel.

@ rlecaro2 e @Akaryatrh , fizemos uma mudança alguns meses atrás, onde nos últimos lançamentos do Storybook, o babel-loader não é instalado junto com o CRA, mas é encontrado dentro do CRA.

Pelo que entendi, você não tem nenhum problema - além do fato de que os arquivos dentro de .storybook não estão sendo processados ​​corretamente. Isso ocorre porque a configuração do aplicativo Create React ignora os arquivos fora da fonte.

Fizemos uma pequena alteração para permitir o TypeScript dentro do diretório .storybook aqui , e poderíamos fazer o mesmo para o resto da configuração. Suponho que vocês não estejam usando o TypeScript, e é por isso que essa correção não funcionou para vocês.

Estou um pouco confuso por que essa correção devDependencies funciona ... Acho que também precisa ser investigada.

Observe também que este é um problema novo, não relacionado ao anterior. Como os comentários aqui alertam todos os usuários, criei um novo tíquete aqui: # 7201. Por favor, adicione detalhes lá.

Ótimo! Vou tentar descobrir o que está fazendo a dependência dev funcionar. Apenas para qualquer outra pessoa, o problema é # 7201 (pequeno erro de digitação).

@ ramonex1

Sim, para mim é apenas uma ideia estúpida.

É outro módulo de nó em minhas pastas

Isso ainda não está funcionando para mim. Já vi esse problema várias vezes, mas não consigo encontrar um caminho de correção / atualização definitivo ou diretrizes sobre como consertar.

Para sua informação, temos um trabalho de mudança de jogo no suporte CRA vindo de @mrmckeb - espero que isso torne o raciocínio sobre essas questões muito mais fácil

Eu também enfrento o mesmo problema e também o resolvi. Meu nome de projeto é 'idash2' e eu o instalo em

código / web / frontend / idash2

Mas o problema é que instalei acidentalmente node_modules neste diretório

código / web / frontend

Depois de remover code / web / frontend / node_modules e reinstalar o app react novamente, o problema foi resolvido.

Crédito para esta solução: Parinya Onsuwan

Estou tendo o mesmo problema e nada parece funcionar ... existe uma solução de trabalho permanente para esse problema?

@isenese , acredito que isso faça parte de https://www.npmjs.com/package/@storybook/preset -create-react-app ou será em breve

@isenese , desculpe, eu estive um pouco fora de ação recentemente.

Isso é resolvido nas novas versões do Storybook, ou pelo menos deveria ser - forneça os detalhes da versão se você ainda estiver enfrentando isso e nós podemos ajudar.

Olá, sou um usuário CRA e enfrentei esse problema quando inicializei o livro de histórias pelo seguinte comando descrito no documento para React .

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

Então, resolvi o problema inicializando com o seguinte.

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

(E a detecção automática sem a opção --type também foi bem-sucedida. Legal!)

Acho que isso é falta de documentação e posso cometer esse tipo de erros.
Adicione uma explicação sobre --type react_scripts à página Storybook for React ou crie um tutorial separado para CRA.

Obrigado!

Também estamos testando uma nova predefinição para CRA, que substituiria a predefinição integrada para CRA. Isso deve facilitar a configuração futura.

Olá, sou um usuário CRA e enfrentei esse problema quando inicializei o livro de histórias pelo seguinte comando descrito no documento para React .

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

Então, resolvi o problema inicializando com o seguinte.

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

(E a detecção automática sem a opção --type também foi bem-sucedida. Legal!)

Acho que isso é falta de documentação e posso cometer esse tipo de erros.
Adicione uma explicação sobre --type react_scripts à página Storybook for React ou crie um tutorial separado para CRA.

Obrigado!

Muito obrigado! Eu estava enlouquecendo com isso.

Obrigado pessoal, farei uma nota para atualizar essa documentação.

@mrmckeb ainda está enfrentando o mesmo problema (CRA 3.3 + Storybook 5.2.8) e nada pode ser encontrado na documentação sobre o sinalizador react_scripts - seria ótimo tê-lo lá para que outros não precisassem ir através dos problemas de GH para encontrar isso ... 🎉

@aericson , desculpe pelo transtorno. Eu vou olhar hoje.

Observe, isso está na configuração avançada. Diz:

Você pode ter tentado usar nosso guia de início rápido para configurar seu projeto para o Storybook. Se ele falhou porque não conseguiu detectar que você está usando o React, você pode tentar forçá-lo a usar o React.

Vou atualizar para mencionar o CRA também.

@mrmckeb acho que é mais sobre apenas encontrar

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

mas não

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

nos documentos ao olhar para:

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

então você acha que está fazendo tudo correto usando --type react quando você tem um repo CRA.

usar --type react levou a Cannot find module 'babel-jest' erros - --type react_scripts está funcionando fora da caixa.

Entendido, e os documentos agora estão atualizados @pkyeck :)

Acho que, no geral, essa parte da documentação deve ser mais clara ... Espero que a revisão em # 9182 seja. @shilman vai lançar em breve, eu acho.

Quando você tem o babel-loader no package.json, não pode construir o aplicativo. A melhor solução que encontrei é:
`

"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-mais bonita": "^ 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-mais bonito": "^ 3.1.4",
"eslint-plugin-react": "^ 7.21.5",
"eslint-plugin-react-hooks": "^ 4.2.0",
"jest-environment-jsdom-sixteen": "^ 1.0.3",
"componentes com estilo jest": "^ 7.0.3",
"json-server": "^ 0.16.2",
"msw": "^ 0.21.3",
"mais bonito": "^ 2.1.2",
"react-docgen-typescript-plugin": "^ 0.6.0",
"react-is": "^ 17.0.1",
"react-test-renderer": "^ 17.0.1"
},
"resoluções": {
" / react-scripts / / babel-loader": "^ 8.1.0"
}

`

A resolução de atributos usando a mesma biblioteca do babel-loader.

Confirmando que isso ainda é um problema com as versões mais recentes do creat-react-app e storybook.

Edit: create-react-app reclamará sobre uma versão incorreta do babel-loader em node_modules. Consegui resolver o problema usando yarn add -D --exact [email protected] , que era a versão exigida pelo CRA.

Posso confirmar que também estou encontrando isso, podemos reabrir este problema? Eu realmente não quero ter que incluir o babel-loader no meu pacote se eu não o estiver usando?
Posso confirmar que a correção de @DylanCulfogienis funciona!

não instalamos mais o babel-loader em aplicativos CRA, então não acho que precisamos reabrir o problema @eglavin

ainda está falhando para você em uma nova instalação?

mesmo problema aqui

não instalamos mais o babel-loader em aplicativos CRA, então não acho que precisamos reabrir o problema @eglavin

ainda está falhando para você em uma nova instalação?

Mesmo problema aqui, se o seu aplicativo precisa ser executado com o livro de histórias, você ainda precisa incluir babel-loader .

O Babel-loader já está incluído no CRA e o livro de histórias pode simplesmente usá-lo. Não?

Isso ainda é um problema nas novas instalações das versões mais recentes do CRA / SB (4.0.1 e 6.1.18, respectivamente, no momento da redação deste artigo).

Também ocorreu isso quando CRA v4 instalado com SB v6.1:

O mesmo problema aqui: React 4.0.1 e

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: Devemos abrir uma nova edição, visto que se trata de versões diferentes do mesmo problema?

Muito obrigado @DylanCulfogienis , você salvou meu dia !! Passei horas removendo e instalando o livro de histórias e até mesmo segurando o diretório node_modules novamente e novamente, e yarn add -D --exact [email protected] funcionou!

Eu tenho um Monorepo e adicionei babel-loader ao meu pacote React web como acima (8.1.0). Ele resolveu o erro babel-loader mas criou novos erros:

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

Consegui resolver isso atualizando a versão de @types/react-dom para "17.0.0".

A solução https://github.com/storybookjs/storybook/issues/12408 embrulhado aqui, mas esta é a configuração que me moveu:

# 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 para # 4764