Storybook: Storybook v5 se rompe cuando se usa core-js ^ 3.0

Storybook está usando core-js incorrectamente de alguna manera. @babel/preset-env versión 7.4.1 actualizada a core-js@3 y rompió mi aplicación de reacción de Storybook al ejecutar pruebas

client-api parece que debería tener core-js @ 2 como dependencia ya que el núcleo generado lo requiere

Aunque dice que está arreglado con 5.0.4 y 5.0.5, sigo recibiendo este error.

Cómo reproducir:
Instale @storybook/cli y el paquete init. Luego inicie el libro de cuentos con 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 Eso no es un error, es una advertencia. Está arreglado en 5.1.0-alpha.16 y publicaré el arreglo en latest después de que haya estado fuera por unos días si nadie se queja.

¡Entendido! ¡Gracias!

Actualicé la versión del libro de cuentos a 5.0.6 y resolvió este problema.

@ jessy1092 Es genial escucharlo. Estoy cerrando esto por ahora. Si alguien vuelve a tener este problema, lo volveré a abrir.

Hola,
No parece funcionar para mí, incluso con el libro de cuentos 5.1.0-alpha.18

Aquí un repositorio reproducible: https://github.com/christophehurpeau/cra-rest-hooks-storybook

yarn install
yarn storybook

espero que esto ayude

@christophehurpeau ¿ Alguna posibilidad de que puedas probar 5.0.6 por mí? Reabriendo esto. 😭

Todavía me encontré con el mismo problema mientras usaba core-js @ v3 en mi proyecto principal. La solución fue asegurarse en la configuración del paquete web, que core-js/modules se resuelve en la versión incluida con el libro de cuentos

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

Solución hacky, pero debería ser lo suficientemente buena por ahora.

