Storybook: Storybook v5 quebra ao usar core-js ^ 3.0

Storybook está usando core-js incorretamente de alguma forma. @babel/preset-env versão 7.4.1 atualizado para core-js@3 e quebrou meu aplicativo Storybook de reação ao executar testes

client-api parece que deveria ter core-js @ 2 como uma dependência, uma vez que o núcleo gerado requer isso

Embora diga que foi corrigido com 5.0.4 e 5.0.5, ainda recebo este erro.

Como reproduzir:
Instale @storybook/cli e o pacote init. Em seguida, init storybook com npx -p @storybook/cli sb init --type react .

➜  my-prj npx -p @storybook/cli sb init --type react
npx: installed 404 in 11.526s

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js<strong i="11">@2</strong>    npm install --save core-js<strong i="12">@3</strong>
  yarn add core-js<strong i="13">@2</strong>              yarn add core-js<strong i="14">@3</strong>

[BABEL] Note: The code generator has deoptimised the styling of /Users/lumio/.npm/_npx/74147/lib/node_modules/@storybook/cli/node_modules/lodash/lodash.js as it exceeds the max of 500KB.

 sb init - the simplest way to add a storybook to your project.

 • Installing Storybook for user specified project type. ✓
 • Adding storybook support to your "React" app. ✓
 • Preparing to install dependencies. ✓


> [email protected] install ./my-prj/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download
[fsevents] Success: "./my-prj/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

added 1160 packages from 900 contributors in 23.386s

 • Installing dependencies. ✓

To run your storybook, type:

   npm run storybook

For more information visit: https://storybook.js.org

➜  my-prj nvim .
➜  my-prj yarn storybook
yarn run v1.15.2
$ start-storybook -p 6006
info @storybook/react v5.0.5
info
info => Loading presets
info => Loading presets
info => Loading custom addons config.
info => Using default webpack setup.
info => Using base config because react-scripts is not installed.
 10% building 5/8 modules 3 active ...j/node_modules/querystring-es3/index.js
WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js<strong i="15">@2</strong>    npm install --save core-js<strong i="16">@3</strong>
  yarn add core-js<strong i="17">@2</strong>              yarn add core-js<strong i="18">@3</strong>

 11% building 13/18 modules 5 active ...my-prj/node_modules/strip-ansi/index.js
WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js<strong i="19">@2</strong>    npm install --save core-js<strong i="20">@3</strong>
  yarn add core-js<strong i="21">@2</strong>              yarn add core-js<strong i="22">@3</strong>

webpack built 896edc3c5271d2618768 in 4031ms
╭──────────────────────────────────────────────────╮
│                                                  │
│   Storybook 5.0.5 started                        │
│   4.71 s for manager and 4.48 s for preview      │
│                                                  │
│   Local:            http://localhost:6006/       │
│   On your network:  http://10.52.40.112:6006/    │
│                                                  │
╰──────────────────────────────────────────────────╯

@lumio Isso não é um erro, é um aviso. Ele foi corrigido em 5.1.0-alpha.16 e eu liberarei a correção em latest depois de alguns dias se ninguém reclamar.

Entendi! Obrigado!

Eu atualizei a versão do livro de histórias para 5.0.6 e isso resolveu o problema.

@ jessy1092 Que bom ouvir isso. Estou fechando isso por enquanto. Se alguém tiver esse problema novamente, eu reabrirei.

Olá,
Parece não funcionar para mim, mesmo com o livro de histórias 5.1.0-alpha.18

Aqui, um repositório reproduzível: https://github.com/christophehurpeau/cra-rest-hooks-storybook

yarn install
yarn storybook

Eu espero que isso ajude

@christophehurpeau Alguma chance de você experimentar 5.0.6 para mim? Reabrindo isso. 😭

Ainda me deparei com o mesmo problema ao usar core-js @ v3 no meu projeto principal. A solução foi certificar-se de que na configuração do webpack, core-js/modules foi resolvido para a versão incluída com o livro de histórias

resolve: {
    alias: {
        'core-js/modules': path.resolve(
            __dirname,
            'node_modules/@storybook/core/node_modules/core-js/modules',
        ),
    }
}

Solução Hacky, mas deve ser boa o suficiente por enquanto.

