Storybook: Storybook 5.0.0 emoção-themeing e React loader bug

@ afrankel-sfdo Você pode remover node_modules e yarn.lock e tentar novamente? Temos visto muita coisa estranha em torno de coisas como esta, por exemplo, https://github.com/storybooks/frontpage/pull/28#issuecomment -468666553

@shilman mesmo em 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'

Isso é muito bizarro. Você pode fornecer uma reprodução? Não vejo isso em meu aplicativo de teste CRA ou em meu aplicativo de teste Gatsby

Eu tenho a mesma coisa com @storybook/[email protected]

editar: 3ª vez, a exclusão de package-lock.json & node_modules funcionou para mim

Tenha o mesmo problema aqui em @ storybook / [email protected] em execução no Mac OSX
No entanto, remover o arquivo yarn.lock não é uma opção em nosso processo

mesmo problema em 5.0.0 e também notei baixo ...

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

Uma nova instalação de livro de histórias funciona bem, não rastreou o que em nosso projeto pode estar causando esses problemas.

@ afrankel-sfdo Estou vendo o mesmo problema. Minha teoria atual é que a falta de @emotion/core causa o ModuleParseError . Corri npm i @emotion/core @emotion/styled que parecia resolver o problema. Estranhamente, notei que esses dois departamentos foram removidos de package-lock.json , embora eu não tenha ideia do porquê. Eu os removi de package.json e deixei package-lock.json com eles, e acho que estou de volta ao negócio, embora isso realmente não explique o que aconteceu.

Atualização: percebi isso ao executar npm ls @emotion/core após as etapas acima:

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

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

@emotion/core não está sendo içado para a raiz, onde a compilação está esperando por isso (é estranho porque não está mais em meu package.json ). require.resolve é chamado em @storybook/ui/paths.js , mas só é instalado em @storybook/theming , então está aninhado em node_modules nessa pasta, o que significa que o require.resolve em @storybook/ui não consegue encontrar.

Quero dizer que a solução é adicionar @emotion/{core,styled} como uma dependência de @storybook/ui , já que @storybook/ui está procurando por ele.

Outra atualização: se você não quiser excluir seu package-lock.json , npm dedupe parece ter resolvido o problema para mim.

@ FrAgFo0d Funciona se você deletar seu yarn.lock ? Você não precisa verificar sua alteração, mas seria útil saber se essa solução funciona para você. Iremos chegar ao fundo disso eventualmente, mas por enquanto parece um bug do fio ...

Tenho o mesmo problema e não consegui resolvê-lo excluindo o yarn.lock

yarn add @emotion/core @emotion/styled resolveu imediatamente embora

Eu estava recebendo erros estranhos relacionados a emoções. Excluir node_modules, yarn.lock e executar yarn cache clean antes de instalar corrigiu o problema para mim.

Talvez o problema esteja relacionado a duas versões diferentes de emoções usadas pelo livro de histórias / núcleo e livro de histórias / tema. Isso tudo é muito estranho, eu simplesmente não consigo superar isso. Quando eu instalo as bibliotecas de emoção manualmente, ele constrói, mas recebo erros no navegador ( Cannot read property 'Consumer' of undefined at ThemeProvider ) e nada é renderizado.

Funcionou em um aplicativo CRA original, mas não na configuração do meu Webpack personalizado. Estou tentando configurar livros de histórias para nossa biblioteca de componentes da Web do React Native. Aqui está meu repositório de teste: https://github.com/MrLoh/universal-react-storybook

Fazer downgrade para o livro de histórias 4.1.13 resolveu o problema, então talvez seja uma incompatibilidade no meu projeto entre livro de histórias / react e livro de histórias / react-nativos com versões diferentes

@MrLoh