@shilman también probó 5.0.6, mismo resultado (https://github.com/christophehurpeau/cra-rest-hooks-storybook/tree/storybook-5.0.6)

@artursvonda No estoy usando core-js v3, una dependencia lo usa. No tengo node_modules/@storybook/core/node_modules/core-js porque v2 es el utilizado tanto por react-scripts como por @ storybook / core, deducido en node_modules. Solo la dependencia que usa core-js 3 no encuentra core-js

ah, entonces funciona cuando elimino el alias:

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

Guau. los alias dan miedo. ¿Por qué los usa el libro de cuentos?

cc @ndelangen

Yo también tengo este problema. Estoy usando la última base de fuego que agregó una dependencia a core-js @ 3 recientemente.
después de actualizar firebase, el libro de cuentos utilizado para ejecutar produce los siguientes errores:

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

puede confirmar,

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

en un nuevo cra2 y sb init choques

El mismo problema para mí. Volver a la versión firebase 4.12.1 funcionó, pero tiene más de un año y no es una buena solución.

ah, entonces funciona cuando elimino el alias:

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

También usar [email protected] con [email protected] y agregar esto a .storybook/webpack.config.js resolvió el problema.

Acabo de ver que firebase tenía una actualización a 5.10.0 y también actualicé el libro de cuentos a 5.0.10 , y pude eliminar el alias "hack" de arriba.

Desafortunadamente, actualizar tanto la base de fuego como el libro de cuentos a la última versión no solucionó mi problema.
Tengo que dejar de usar el libro de cuentos para este problema.

@zjaml , ¿ probó las soluciones alternativas de

@shilman sobre eso, no sé en qué archivo debería hacerlo.

@zjaml Eso es .storybook/webpack.config.js . ¡Por favor, dígame si le funciona!

@shilman , ¡funciona de esa manera! ¡Gracias!

Estoy usando babel preset-env y enfrenté el mismo problema con Storybook 5.0.10

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

La solución alternativa de eliminar alias lo solucionó para mí. 🙏 @christophehurpeau

¿Deberíamos eliminar el alias del webpack.config de la vista previa?

tal vez incluso todos los alias?

El mismo problema aquí, el alias de eliminación no soluciona el problema por mí :(

El mismo problema para mí. Eliminar el alias no soluciona el problema

Este RP abordará este y muchos otros problemas, creo:
https://github.com/storybooks/storybook/pull/6566

Sin embargo, probablemente sea un cambio importante, por lo que podría enviarse en V6, todavía estamos debatiendo esto.

Posiblemente podamos dedicar algo de tiempo a dividir ese PR en varios PR para que podamos fusionar y lanzar algunas cosas más rápido.

¡Se agradecería mucho la ayuda!

El mismo problema aquí: el nuestro está rompiendo con react-app-polyfill aunque, que se ha actualizado para usar core-js versión 3. Retrocediendo a la versión 0.2.2 por ahora.

confirmar que esta solución también funcionó para mí, [email protected] y [email protected]

agregó el archivo ./storybook/webpack.config.js con lo anterior

~ lo siento - @ storybook / [email protected] no parece lanzado - ¿fue intencional? ~

EDITAR: Lo siento, terminé de encontrar la respuesta en otro problema. https://github.com/storybooks/storybook/issues/5893

Solución alterna
Utilice la siguiente versión del CLI / React nativo para obtener 5.1.0-alpha.x:

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

Eliminar el alias no funcionó para mí. Sin embargo, pude solucionar esto moviendo nuestro archivo babel a .storybook

¡Hola a todos! Parece que últimamente no ha habido mucho en este tema. Si todavía hay preguntas, comentarios o errores, no dude en continuar con la discusión. Desafortunadamente, no tenemos tiempo para abordar todos los problemas. Siempre estamos abiertos a contribuciones, así que envíenos una solicitud de extracción si desea ayudar. Los problemas inactivos se cerrarán después de 30 días. ¡Gracias!

^ Que yo sepa, esto sigue siendo un gran problema y no debe marcarse como inactivo

@jdhayford AFAIK, esto se solucionó en 5.1, que está programado para su lanzamiento en unos días

@shilman ¡ Eso es genial! Gracias y gracias a los colaboradores 👍

Este problema todavía está sucediendo, pero pude solucionarlo usando la solución @brycehill

Eliminar el alias no funcionó para mí. Sin embargo, pude solucionar esto moviendo nuestro archivo babel a .storybook

Sigo enfrentando el mismo problema. @ByDesignGit ¿Puede explicar cómo pudo solucionarlo?

Se pudo solucionar instalando manualmente el último npm i core-js -D.
No es bueno instalar manualmente una dependencia. debe gestionar adecuadamente estos problemas internamente.

Esperando la solución adecuada.

También encontré el mismo problema. Sin embargo, creo que ahora es lo opuesto al problema original donde un paquete anterior instaló una versión anterior de core-js (2.6.9) como dependencia y ahora el libro de cuentos requiere core-js @ 3.
Interino arreglado usando la solución @ChandanPHAI y también esperando una solución adecuada.

Sigo enfrentando el mismo problema. @ByDesignGit ¿Puede explicar cómo pudo solucionarlo?

Lo resolví moviendo mi .babelrc a mi .storybook

Este problema todavía está sucediendo, pero pude solucionarlo usando la solución @brycehill

Eliminar el alias no funcionó para mí. Sin embargo, pude solucionar esto moviendo nuestro archivo babel a .storybook

Lo mismo 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

Eliminar el alias no funcionó para mí. Pero instalé npm i core-js -D como sugirió @ChandanPHAI , y funcionó 👌

Esperando la solución adecuada también.

Sigo enfrentando el mismo problema. @ByDesignGit ¿Puede explicar cómo pudo solucionarlo?

Lo resolví moviendo mi .babelrc a mi .storybook

Este problema todavía está sucediendo, pero pude solucionarlo usando la solución @brycehill

Eliminar el alias no funcionó para mí. Sin embargo, pude solucionar esto moviendo nuestro archivo babel a .storybook

¡Funcionó! Copié .babelrc en .storybook

@ arvenz0210 @ByDesignGit ¿no significa eso que ahora tienes que mantener dos archivos .babelrc ? Parece indeseable.

Actualizar mi proyecto vue.js a "@storybook/vue": "^5.1.1" resolvió el problema del alias core-js para mí. 👍

• no necesitaba mover mi babel.config.js
• no necesitaba agregar / eliminar nada de la configuración de mi paquete web (estoy usando https://github.com/storybookjs/vue-cli-plugin-storybook v0.6.1, por lo que mi configuración de paquete web se genera en parte por vue-cli con un poco de cosas no relacionadas que agregué a través de vue.config.js que vue-cli se fusiona con la configuración del paquete web generado dinámicamente).
• no es necesario agregar / eliminar ninguna referencia a core-js, alias o deps que dependen de core-js, etc.

También veo esto en un proyecto Angular, por lo tanto, no hay archivo .babel. No hubo suerte ni con la instalación separada de core-js ni con la eliminación del 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 las revisiones en 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",

Disculpas, no he tenido tiempo de depurar más.

Usando @storybook/react": "^5.1.1" y aún obteniendo este problema con un npm install . Sospecho que @ChandanPHAI es correcto, tengo otras dependencias que han instalado v2 del paquete core-js .

Este PR se hizo hoy debería solucionar esto, @shilman hará una nueva versión probando esto pronto: # 7051

Sigue sucediendo con "@storybook/react": "^5.1.3" - La instalación de core-js --dev solucionó el problema por mi parte.

alguien que enfrenta un problema https://github.com/storybookjs/storybook/issues/7021 ??

Yippee !! Acabo de publicar https://github.com/storybookjs/storybook/releases/tag/v5.1.4 que contiene PR # 7016 que hace referencia a este problema. ¡Actualice hoy para probarlo!

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

@shilman acaba de actualizar, y los mismos errores ... :(

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

@shilman Actualicé el libro de cuentos y los complementos a la última versión.

Sigo recibiendo los errores relacionados con core-js.

la instalación de npm i core-js -D soluciona el problema localmente.

sin la biblioteca core-js, no funciona.

¿Está importando babel-polyfill en algún lugar de su código? Si es así, intente eliminar eso.

Así es como arreglé la rama de reproducción que obtuve:
https://github.com/umakantp/demo-repro/pull/1

Por favor, envíeme más repositorios de reproducción a través de cualquier canal para que pueda solucionar el problema.

@ChandanPHAI @DonikaV

@ndelangen hola, no tengo babel-polyfill en mi carpeta. No puedo mostrarte más. Es un repositorio privado.
Se actualizó el libro de cuentos y todos los complementos.

Hola, tengo el mismo problema con core-js incluso en 5.1.4. La instalación manual de core-js como dependencia de desarrollo tampoco funcionó.

¡Estoy trabajando en este nuevo lanzamiento en 24 horas!

¡¡Yee-haw !! Acabo de publicar https://github.com/storybookjs/storybook/releases/tag/v5.1.5 que contiene PR # 7086 que hace referencia a este problema. ¡Actualice hoy para probarlo!

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

Sigo recibiendo errores para casi todos los componentes que tengo, como el siguiente:

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

No lo estoy excluyendo puede ser mi culpa. Cogí el caché de hilo, eliminé yarn.lock, instalé la última versión de cada dependencia. No tengo core-js instalado como dependencia, pero uso babel con algunos ajustes preestablecidos como @babel/preset-env . Tengo una configuración de paquete web personalizada:

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 Tengo exactamente el mismo error. Puedo confirmar que el archivo está presente en la ruta de los módulos core-js y también babel preset tiene core-js 3 habilitado, pero aún falla. ¿Pudiste solucionar esto?

Editar:

Si elimino addon-storysource, funciona como se esperaba. Sin embargo, no estoy seguro de qué está causando esto.

Edición 2:
Cavado más profundo. Por alguna razón, el cargador de storysource necesita que todos los archivos .js estén en él para que aparezcan en el panel de complementos, y tuvo que excluir los módulos de nodo en la configuración

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

Posiblemente relacionado con # 3626 # 6984

cc @ igor-dv @libetl ☝️

@ aga5tya Sí, has encontrado el problema. ¡He excluido node_modules y todo funciona bien!

Tuve que:

• [x] actualizar todas las dependencias de @ storybook / *
• [x] agregar "corejs": 3 a mi .babelrc
• [x] ejecutar yarn add corejs@3
• [x] agregar exclude: /node_modules/, a mi paquete web.config.js
• [x] eliminar import 'babel-polyfill' de mi app.js

babel polyfill está en desuso y debe ser reemplazado por core-js en todas partes

o airbnb-browser-shims :-p

de cualquier manera, node_modules siempre debe excluirse de la transpilación.

Tengo el siguiente error:

ERROR en ./.storybook/config.js
Módulo no encontrado: Error: No se puede encontrar el módulo 'core-js / modules / web.dom.iterable'

Estoy usando storybook / vue 5.1.9.

@flowck , instale core-js v3 en la raíz de su proyecto

¿Podemos encontrar una manera de usar el libro de cuentos sin ningún core-js en uso? ¿Por qué los consumidores no pueden proporcionar sus propias calzas?

babel-polyfills es un dep de una biblioteca que tengo que usar. ¿Cómo puedo ejecutar el libro de cuentos en este caso?

Ejecuté yarn upgrade interactive --latest , actualicé todas las dependencias relacionadas con el libro de cuentos y ahora está funcionando. 🎉

FYI: Este error solo ocurrió después de que agregué el complemento @storybook/addon-knobs .

@ chadlavi-casebook uhm, ¿podría intentar agregar un complemento webpack ignore, supongo?
https://webpack.js.org/plugins/ignore-plugin/

Tuve el mismo problema al ejecutar @ storybook / vue 5.1.9. Ejecutar yarn why core-js resultó esto:

=> 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

✅ Agregar core-js@^2.6.9 a devDependencies lo resolvió por mí.

Asegúrate de eliminar tus node_modules al principio.
rm -rf node_modules

Tengo este problema después de actualizar a v5.1.9 desde v5.0.6 .

Mismo problema. Se corrigió después de rebajar de v5.1.9 a v5.0.6

@JamyGolden & @Exomnius, ¿ podrías compartir más sobre tu configuración?

la salida de yarn why core-js es útil, un repositorio de reproducción lo es aún más.

@ndelangen He actualizado a 5.1.9 sin problemas ahora, supongo que se ha instalado una nueva dependencia de parche y ha resuelto el problema 🤷‍♀️

Editar, tuve que degradar nuevamente, fallando las pruebas de CI. Hice un yarn why core-js en eso:

$ 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.

¿Lo hizo funcionar localmente, pero el CI todavía tenía el mismo error?

@ndelangen sí, el CI y otro desarrollador están teniendo problemas (actualizaré con su versión de hilo / nodo cuando lo tenga), sin embargo, las cosas están bien de mi lado (hilo 1.15.2 , nodo 8.15.1 ), también estamos usando un archivo de bloqueo. Lo anterior fue el yarn why core-js fallido y este es el mío:

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.

Un ejemplo del mismo error que existe en cada afirmación:

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

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

¡Ajá, el libro de cuentos se está ejecutando bien, pero una prueba todavía usa una versión antigua de core-js!

¿Qué hay dentro de localMocksFile.js ? Probablemente, todo lo que necesita hacer es actualizar ese archivo.

@ndelangen, el error que pegué anteriormente estaba relacionado con la ejecución de storyshots (que solo ocurre después de actualizar la versión del libro de cuentos). Los errores que obtiene el otro desarrollador al ejecutar yarn storybook contienen muchos errores similares, aparentemente un error en cada archivo:

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

No estoy seguro si esta información es útil, pero @babel/polyfill no está incluido en el package.json principal del proyecto.

Tengo el siguiente error:

ERROR en ./.storybook/config.js
Módulo no encontrado: Error: No se puede encontrar el módulo 'core-js / modules / web.dom.iterable'

Estoy usando storybook / vue 5.1.9.

Resuelto instalando 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 es una solución alternativa en lugar de una solución, pero la reversión de TODOS mis paquetes de Storybook (incluidos los complementos) a la versión 5.0.6 lo ha solucionado. Nada más en este hilo ayudó.

(Comandos para React + Yarn a continuación, pero fácilmente traducibles a NPM / Vue):

Por primera vez:

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]

Estoy viendo el problema de samme cuando intento ejecutar el libro de cuentos:
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

Esto sucedió después de actualizar al nodo v12 usando nvm.

Tuvimos que hacer esto para solucionar un problema de polyfill, por lo que no puedo degradar el nodo. Antes de eso todo estaba funcionando. Desafortunadamente, no sé en qué versión de nodo estaba antes de eso. He intentado todo en este hilo, pero no quiero volver a 5.0.6., Ya que una gran razón para configurar el libro de cuentos para este proyecto es usar los nuevos documentos. Empujé todo aquí: https://github.com/netliferesearch/netlife2019/tree/storybook_setup_stories

Editar: degradé el nodo y todavía no funciona, debería haberlo intentado antes de publicarlo. Estoy un poco perdido de lo que está pasando, seguiré buscando.

Usando @storybook/vue 5.2.5 además de Nuxt.js v2.10.1 y tuve el mismo problema: yarn storybook funciona, pero yarn build o cualquier otra tarea relacionada con nuxt falló. yarn why core-js proporciona la siguiente salida:

$ 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.

Entonces utilizo el mismo enfoque proporcionado por @frebro , intente

$ yarn add -D [email protected]

y 🎉: obtengo un entorno de trabajo: yarn storybook , yarn build y todas las demás tareas están funcionando nuevamente.

@rwam yarn add -D [email protected] funciona para mí en mi libro de cuentos 5.2.5 proyecto HTML thx dude :)

Vue con @ vue / cli migrando

sobre el error:

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

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

si '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

mis departamentos de trabajo:

"@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
si Invalid Option: corejs is not a valid top-level option : -rm -rf node_modules .

Salud para usted y sus seres queridos;)

Encontré una solución más sólida para que Storybook funcione en un proyecto de Nuxt. La solución depende de una falta de coincidencia de versiones de core-js. Nuxt utiliza por defecto la versión 2 y Storybook versión 3. Entonces, para resolver el problema, tengo que seguir esta nota de @ nuxt / babel-preset-app :

Nota: Dado que core-js @ 2 y core-js @ 3 son compatibles con Babel 7.4.0, recomendamos agregar directamente core-js y configurar la versión a través de la opción corejs.

Vuelvo a tener un entorno de trabajo con Nuxt 2.11.0 usando esta actualización en mi 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 }
            }
          ]
        ]
      }
    }
  }
}