@shilman também tentou 5.0.6, mesmo resultado (https://github.com/christophehurpeau/cra-rest-hooks-storybook/tree/storybook-5.0.6)

@artursvonda Eu não estou usando core-js v3, uma dependência usa. Eu não tenho node_modules/@storybook/core/node_modules/core-js porque v2 é aquele usado por react-scripts e @ storybook / core, desduplicado em node_modules. Apenas a dependência usando core-js 3 não encontra core-js

ah então funciona quando eu excluo o alias:

module.exports = ({ config, mode }) => {
  console.log(config.resolve.alias);
  delete config.resolve.alias['core-js'];
  return config;
};

Uau. apelidos são assustadores. por que o livro de histórias os está usando?

cc @ndelangen

Eu também estou tendo esse problema. Estou usando o firebase mais recente, que adicionou uma dependência ao core-js @ 3 recentemente.
após a atualização do firebase, o livro de histórias usado para executar produz os seguintes erros:

ERROR in ./node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/array/find' in '/Users/jin/kinyapp/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/@firebase/polyfill/dist/index.esm.js 3:0-37
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/firebase.js
 @ ./src/components/Login.js
 @ ./src/stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

ERROR in ./node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/array/find-index' in '/Users/jin/kinyapp/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/@firebase/polyfill/dist/index.esm.js 4:0-43
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/firebase.js
 @ ./src/components/Login.js
 @ ./src/stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

ERROR in ./node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/object/assign' in '/Users/jin/kinyapp/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/@firebase/polyfill/dist/index.esm.js 5:0-40
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/firebase.js
 @ ./src/components/Login.js
 @ ./src/stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

pode confirmar,

// In some story or dependency of a story
import firebase from "firebase/app"

em um novo cra2 e sb init travamentos

O mesmo problema para mim. Voltar para firebase versão 4.12.1 funcionou, mas tem mais de um ano e não é uma boa solução.

ah então funciona quando eu excluo o alias:

module.exports = ({ config, mode }) => {
  console.log(config.resolve.alias);
  delete config.resolve.alias['core-js'];
  return config;
};

Também usar [email protected] com [email protected] e adicionar isso a .storybook/webpack.config.js resolveu o problema.

Acabei de ver que o firebase atualizou 5.10.0 e também atualizou o livro de histórias para 5.0.10 , e consegui remover o alias "hack" acima.

infelizmente, atualizar o firebase e o storybook para o mais recente não corrigiu meu problema.
Tenho que parar de usar o livro de histórias para este problema.

@zjaml você tentou as soluções alternativas do @parkerholladay acima?

@shilman sobre isso, não sei em qual arquivo devo fazer isso.

@zjaml Isso é .storybook/webpack.config.js . Por favor, deixe-me saber se isso funciona para você!

@shilman funciona assim! Obrigado!

Estou usando o babel preset-env e enfrentei o mesmo problema com o storybook 5.0.10

"useBuiltIns": "usage",
"corejs": {version: 3},

A solução alternativa de exclusão de alias corrigiu isso para mim. 🙏 @christophehurpeau

Devemos excluir o alias do webpack.config da visualização?

talvez até mesmo todos os apelidos?

O mesmo problema aqui, remover o alias não resolve o problema para mim :(

O mesmo problema para mim. Remover o alias não corrige o problema

Este PR irá abordar este e muitos outros problemas, eu acho:
https://github.com/storybooks/storybook/pull/6566

Provavelmente é uma grande mudança, então pode ser lançado no V6, ainda estamos debatendo isso.

Possivelmente, podemos dedicar algum tempo para dividir esse PR em vários PRs para que possamos mesclar e lançar algumas coisas mais rapidamente.

A ajuda seria muito apreciada!

O mesmo problema aqui - o nosso está quebrando com react-app-polyfill que foi atualizado para usar core-js versão 3. Revertendo para a versão 0.2.2 por agora.

confirmar que essa correção funcionou para mim também, [email protected] e [email protected]

adicionou o arquivo ./storybook/webpack.config.js com o acima

~ desculpe - @ storybook / [email protected] não parece lançado - foi intencional? ~

EDIT: Desculpe - acabou encontrando a resposta em outra edição. https://github.com/storybooks/storybook/issues/5893

Gambiarra
Use a próxima versão do CLI / React nativo para obter 5.1.0-alpha.x:

npx -p @ storybook / cli @ next sb init --tipo react_native

Excluir o alias não funcionou para mim. No entanto, consegui contornar isso movendo nosso arquivo babel para .storybook

Olá a todos! Parece que não tem havido muito nesta edição ultimamente. Se ainda houver perguntas, comentários ou bugs, sinta-se à vontade para continuar a discussão. Infelizmente, não temos tempo para abordar todos os problemas. Estamos sempre abertos a contribuições, portanto, envie-nos uma solicitação de pull se quiser ajudar. Os problemas inativos serão fechados após 30 dias. Obrigado!

^ Que eu saiba, este ainda é um problema e não deve ser marcado como inativo

@jdhayford AFAIK, isso foi corrigido no 5.1, que deve ser lançado em alguns dias

@shilman Isso é ótimo! Obrigado e obrigado aos contribuidores 👍

Este problema ainda está acontecendo, mas foi capaz de corrigi-lo usando a solução @brycehill

Excluir o alias não funcionou para mim. No entanto, consegui contornar isso movendo nosso arquivo babel para .storybook

Ainda estou enfrentando o mesmo problema. @ByDesignGit Você pode explicar como conseguiu consertar isso?

Conseguiu corrigir instalando manualmente o npm i core-js -D mais recente.
Não é bom instalar manualmente uma dependência. ele deve gerenciar adequadamente esses problemas internamente.

Esperando pela correção adequada.

Eu também encontrei o mesmo problema. No entanto, acredito que agora seja o oposto do problema original em que um pacote anterior instalou uma versão mais antiga do core-js (2.6.9) como uma dependência e agora o storybook requer core-js @ 3.
Interim corrigido usando a solução @ChandanPHAI e também aguardando uma correção adequada.

Ainda estou enfrentando o mesmo problema. @ByDesignGit Você pode explicar como conseguiu consertar isso?

eu resolvi movendo meu .babelrc para o meu .storybook

Este problema ainda está acontecendo, mas foi capaz de corrigi-lo usando a solução @brycehill

Excluir o alias não funcionou para mim. No entanto, eu consegui contornar isso movendo nosso arquivo babel para .storybook

Mesma coisa aqui:

ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.for-each' in '/indio-ui/.storybook'
 @ ./.storybook/config.js 1:0-43
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

Excluir o alias não funcionou para mim. Mas instalei npm i core-js -D como @ChandanPHAI sugeriu e funcionou 👌

Esperando pela correção adequada também.

Ainda estou enfrentando o mesmo problema. @ByDesignGit Você pode explicar como conseguiu consertar isso?

eu resolvi movendo meu .babelrc para o meu .storybook

Este problema ainda está acontecendo, mas foi capaz de corrigi-lo usando a solução @brycehill

Excluir o alias não funcionou para mim. No entanto, eu consegui contornar isso movendo nosso arquivo babel para .storybook

Funcionou! Copiei .babelrc para .storybook

@ arvenz0210 @ByDesignGit não significa que agora você tem que manter dois .babelrc arquivos? Parece indesejável.

Atualizar meu projeto vue.js para "@storybook/vue": "^5.1.1" resolveu o problema do alias core-js para mim. 👍

• não precisei mover meu babel.config.js
• não precisei adicionar / remover nada da minha configuração do webpack (estou usando https://github.com/storybookjs/vue-cli-plugin-storybook v0.6.1, então minha configuração do webpack é parcialmente gerada pelo vue-cli com um pouco de coisas não relacionadas que adicionei por meio de vue.config.js que vue-cli se funde com a configuração do webpack gerada dinamicamente.)
• não precisou adicionar / remover nenhuma referência a core-js, aliases ou deps que dependem de core-js, etc ...

Também estou vendo isso em um projeto Angular, portanto, nenhum arquivo .babel. Sem sorte com a instalação separada do core-js ou com a exclusão do alias.

//  console.log(config.resolve.alias);
{
  'babel-runtime/core-js/object/assign': '/Development/canopy/node_modules/@storybook/core/node_modules/core-js/es/object/assign.js',
  react: '~/Development/canopy/node_modules/react',
  'react-dom': '/Development/canopy/node_modules/react-dom'
}

Todas as revisões em 5.1.1.

   "@storybook/addon-actions": "^5.1.1",
    "@storybook/addon-knobs": "^5.1.1",
    "@storybook/addon-notes": "^5.1.1",
    "@storybook/addon-viewport": "^5.1.1",
    "@storybook/addons": "^5.1.1",
    "@storybook/angular": "^5.1.1",

Desculpas, não tive tempo para depurar mais.

Usando @storybook/react": "^5.1.1" e ainda tendo esse problema com um novo npm install . Suspeito que @ChandanPHAI esteja correto, tenho outras dependências que instalaram a v2 do pacote core-js .

Este PR feito hoje deve corrigir isso, @shilman fará um novo lançamento testando isso em breve: # 7051

Ainda acontecendo com "@storybook/react": "^5.1.3" - Instalar core-js --dev corrigiu o problema do meu lado.

alguém enfrentando problemas https://github.com/storybookjs/storybook/issues/7021 ??

Yippee!! Acabei de lançar https://github.com/storybookjs/storybook/releases/tag/v5.1.4 contendo PR # 7016 que faz referência a esse problema. Atualize hoje para experimentar!

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

@shilman acabou de atualizar, e os mesmos erros ... :(

Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator'

@shilman Eu atualizei o livro de histórias e complementos para a versão mais recente.

Ainda estou recebendo os erros relacionados ao core-js.

instalar o npm i core-js -D corrige o problema localmente.

sem a biblioteca core-js não está funcionando.

Você está importando babel-polyfill algum lugar em seu código? Em caso afirmativo, tente remover isso?

Veja como consertei o branch repro que obtive:
https://github.com/umakantp/demo-repro/pull/1

Envie-me mais repro repos para mim por meio de qualquer canal, para que eu possa corrigir o problema.

@ChandanPHAI @DonikaV

@ndelangen oi, não tenho babel-polyfill na minha pasta. Eu não posso te mostrar mais. É um repo privado.
livro de histórias e todos os addons foram atualizados.

Olá, estou tendo o mesmo problema com o core-js, mesmo no 5.1.4. A instalação manual do core-js como dependência dev também não funcionou.

Estou trabalhando nisso, novo lançamento em 24h!

Yee-haw !! Acabei de lançar https://github.com/storybookjs/storybook/releases/tag/v5.1.5 contendo PR # 7086 que faz referência a esse problema. Atualize hoje para experimentar!

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

Ainda recebo erros para quase todos os componentes que tenho, como o seguinte:

ERROR in ./src/components/list/VirtualizedList.jsx
Module not found: Error: Cannot find module 'C:\ProjectDirectory\node_modules\@storybook\addon-storysource\loader.js!C:\ProjectDirectory\node_modules\core-js\modules\web.dom-collections.iterator.js'
 @ ./src/components/list/VirtualizedList.jsx 19:0-54
 @ ./src/components/list/index.js
 @ ./src/components/list/List.story.jsx
 @ ./src/components sync story\.jsx?$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

Não estou excluindo, pode ser minha culpa. Eu clanei o cache do yarn, excluí o yarn.lock, instalei a versão mais recente de cada dependência. Não tenho core-js instalado como dependência, mas uso o babel com alguns presets como @babel/preset-env . Eu tenho uma configuração de pacote web personalizado:

const path = require('path');
const { DefinePlugin } = require('webpack');

const buildTimeConfig = require('../buildTimeConfig');

const resolveLocalDirectory = relativePath => path.resolve(__dirname, '../', relativePath);

module.exports = async ({ config }) => {
  config.resolve.extensions.push('.jsx');
  config.resolve.extensions.push('.json');

  config.plugins.push(
    new DefinePlugin({
      SUPPORTED_LOCALES: `'${buildTimeConfig.REQUIRED_LOCALES}'`,
    }),
  );

  config.resolve.alias = {
    $components: resolveLocalDirectory('src/components'),
  };

  config.module.strictExportPresence = true;

  config.module.rules.push({
    test: /\.jsx?$/,
    loaders: [require.resolve('@storybook/addon-storysource/loader')],
    enforce: 'pre',
  });

  // Unsafe override of css-modules rule for the following
  // https://github.com/storybooks/storybook/issues/6083.
  config.module.rules[2] = {
    oneOf: [
      {
        test: /\.module\.(scss|css)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              localsConvention: 'camelCaseOnly',
              importLoaders: 1,
              modules: {
                localIdentName: '[local]_[hash:5]',
              },
              sourceMap: true,
            },
          },
          'sass-loader',
        ],
      },
      {
        test: /(?<!\.module)\.(scss|css)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true,
            },
          },
          'sass-loader',
        ],
      },
      {
        test: /\.json$/,
        include: /node_modules\/emoji-dictionary/,
        loader: 'json-loader',
      },
      {
        exclude: /\.(js|jsx|ejs|html|json|md)$/,
        loader: 'file-loader',
        options: { name: 'assets/[name].[ext]' },
      },
    ],
  };

  return config;
};