Eu também encontrei este problema (embora eu use @storybook/vue ).
E descobri que um dos pacotes em package.json dependia do antigo pacote @storybook/addons que dependia do antigo pacote @emotion/* internamente.

Como alternativa, escrevi o campo resolutions para essa biblioteca e isso resolveu o problema para mim.

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

@ FrAgFo0d Funciona se você deletar seu yarn.lock ? Você não precisa verificar sua alteração, mas seria útil saber se essa solução funciona para você. Iremos chegar ao fundo disso eventualmente, mas por enquanto parece um bug do fio ...

Eu gostaria que sim, mas depois de fazer isso, não posso dizer que o problema seja causado por outros itens sendo instalados com versões não correspondentes ou pelo próprio livro de histórias.

Posso tentar yarn add @emotion/core @emotion/styled para ver se foi resolvido. `
No entanto, prefiro não adicionar mais dependências em meu próprio projeto;)

Trabalhou para nós adicionarmos @storybook/theming como uma dependência explícita

Acabei de encontrar o mesmo problema no Mac OSX, no Windows tudo funciona bem no Mac, tive que executar npm i @emotion/core @emotion/styled para fazer funcionar

Tive o mesmo problema com [email protected] , a solução homburg funcionou para mim

Remover o arquivo yarn.lock não era uma opção para mim (e eu não recomendaria fazer isso na maioria dos casos). Conseguimos consertá-lo ..

$ 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 isso ajude alguém com este problema

1 mesmo para nós. A única solução neste tópico que funcionou foi reverter para o livro de histórias 4

Eu também tive esse problema com
@storybook/react: 5.0.3
MacOs Mojave
Resolvido com:

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

Encontramos o mesmo problema após uma atualização de v5.0.3 para v5.0.5.

Resolvido com:
yarn add --dev @storybook/theming

Ainda estou tendo esse problema. Eu tenho o mais recente dos seguintes:

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

Toda a limpeza do cache não funcionou. Ele ainda está tentando encontrar o antigo pacote 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'

Instalei o pacote emotion-theming e tudo está funcionando ..

Corrigido exatamente como @alexreardon , instalando emotion-theming : https://emotion.sh/docs/emotion-theming estava recebendo o seguinte erro:

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'

Quero dizer que a solução é adicionar @ emotion / {core, styled} como uma dependência de @ storybook / ui, já que @ storybook / ui está procurando por ele.

Eu concordo com @mAAdhaTTah que esta será a solução certa. É errado esperar que um gerenciador de pacotes elimine a dependência.

O mesmo problema existe com @ storybook / react v5.0.6 também.

Falha ao carregar predefinição: "/Users/vinkumar2/Documents/Projects/PatternLibs/ReactPatternLib/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERRAR! Erro: Não é possível encontrar o módulo '@ emotion / core / package.json'

Adicionar @ emotion / core em DevDependencies ajudou e o Storybook está funcionando. Parece que está faltando nas dependências do pacote com @ storybook / react.

Eu coloquei um PR para isso aqui: # 6435

Ups !! Acabei de lançar https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.23 contendo PR # 6435 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.

A versão Alpha corrigiu o problema para mim, obrigado @shilman !

O problema ainda persiste no 5.0.10 (por npm logs, é uma versão posterior ao alpha.23)

mensagem de erro:

Falha ao carregar predefinição: "/.../node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERRAR! Erro: Não é possível encontrar o módulo 'emotion-theming / package.json'

rastreamento de pilha:

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 correção está no branch de lançamento 5.1.X, que atualmente ainda está em alfa ( 5.1.0-alpha.33 ).

@BrendanAnnable @alexlafroscia @devrelm Devo corrigir a correção em 5.0.x ?

@shilman Não tenho certeza de qual é o cronograma de lançamento do livro de histórias (por exemplo, para 5.1.x), mas isso está bloqueando uma série de projetos de atualização para o livro de histórias 5, então adoraria que essa correção chegasse a algum lançamento não alfa, se possível 🙂

O problema aqui é que o yarn (ou npm) está estranhamente (neste caso, não) içando pacotes. yarn list ou yarn why saídas também estão com defeito:

% 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 você pode ver, o yarn está relatando que há apenas um pacote emotion-theming , que deve ser içado até a raiz, mas não é o caso: ele está duplicando o pacote em 4 lugares em diferentes pacotes. Se é um bug do yarn / npm, não tenho certeza. Talvez a combinação das dependências dependencies e peerDependencies esteja causando esse comportamento estranho? A configuração do meu livro de histórias falha quando tenho diferentes versões principais de pacotes de livros de histórias, por exemplo, @storybook/[email protected] e @storybook/[email protected] lado a lado.

Eu também acho que nossa combinação de ter um espaço de trabalho de fio monorepo e nohoisting de nível superior também podem ser fatores que causam esse problema:

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

Também estou tendo os mesmos problemas, mas parece que a maioria das soluções acima não corrigiu o problema para mim.
Também tentei a versão alfa e ainda obtive o erro.
O problema para mim ainda parece que dois pacotes diferentes estão procurando por duas versões diferentes de @emotion/core então a instalação manual funciona, mas sempre há um dos dois pacotes reclamando da falta da versão.

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

Também tento adicionar npm i @storybook/theming manualmente, mas ainda assim não tive sorte.

@devrelm sua correção (# 6435) deve funcionar mesmo com npm, e não apenas yarn .. correto?

@whyayala funcionou para mim, obrigado!

Atualizei para 5.x, encontrei o bug e acabei de atualizar para 5.1.9 com exatamente o mesmo problema.

Dito isso, estou recebendo apenas uma versão de @ emotion / core (10.0.10)

@alasdairhurst Eu também tive esse problema.

você pode ver neste projeto de demonstração com o CRA
https://github.com/marco-silva0000/cra-test-pnp-storybook

Trabalhou para nós adicionarmos @storybook/theming como uma dependência explícita

Você já entendeu por que ajudou? Porque ajudou a gente também, o que é ótimo! Mas não entendo porque: P

Se isso pode ajudar alguém - também recebi este erro e demorei um pouco para perceber que estava instalando o pacote fora da pasta do site ... É por isso que não encontrou o package.json ...