Encontré esta solución porque no pude actualizar nuxt a la última

Enfrenté el mismo problema al intentar agregar el libro de cuentos (5.3.18) a gatsby v2 cuando, por lo menos, un componente estaba usando consultas estáticas. Mover .babelrc a .storybook funcionó como lo sugirió @brycehill .

Encontré una solución más sólida para que Storybook funcione en un proyecto de Nuxt. La solución depende de una falta de coincidencia de versiones de core-js. Nuxt utiliza por defecto la versión 2 y Storybook versión 3. Entonces, para resolver el problema, tengo que seguir esta nota de @ nuxt / babel-preset-app :

Nota: Dado que core-js @ 2 y core-js @ 3 son compatibles con Babel 7.4.0, recomendamos agregar directamente core-js y configurar la versión a través de la opción corejs.

Vuelvo a tener un entorno de trabajo con Nuxt 2.11.0 usando esta actualización en mi 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 }
            }
          ]
        ]
      }
    }
  }
}

Encontré esta solución porque no pude actualizar nuxt a la última

Impresionante, ¡funcionó para mí!

@masives Me he encontrado con el mismo problema con gatsby. ¿Podría publicar un enlace al comentario / .babelrc ya que parece que no puedo encontrarlos en este número?

Nvm. Los problemas se debieron a que las historias estaban en el directorio de páginas. Resolvió el problema moviendo las historias de las páginas a __stories__