@filippoitaliano Tenho exatamente o mesmo erro. Posso confirmar que o arquivo está presente no caminho dos módulos core-js e também o babel preset tem o core-js 3 ativado, mas ainda falha. Você foi capaz de resolver isso?

Editar:

Se eu remover addon-storysource, funciona conforme o esperado. Não tenho certeza do que está causando isso.

Editar 2:
Cavou mais fundo. Por alguma razão, o carregador storysource precisa que todos os arquivos .js estejam nele para aparecer no painel de complementos e teve que excluir os módulos de nó na configuração

{
test: /\.js$/,
exclude: /node_modules/,
loaders: [require.resolve('@storybook/addon-storysource/loader')],
enforce: 'pre',
}

Possivelmente relacionado a # 3626 # 6984

cc @ igor-dv @libetl ☝️

@ aga5tya Sim, você acertou o problema. Excluí node_modules e tudo funciona bem!

Eu precisei:

• [x] atualizar todas as dependências do @ storybook / *
• [x] adicionar "corejs": 3 ao meu .babelrc
• [x] executar yarn add corejs@3
• [x] adicionar exclude: /node_modules/, ao meu webpack.config.js
• [x] remover import 'babel-polyfill' do meu app.js

babel polyfill está obsoleto e deve ser substituído por core-js em qualquer lugar

ou airbnb-browser-shims :-p

de qualquer forma, node_modules deve sempre ser excluído da transpilação.

Estou tendo o seguinte erro:

ERROR in ./.storybook/config.js
Módulo não encontrado: Erro: Não é possível encontrar o módulo 'core-js / modules / web.dom.iterable'

Estou usando o storybook / vue 5.1.9.

@flowck instale core-js v3 na raiz do seu projeto

Podemos encontrar uma maneira de usar o livro de histórias sem nenhum core-js em uso? Por que os consumidores não podem fornecer seus próprios calços?

babel-polyfills é um dep de uma biblioteca que tenho que usar. Como posso fazer o livro de histórias funcionar neste caso?

Executei yarn upgrade interactive --latest , atualizei todas as dependências relacionadas ao livro de histórias e agora está funcionando! 🎉

Para sua informação: Este erro só aconteceu depois que eu adicionei o addon @storybook/addon-knobs .

@ chadlavi-casebook uhm, você poderia tentar adicionar um plugin para ignorar o webpack, eu acho?
https://webpack.js.org/plugins/ignore-plugin/

Tive o mesmo problema ao executar @ storybook / vue 5.1.9. Executando yarn why core-js resultou isto:

=> Found "[email protected]"
info Has been hoisted to "core-js"
info Reasons this module exists
   - "workspace-aggregator-20eaddfd-71c7-48bf-a12d-ecca73d8226d" depends on it
   - Hoisted from "_project_#@storybook#addon-knobs#core-js"
   - Hoisted from "_project_#@storybook#addon-viewport#core-js"
   - Hoisted from "_project_#@storybook#vue#core-js"
   - Hoisted from "_project_#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#addons#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#client-api#core-js"
   - Hoisted from "_project_#@storybook#addon-viewport#@storybook#client-logger#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#components#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#core-events#core-js"
   - Hoisted from "_project_#@storybook#vue#@storybook#core#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#theming#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#addons#@storybook#api#core-js"
   - Hoisted from "_project_#@storybook#vue#@storybook#core#@storybook#channel-postmessage#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#addons#@storybook#channels#core-js"
   - Hoisted from "_project_#@storybook#vue#@storybook#core#@storybook#node-logger#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#client-api#@storybook#router#core-js"
   - Hoisted from "_project_#@storybook#vue#@storybook#core#@storybook#ui#core-js"
   - Hoisted from "_project_#@storybook#vue#@storybook#core#lazy-universal-dotenv#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#components#simplebar-react#simplebar#core-js"
info Disk size without dependencies: "6.69MB"
info Disk size with unique dependencies: "6.69MB"
info Disk size with transitive dependencies: "6.69MB"
info Number of shared dependencies: 0
=> Found "@vue/babel-preset-app#[email protected]"
info This module exists because "_project_#@vue#cli-plugin-babel#@vue#babel-preset-app" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0
=> Found "@babel/runtime-corejs2#[email protected]"
info This module exists because "_project_#@vue#cli-plugin-babel#@vue#babel-preset-app#@babel#runtime-corejs2" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0
=> Found "fbjs#[email protected]"
info This module exists because "_project_#@storybook#addon-knobs#@storybook#components#recompose#fbjs" depends on it.
info Disk size without dependencies: "4.37MB"
info Disk size with unique dependencies: "4.37MB"
info Disk size with transitive dependencies: "4.37MB"
info Number of shared dependencies: 0
=> Found "babel-runtime#[email protected]"
info This module exists because "_project_#@storybook#addon-knobs#@storybook#components#react-syntax-highlighter#babel-runtime" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0

✅ Adicionar core-js@^2.6.9 a devDependencies resolveu para mim.

Certifique-se de excluir seus node_modules primeiro.
rm -rf node_modules

Eu tenho esse problema depois de atualizar para v5.1.9 de v5.0.6 .

O mesmo problema. Corrigido após o downgrade de v5.1.9 para v5.0.6

@JamyGolden & @Exomnius poderiam compartilhar mais sobre sua configuração?

a saída de yarn why core-js é útil, um repo de reprodução é ainda mais útil.

@ndelangen Eu atualizei para 5.1.9 sem problemas agora, acho que uma nova dependência de patch foi instalada e resolveu o problema 🤷‍♀️

Editar, teve que fazer o downgrade novamente, falhando nos testes de CI. Eu fiz um yarn why core-js nisso:

$ yarn why core-js
yarn why v1.17.3
[1/4] 🤔  Why do we have the module "core-js"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "core-js"
info Reasons this module exists
   - Hoisted from "@storybook#react#core-js"
   - Hoisted from "@storybook#addon-actions#core-js"
   - Hoisted from "@storybook#addon-links#core-js"
   - Hoisted from "@storybook#addon-storyshots#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#components#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#api#core-js"
   - Hoisted from "@storybook#react#@storybook#core#core-js"
   - Hoisted from "@storybook#addon-links#@storybook#core-events#core-js"
   - Hoisted from "@storybook#addon-storyshots#@storybook#addons#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#theming#core-js"
   - Hoisted from "@storybook#react#@storybook#node-logger#core-js"
   - Hoisted from "@storybook#addon-links#@storybook#router#core-js"
   - Hoisted from "@storybook#addon-storyshots#@storybook#addons#@storybook#channels#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#channel-postmessage#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#client-api#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#ui#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#theming#@storybook#client-logger#core-js"
   - Hoisted from "@storybook#react#@storybook#core#lazy-universal-dotenv#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#components#simplebar-react#simplebar#core-js"