Next.js 9.1.1 -> Next.js 9.4.4 me hizo tropezar.

La comparación de los resultados de npm list core-js reveló que faltaba un tiempo de ejecución de babel de core js después de actualizar Next. Reinstalé este paquete faltante en las dependencias de desarrollo y LO y he aquí que funcionó

cc @ndelangen

El mismo problema con la versión 5.3.19 al lidiar con la migración de core-js v2 a v3

El mismo problema para mí. Como @denimamab , estoy usando la versión 5.3.19

Se corrigió localmente con:
rm ./package-lock.json
rm -rf ./node_modules
npm install

Ahora funciona npm run storybook

Solo quería compartir mi experiencia con este error después de pasar un día en él ...

Leí numerosos hilos de problemas de GH, incluido este, al solucionar el problema. Probé algunas de las correcciones sugeridas, y solo una resultó en un éxito "aceptable".

Referencia

Poniendo todo esto en un solo lugar desde, 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

Estado del proyecto y requisitos previos

• Tengo un cambio separado pendiente para actualizar todos los paquetes webpack / babel de [mi equipo] (babel es v7.xx en mi cambio y en el cambio separado), pero aún no ha salido de la prueba debido a nuestra prueba ie11 infraestructura. el cambio introduce corejs versión 3 como una dependencia y useBuiltIns: 'usage' , donde anteriormente estábamos usando una importación manual de @babel/polyfill y el valor predeterminado para useBuiltIns . Anticipo que este cambio se fusionará pronto. esta es la razón principal por la que no puedo / no incluiré corejs como una dependencia en mi cambio actual, como muchos otros han sugerido (y verificado) como solución.
• Tengo _otro_ cambio sobresaliente, basado en la rama que actualiza los paquetes webpack / babel, que actualiza nuestra versión de libro de cuentos de v5.3.19 a la más nueva v6.xx No he intentado reproducir este error en esa rama, ya que supongo que todo estará bien ) mi razón por la cual se describe a continuación.
• el proyecto actual tiene una raíz .babelrc (visto arriba) para la aplicación principal. esta configuración usa @babel/preset-env y usa una raíz .browserslistrc (vista arriba) para determinar el uso de polyfill. no hay .storybook/.babelrc presente en la rama principal de nuestra aplicación.
• utilizamos el libro de cuentos solo para la documentación interna del desarrollador. dado que la organización utiliza principalmente Chrome como nuestro navegador predeterminado, los polyfills son innecesarios. esta revelación contribuyó realmente a la solución final.
• _am_ estoy usando una configuración de paquete web de libro de cuentos personalizado, pero solo para agregar reglas adicionales sobre fuentes / imágenes. Abandoné el intento de modificar las reglas básicas en torno al procesamiento de .js por las razones descritas en este número de libro de cuentos .
• SÓLO ESTOY EXPERIMENTANDO ESTE PROBLEMA AL GENERAR EL SITIO ESTÁTICO DEL LIBRO DE HISTORIAS. la ejecución a través del dev-server incluido para el desarrollo local no presenta problemas.