info Disk size without dependencies: "6.69MB"
info Disk size with unique dependencies: "6.69MB"
info Disk size with transitive dependencies: "6.69MB"
info Number of shared dependencies: 0
=> Found "protractor-flake#[email protected]"
info This module exists because "protractor-flake" depends on it.
info Disk size without dependencies: "3.45MB"
info Disk size with unique dependencies: "3.45MB"
info Disk size with transitive dependencies: "3.45MB"
info Number of shared dependencies: 0
=> Found "core-js-compat#[email protected]"
info This module exists because "@babel#preset-env#core-js-compat" depends on it.
info Disk size without dependencies: "6.63MB"
info Disk size with unique dependencies: "6.63MB"
info Disk size with transitive dependencies: "6.63MB"
info Number of shared dependencies: 0
=> Found "babel-runtime#[email protected]"
info This module exists because "social-tags-webpack-plugin#babel-runtime" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "node-plop#[email protected]"
info This module exists because "plop#node-plop" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "babel-polyfill#[email protected]"
info This module exists because "flow-typed#babel-polyfill" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "fbjs#[email protected]"
info This module exists because "@storybook#addon-actions#@storybook#components#recompose#fbjs" depends on it.
info Disk size without dependencies: "4.37MB"
info Disk size with unique dependencies: "4.37MB"
info Disk size with transitive dependencies: "4.37MB"
info Number of shared dependencies: 0
✨  Done in 1.94s.

Você fez funcionar localmente, mas o IC ainda apresentou o mesmo erro?

@ndelangen, sim, o CI e outro desenvolvedor estão tendo problemas (atualizarei com sua versão de yarn / node quando eu conseguir), mas as coisas estão bem do meu lado (yarn 1.15.2 , node 8.15.1 ), estamos usando um arquivo de bloqueio também. O acima foi o yarn why core-js falha e este é o meu:

yarn why core-js
yarn why v1.15.2
warning ../package.json: No license field
[1/4] 🤔  Why do we have the module "core-js"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "core-js"
info Reasons this module exists
   - Hoisted from "@storybook#react#core-js"
   - Hoisted from "@storybook#addon-actions#core-js"
   - Hoisted from "@storybook#addon-links#core-js"
   - Hoisted from "@storybook#addon-storyshots#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#components#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#api#core-js"
   - Hoisted from "@storybook#react#@storybook#core#core-js"
   - Hoisted from "@storybook#addon-links#@storybook#core-events#core-js"
   - Hoisted from "@storybook#addon-storyshots#@storybook#addons#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#theming#core-js"
   - Hoisted from "@storybook#react#@storybook#node-logger#core-js"
   - Hoisted from "@storybook#addon-links#@storybook#router#core-js"
   - Hoisted from "@storybook#addon-storyshots#@storybook#addons#@storybook#channels#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#channel-postmessage#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#client-api#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#ui#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#theming#@storybook#client-logger#core-js"
   - Hoisted from "@storybook#react#@storybook#core#lazy-universal-dotenv#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#components#simplebar-react#simplebar#core-js"
info Disk size without dependencies: "6.69MB"
info Disk size with unique dependencies: "6.69MB"
info Disk size with transitive dependencies: "6.69MB"
info Number of shared dependencies: 0
=> Found "protractor-flake#[email protected]"
info This module exists because "protractor-flake" depends on it.
info Disk size without dependencies: "3.45MB"
info Disk size with unique dependencies: "3.45MB"
info Disk size with transitive dependencies: "3.45MB"
info Number of shared dependencies: 0
=> Found "core-js-compat#[email protected]"
info This module exists because "@babel#preset-env#core-js-compat" depends on it.
info Disk size without dependencies: "6.63MB"
info Disk size with unique dependencies: "6.63MB"
info Disk size with transitive dependencies: "6.63MB"
info Number of shared dependencies: 0
=> Found "babel-runtime#[email protected]"
info This module exists because "social-tags-webpack-plugin#babel-runtime" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "node-plop#[email protected]"
info This module exists because "plop#node-plop" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "babel-polyfill#[email protected]"
info This module exists because "flow-typed#babel-polyfill" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "fbjs#[email protected]"
info This module exists because "@storybook#addon-actions#@storybook#components#recompose#fbjs" depends on it.
info Disk size without dependencies: "4.37MB"
info Disk size with unique dependencies: "4.37MB"
info Disk size with transitive dependencies: "4.37MB"
info Number of shared dependencies: 0
✨  Done in 2.85s.

Um exemplo do mesmo erro que existe em todas as afirmações:

FAIL path/to/test/index.spec.js
  ● Test suite failed to run

    Cannot find module 'core-js/modules/es6.symbol' from 'localMocksFile.js'

aha, então o livro de histórias está funcionando bem, mas um teste ainda está usando uma versão antiga do core-js!

O que há dentro de localMocksFile.js ? Provavelmente, tudo o que você precisa fazer é atualizar esse 1 arquivo.

@ndelangen o erro que colei anteriormente estava relacionado à execução de storyshots (que só ocorre após atualizar a versão do livro de histórias). Os erros que o outro desenvolvedor obtém ao executar yarn storybook contém muitos erros semelhantes, aparentemente um erro em cada arquivo:

Entrypoint main [big] = runtime~main.78e9af38499895fecc3d.bundle.js runtime~main.78e9af38499895fecc3d.bundle.js.map vendors~main.78e9af38499895fecc3d.bundle.js vendors~main.78e9af38499895fecc3d.bundle.js.map main.78e9af38499895fecc3d.bundle.js main.78e9af38499895fecc3d.bundle.js.map
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true 64 bytes {main} [built]
[./.storybook/config.js] 368 bytes {main} [built]
[./app sync recursive \.stories\.(js|jsx)$] ./app sync \.stories\.(js|jsx)$ 5.07 KiB {main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~main} [built]
[./node_modules/@storybook/react/dist/client/index.js] 1.26 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js/features/symbol/index.js] 251 bytes {vendors~main} [built]
[./node_modules/global/window.js] 232 bytes {vendors~main} [built]
[./node_modules/mockdate/src/mockdate.js] 1.78 KiB {vendors~main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {vendors~main} [built]
[./node_modules/regenerator-runtime/runtime.js] 23 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true] 7.68 KiB {vendors~main} [built]
    + 1352 hidden modules

ERROR in ./app/helpers/device.js
Module not found: Error: Cannot find module 'core-js/modules/es6.regexp.match'
 @ ./app/helpers/device.js 1:0-42 1:42-84
 @ ./app/helpers/index.js
 @ ./app/components/Button/index.js
 @ ./app/components/Button/__tests__/index.stories.js
 @ ./app sync \.stories\.(js|jsx)$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true
...

Não tenho certeza se esta é uma informação útil, mas @babel/polyfill não está incluído no package.json primário do projeto.

Estou tendo o seguinte erro:

ERROR in ./.storybook/config.js
Módulo não encontrado: Erro: Não é possível encontrar o módulo 'core-js / modules / web.dom.iterable'

Estou usando o storybook / vue 5.1.9.

Resolvido ao instalar https://www.npmjs.com/package/babel-loader

package.json

  "dependencies": {
    "babel-loader": "^8.0.6"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^5.1.11",
    "@storybook/addon-links": "^5.1.11",
    "@storybook/addons": "^5.1.11",
    "@storybook/react": "^5.1.11"
  }

Esta é uma solução alternativa ao invés de uma correção, mas reverter TODOS os meus pacotes de Storybook (incluindo complementos) para a versão 5.0.6 corrigiu isso. Nada mais neste tópico ajudou.

(Comandos para React + Yarn abaixo, mas facilmente traduzíveis para NPM / Vue):

Primeiro:

yarn remove @storybook/react @storybook/addon-actions @storybook/addon-knobs @storybook/addon-links @storybook/addon-notes @storybook/addons @storybook/addon-storyshots 

Seguido por:

yarn add @storybook/[email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected]

Estou vendo o mesmo problema quando tento publicar o livro de histórias:
ERROR in ./src/lib/helpers.js Module not found: Error: Cannot find module 'core-js/modules/web.dom.iterable' @ ./src/lib/helpers.js 16:0-43 @ ./src/components/Person.js @ ./src/components/Person.stories.js @ ./src sync \.stories\.js$ @ ./.storybook/config.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

Isso aconteceu depois de atualizar para o nó v12 usando nvm.

Tivemos que fazer isso para corrigir um problema de polyfill, então não posso fazer o downgrade do nó. Antes disso tudo funcionava. Infelizmente, não sei em qual versão do nó eu estava antes disso. Eu tentei de tudo neste tópico, mas não quero voltar para 5.0.6., Pois um grande motivo para configurar o livro de histórias para este projeto é usar os novos documentos. Empurrei tudo aqui: https://github.com/netliferesearch/netlife2019/tree/storybook_setup_stories

Edit: Eu fiz downgrade do nó e ainda não está funcionando, deveria ter tentado isso antes de postar. Estou um pouco perdido sobre o que está acontecendo, vou continuar procurando.

Usando @storybook/vue 5.2.5 além do Nuxt.js v2.10.1 e teve o mesmo problema: yarn storybook funciona, mas yarn build ou qualquer outra tarefa relacionada ao nuxt falhou. yarn why core-js fornece a seguinte saída:

$ yarn why core-js
yarn why v1.17.3
[1/4] 🤔  Why do we have the module "core-js"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "core-js"
info Reasons this module exists
   - Hoisted from "@storybook#addon-actions#core-js"
   - Hoisted from "@storybook#addon-knobs#core-js"
   - Hoisted from "@storybook#addon-links#core-js"
   - Hoisted from "@storybook#addon-viewport#core-js"
   - Hoisted from "@storybook#addons#core-js"
   - Hoisted from "@storybook#vue#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#api#core-js"
   - Hoisted from "@storybook#addons#@storybook#channels#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#client-api#core-js"
   - Hoisted from "@storybook#addon-viewport#@storybook#client-logger#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#components#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#core-events#core-js"
   - Hoisted from "@storybook#vue#@storybook#core#core-js"
   - Hoisted from "@storybook#addon-links#@storybook#router#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#theming#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#client-api#@storybook#channel-postmessage#core-js"
   - Hoisted from "@storybook#vue#@storybook#core#@storybook#node-logger#core-js"
   - Hoisted from "@storybook#vue#@storybook#core#@storybook#ui#core-js"
   - Hoisted from "@storybook#vue#@storybook#core#lazy-universal-dotenv#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#components#simplebar-react#simplebar#core-js"
info Disk size without dependencies: "7.02MB"
info Disk size with unique dependencies: "7.02MB"
info Disk size with transitive dependencies: "7.02MB"
info Number of shared dependencies: 0
=> Found "babel-runtime#[email protected]"
info This module exists because "@storybook#addon-actions#react-inspector#babel-runtime" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0
=> Found "@nuxt/babel-preset-app#[email protected]"
info This module exists because "nuxt#@nuxt#webpack#@nuxt#babel-preset-app" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0
=> Found "@vue/babel-preset-app#[email protected]"
info This module exists because "vuepress#@vuepress#core#@vue#babel-preset-app" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0
=> Found "@babel/runtime-corejs2#[email protected]"
info This module exists because "vuepress#@vuepress#core#@vue#babel-preset-app#@babel#runtime-corejs2" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0
=> Found "fbjs#[email protected]"
info This module exists because "@storybook#addon-links#@storybook#router#@reach#router#create-react-context#fbjs" depends on it.
info Disk size without dependencies: "4.37MB"
info Disk size with unique dependencies: "4.37MB"
info Disk size with transitive dependencies: "4.37MB"
info Number of shared dependencies: 0
✨  Done in 1.25s.

Então eu uso a mesma abordagem fornecida por @frebro , tente

$ yarn add -D [email protected]

e 🎉: Obtenho um ambiente de trabalho: yarn storybook , yarn build e todas as outras tarefas estão funcionando novamente.