Intentos de corrección temprana

La mayoría de mis primeros intentos de solucionar el problema giraron en torno a intentar establecer opciones en la raíz .babelrc (visto arriba) para intentar comunicarme con babel (como lo ejecuta la herramienta build-storybook ) cómo quiero la transpilación que se produzca. Ninguna configuración de useBuiltIns , sourceType , etc. como sugirieron otros fue exitosa. Además, probé toda la ruta clean-npm-cache-remove-node-modules-and-package-lock-then-npm-install, sin éxito (aunque eso _did_ hizo que algunos departamentos cambiaran un poco).

Solución final

Si bien inicialmente dudaba en intentar usar un .storybook/.babelrc , me estaba quedando sin opciones. Anteriormente intenté crear ese archivo y hacerlo funcionar armoniosamente con la raíz .babelrc través de la propiedad extends y chocar contra una pared, pero decidí intentarlo de nuevo.

Un simple movimiento de la configuración de root babel a la configuración específica del libro de cuentos permitió que la compilación del sitio estático se completara con éxito, pero aún había algunos errores de tiempo de ejecución indicativos de una transpilación defectuosa (la reexportación de algunas importaciones dio como resultado que esos valores fueran undefined en el archivo en el que residen las importaciones finales). Fue en ese momento que me di cuenta de que no necesitaba ningún polyfills para el libro de cuentos, así que eliminé el @babel/preset-env predeterminado .storybook/.babelrc completo. ¡HUZZAH, problema resuelto! Sin embargo, la configuración original necesitaba persistir para la aplicación, así que cambié el nombre a .storybook/.babelrc-ci y restauré la configuración raíz original. Luego, tuve que actualizar nuestra canalización de CI para verificar la configuración de ci y cambiar el nombre para cortar el sufijo -ci antes de la construcción del sitio estático, pero eso fue trivial.