@rwam yarn add -D [email protected] funciona para mim no meu livro de histórias 5.2.5 projeto HTML thx cara :)

Vue com @ vue / cli migrando

sobre o erro:

se 'core-js': '^3.*.*':

ERROR in ./.storybook/config.js
Module not found: Error: Cannot find module 'core-js/modules/web.dom.iterable'

se 'core-js': '^2.*.*':

// many errors from storybook and addons
Cannot find module 'core-js/modules/***'

sobre deps:

"@vue/cli*": "^4.0.5", depends on 'core-js': '^3.*.*'
"@vue/cli*": "^3.*.*", depends on 'core-js': '^2.*.*'
"@storybook/vue": "^5.1.0", depends on 'core-js': '^3.*.*' with d.ts
"@storybook/vue": "^5.0.6", depends on 'core-js': '^2.*.*' but without d.ts

meus departamentos de trabalho:

"@vue/cli*": "^4.0.5", depends on 'core-js': '^3.*.*'
"@storybook/vue": "^5.1.0", depends on 'core-js': '^3.*.*' with d.ts

https://cli.vuejs.org/migrating-from-v3/#migrating -from-v3
if Invalid Option: corejs is not a valid top-level option : -rm -rf node_modules .

Saúde para você e seus entes queridos;)

Eu encontrei uma solução mais robusta para fazer o Storybook funcionar em um projeto Nuxt. A solução depende de uma incompatibilidade de versão do core-js. O Nuxt usa a versão padrão 2 e o Storybook versão 3. Portanto, para resolver o problema, tenho que seguir esta nota de @ nuxt / babel-preset-app :

Nota: Como core-js @ 2 e core-js @ 3 são suportados pelo Babel 7.4.0, recomendamos adicionar core-js diretamente e definir a versão por meio da opção corejs.

Eu obtenho um ambiente de trabalho novamente com o Nuxt 2.11.0 usando esta atualização no meu nuxt.config.js :

yarn add --dev core-js<strong i="15">@3</strong> @babel/runtime-corejs3

export default {
  …
  build: {
    babel: {
      presets() {
        return [
          [
            '@nuxt/babel-preset-app',
            {
              corejs: { version: 3 }
            }
          ]
        ]
      }
    }
  }
}

Encontrei esta solução porque não consegui atualizar o nuxt para o estável mais recente.

Eu enfrentei o mesmo problema ao tentar adicionar o livro de histórias (5.3.18) ao gatsby v2 quando, pelo menos, um componente estava usando consultas estáticas. Mover .babelrc para .storybook funcionou conforme sugerido por @brycehill .

Eu encontrei uma solução mais robusta para fazer o Storybook funcionar em um projeto Nuxt. A solução depende de uma incompatibilidade de versão do core-js. O Nuxt usa a versão padrão 2 e o Storybook versão 3. Portanto, para resolver o problema, tenho que seguir esta nota de @ nuxt / babel-preset-app :

Nota: Como core-js @ 2 e core-js @ 3 são suportados pelo Babel 7.4.0, recomendamos adicionar core-js diretamente e definir a versão por meio da opção corejs.

Eu obtenho um ambiente de trabalho novamente com o Nuxt 2.11.0 usando esta atualização no meu nuxt.config.js :

yarn add --dev core-js<strong i="16">@3</strong> @babel/runtime-corejs3

export default {
  …
  build: {
    babel: {
      presets() {
        return [
          [
            '@nuxt/babel-preset-app',
            {
              corejs: { version: 3 }
            }
          ]
        ]
      }
    }
  }
}

Encontrei esta solução porque não consegui atualizar o nuxt para o estável mais recente.

Incrível, funcionou para mim!

@masives Encontrando o mesmo problema com gatsby. Você poderia postar um link para o comentário / .babelrc, pois não consigo encontrá-los nesta edição.

Nvm. Os problemas eram causados ​​pelo fato de as histórias estarem no diretório de páginas. Resolvido o problema movendo as histórias das páginas para __stories__

Next.js 9.1.1 -> Next.js 9.4.4 me enganou.

A comparação dos resultados de npm list core-js revelou que um tempo de execução do babel do core js estava faltando após a atualização do Next. Reinstalei este pacote ausente nas dependências de desenvolvimento e no LO e eis que funcionou

cc @ndelangen

O mesmo problema com a versão 5.3.19 ao lidar com a migração do core-js v2 para v3

O mesmo problema para mim. Como @denimamab , estou usando a versão 5.3.19

Corrigido localmente com:
rm ./package-lock.json
rm -rf ./node_modules
npm install

Agora o npm run storybook funciona

Só queria compartilhar minha experiência com esse bug depois de passar um dia nele ...

Eu li vários tópicos de problemas do GH, incluindo este, ao solucionar o problema. Tentei algumas das correções sugeridas, com apenas uma resultando em sucesso "aceitável".

Referência

Colocando tudo isso em um só lugar desde então, primo. 😅

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-modules-commonjs",
    "@babel/plugin-transform-object-assign",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-transform-runtime"
  ],
  "sourceRoot": "./"
}

last 2 versions
> 1%
IE >= 11

"scripts": {
  "build:storybook": "build-storybook --quiet -o ./dist/storybook",
  "storybook": "start-storybook -p 6006"
},
"dependencies": {
  "@babel/core": "7.3.4",
  "@babel/plugin-proposal-class-properties": "7.3.4",
  "@babel/plugin-proposal-optional-chaining": "7.7.5",
  "@babel/plugin-transform-modules-commonjs": "7.2.0",
  "@babel/plugin-transform-object-assign": "7.2.0",
  "@babel/plugin-transform-runtime": "7.6.2",
  "@babel/polyfill": "7.2.5",
  "@babel/preset-env": "7.3.4",
  "@babel/preset-react": "7.0.0",
  "babel-loader": "8.0.6",
  "react": "16.10.2",
  "react-dom": "16.10.2",
  "webpack": "4.43.0",
  "webpack-cli": "3.3.11"
},
"devDependencies": {
  "@storybook/addon-a11y": "5.3.19",
  "@storybook/addon-actions": "5.3.19",
  "@storybook/addon-docs": "5.3.19",
  "@storybook/addon-knobs": "5.3.19",
  "@storybook/addon-links": "5.3.19",
  "@storybook/addons": "5.3.19",
  "@storybook/react": "5.3.19",
  "@storybook/source-loader": "5.3.19",
  "acorn": "7.2.0",
  "storybook-design-token": "0.7.3",
  "webpack-dev-server": "3.10.3"
}

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.0.2 - /usr/local/bin/bash (via homebrew)
  Binaries:
    Node: 10.18.0
    npm: 6.13.4
  Browsers:
    Chrome: 86.0.4240.193
    Firefox: 80.0.1
    Safari: 14.0

Status e pré-requisitos do projeto

• Eu tenho uma mudança separada e pendente para atualizar todos os pacotes webpack / babel da [minha equipe] (babel é v7.xx na minha mudança e na mudança separada), mas ainda não saiu do teste devido ao nosso teste ie11 a infraestrutura. a mudança introduz corejs versão 3 como uma dependência e useBuiltIns: 'usage' , onde anteriormente estávamos usando uma importação manual de @babel/polyfill e o padrão para useBuiltIns . Eu prevejo que essa mudança será mesclada em breve. esta é a principal razão pela qual posso / não irei incluir corejs como uma dependência em minha mudança atual, como muitos outros sugeriram (e verificaram) como uma correção.
• tenho _outra_ mudança pendente, com base no branch que atualiza os pacotes webpack / babel, que atualiza nossa versão do livro de histórias de v5.3.19 para a mais nova v6.xx. Não tentei reproduzir este bug nesse branch porque presumo que tudo ficará bem ) meu motivo é descrito abaixo.
• o projeto atual tem uma raiz .babelrc (vista acima) para o aplicativo principal. esta configuração usa @babel/preset-env e usa uma raiz .browserslistrc (vista acima) para determinar o uso do polyfill. nenhum .storybook/.babelrc está presente no branch principal de nosso aplicativo.
• usamos o livro de histórias apenas para documentação interna do desenvolvedor. como a organização usa principalmente o Chrome como nosso navegador padrão, polyfills são desnecessários. essa revelação realmente contribuiu para a solução final.
• Eu _am_ usando uma configuração de pacote da web de livro de histórias personalizado, mas apenas para adicionar regras extras sobre fontes / imagens. Abandonei a tentativa de modificar as regras básicas do processamento de .js pelos motivos descritos nesta edição do livro de histórias .
• ESTOU EXPERIMENTANDO ESSE PROBLEMA APENAS AO GERAR O SITE DO STORYBOOK ESTÁTICO. executando através do dev-server incluído para desenvolvimento local não encontra problemas.

Tentativas de correção antecipada

A maioria das minhas primeiras tentativas de corrigir o problema girou em torno de tentar definir opções na raiz .babelrc (visto acima) para tentar se comunicar com o babel (conforme executado pela ferramenta build-storybook ) como eu quero a transpilação ocorrer. Nenhuma configuração de useBuiltIns , sourceType , etc., conforme sugerido por outros, foi bem-sucedida. Além disso, tentei toda a rota clean-npm-cache-remove-node-modules-and-package-lock-then-npm-install, sem sucesso (embora isso _did_ cause algumas mudanças de deps).

Solução final

Embora estivesse inicialmente hesitante em tentar usar um .storybook/.babelrc , eu estava ficando sem opções. Eu já havia tentado criar aquele arquivo e fazê-lo funcionar harmoniosamente com a raiz .babelrc por meio da propriedade extends e bater em uma parede, mas decidi tentar novamente.

Uma simples mudança da configuração raiz do babel para a configuração específica do livro de histórias permitiu que a construção do site estático fosse concluída com sucesso, mas ainda havia alguns erros de tempo de execução indicativos de transpilação com defeito (reexportar algumas importações resultou em undefined no arquivo no qual residem as importações finais). Foi mais ou menos nessa época que percebi que não precisava de nenhum polyfills para o livro de histórias, então removi a predefinição @babel/preset-env do novo .storybook/.babelrc . HUZZAH, problema resolvido! A configuração original precisava persistir para o aplicativo, portanto, renomeei para .storybook/.babelrc-ci e restaurei a configuração raiz original. Então, eu tive que atualizar nosso pipeline de CI para verificar a configuração ci e renomear para cortar o sufixo -ci antes da construção do site estático, mas isso era trivial.

Adivinhando o (s) problema (s)

Este processo me fez inspecionar meus pacotes e o arquivo de bloqueio com freqüência, e descobri que, embora o storybook v5.3.19 e todos os seus addons tenham uma dependência do corejs v3.xx, o @babel/polyfill e um punhado de outras babel deps confiou em corejs v2.xx! Estou supondo que pelo menos um problema é a resolução no aplicativo para usar o menor denominador comum da v2. Isso fazia sentido, já que os erros que eu estava enfrentando referiam-se a módulos como es.array.iterator enquanto a v2 fornece módulos como es6.array.iterator . Não tenho certeza de como a descrição do livro de histórias é conflitante se pretende suportar configurações de babel / corejs mais antigas, mas parece que é o caso. Além disso, deve haver algo sobre como / all storybook-babel / installed-babel / storybook-corejs / installed-corejs localizam e aplicam .babelrc . Não sei por que mover a configuração raiz para uma configuração específica do livro de histórias resolve o problema magicamente. Pathing, talvez? 🤷‍♂️

Conclusão

Se você ficou por aí depois de toda essa tagarelice, parabéns! 😂

Resumindo, não estou entusiasmado com os obstáculos que tive de ultrapassar para contornar este problema, mas talvez a minha situação seja de alguma forma única. Além disso, poderei extrair tudo depois que minhas atualizações do babel / webpack / storybook mencionadas anteriormente forem mescladas.

De qualquer forma, espero que isso tenha sido interessante para pelo menos uma pessoa que sofre do mesmo problema. E irei em frente e identificarei @shilman e @ndelangen, já que eles parecem estar interessados ​​em resolver esse problema. 👋