Adivinar el problema (s)

Este proceso me hizo inspeccionar mis paquetes y el archivo de bloqueo con frecuencia, y descubrí que, mientras que Storybook v5.3.19 y todos sus complementos tienen una dependencia de corejs v3.xx, el @babel/polyfill y un puñado de otros babel deps confió en corejs v2.xx! Supongo que al menos un problema es la resolución en la aplicación para usar el mínimo común denominador de v2. Esto tenía sentido ya que los errores que estaba experimentando eran módulos de referencia como es.array.iterator mientras que v2 proporciona módulos como es6.array.iterator . No estoy seguro de cómo la depuración del libro de cuentos entra en conflicto si su objetivo es admitir configuraciones de babel / corejs más antiguas, pero parece ser el caso. Además, debe haber algo sobre cómo / todos storybook-babel / babel instalado / storybook-corejs / installed-corejs encuentran y aplican un .babelrc . No sé por qué mover la configuración raíz a una configuración específica del libro de cuentos resuelve mágicamente el problema. ¿Camino tal vez? 🤷‍♂️

Conclusión

Si te has quedado después de todo este parloteo, ¡felicidades! 😂

Con todo, no estoy muy contento con los obstáculos que tuve que atravesar para solucionar este problema, pero quizás mi situación sea algo única. Además, podré extraerlo todo después de que se fusionen las actualizaciones de babel / webpack / storybook mencionadas anteriormente.

De todos modos, espero que esto haya sido interesante para al menos una persona que sufre el mismo problema. Y seguiré adelante y etiquetaré a @shilman y @ndelangen, ya que parecen