Storybook: Storybook v5 bricht bei Verwendung von core-js ^ 3.0 ab

Storybook verwendet Core-Js irgendwie falsch. @babel/preset-env Version 7.4.1 wurde auf core-js@3 aktualisiert und hat meine Storybook-Reaktions-App beim Ausführen von Tests beschädigt

client-api sollte anscheinend core-js @ 2 als Abhängigkeit haben, da der generierte Core dies erfordert

Obwohl es heißt, dass es mit 5.0.4 und 5.0.5 behoben ist, erhalte ich immer noch diesen Fehler.

So reproduzieren Sie:
Installieren Sie @storybook/cli und das Init-Paket. Dann initiiere das Storybook mit 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 Das ist kein Fehler, es ist eine Warnung. Es ist in 5.1.0-alpha.16 behoben und ich werde das Update auf latest nachdem es einige Tage nicht verfügbar war, wenn sich niemand beschwert.

Ich habs! Vielen Dank!

Ich aktualisiere die Storybook-Version auf 5.0.6 und es hat dieses Problem gelöst.

@ jessy1092 Schön es zu hören. Ich schließe das jetzt. Wenn jemand erneut auf dieses Problem stößt, öffne ich es erneut.

Hallo,
Es scheint für mich nicht zu funktionieren, selbst mit Storybook 5.1.0-alpha.18

Hier ein reproduzierbares Repo: https://github.com/christophehurpeau/cra-rest-hooks-storybook

yarn install
yarn storybook

ich hoffe das hilft

@christophehurpeau Gibt es eine Chance, dass du 5.0.6 für mich ausprobieren kannst? Öffnen Sie dies erneut. 😭

Bei der Verwendung von core-js @ v3 in meinem Hauptprojekt bin ich immer noch auf dasselbe Problem core-js/modules in die mit Storybook gebündelte Version aufgelöst wird

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

Hacky Lösung sollte aber vorerst gut genug sein.

@shilman versuchte auch 5.0.6, das gleiche Ergebnis (https://github.com/christophehurpeau/cra-rest-hooks-storybook/tree/storybook-5.0.6)

@artursvonda Ich verwende nicht core-js v3, eine Abhängigkeit verwendet es. Ich habe kein node_modules/@storybook/core/node_modules/core-js da v2 sowohl von React-Skripten als auch von @ storybook / core verwendet wird und in node_modules dedupiert ist. Nur die Abhängigkeit mit core-js 3 findet core-js nicht

ah so funktioniert es wenn ich den alias lösche:

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

Beeindruckend. Aliase sind beängstigend. Warum benutzt Storybook sie?

cc @ndelangen

Ich habe auch dieses Problem. Ich verwende die neueste Firebase, die kürzlich eine Abhängigkeit zu core-js @ 3 hinzugefügt hat.
Nach dem Upgrade von firebase führt das zum Ausführen verwendete Storybook die folgenden Fehler aus:

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

kann bestätigen,

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

in einem neuen cra2 und sb init stürzt ab

Gleiches Problem für mich. Zurück zu firebase Version 4.12.1 funktioniert, aber es ist über ein Jahr alt und keine gute Lösung.

ah so funktioniert es wenn ich den alias lösche:

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

Auch die Verwendung von [email protected] mit [email protected] und das Hinzufügen zu .storybook/webpack.config.js löste das Problem.

Ich habe gerade gesehen, dass Firebase ein Update auf 5.10.0 und das Storybook auf 5.0.10 aktualisiert hat, und ich konnte den Alias ​​"Hack" oben entfernen.

Leider hat die Aktualisierung von Firebase und Storybook auf den neuesten Stand mein Problem nicht behoben.
Ich muss aufhören, Storybook für diese Ausgabe zu verwenden.

@zjaml Haben Sie oben die Problemumgehungen von @parkerholladay ausprobiert?

@shilman darüber, ich weiß nicht, in welcher Datei ich es tun soll.

@zjaml Das ist .storybook/webpack.config.js . Bitte lassen Sie mich wissen, ob es für Sie funktioniert!

@shilman es funktioniert so! Vielen Dank!

Ich verwende babel preset-env und hatte das gleiche Problem mit Storybook 5.0.10

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

Die Problemumgehung zum Löschen des Alias ​​hat das Problem für mich behoben. 🙏 @christophehurpeau

Sollten wir den Alias ​​aus der webpack.config der Vorschau löschen?

vielleicht sogar alle Aliase?

Gleiches Problem hier, der Alias ​​zum Entfernen behebt das Problem für mich nicht :(

Gleiches Problem für mich. Durch Entfernen des Alias ​​wird das Problem nicht behoben

Diese PR wird dieses und viele andere Probleme ansprechen, die ich denke:
https://github.com/storybooks/storybook/pull/6566

Es ist wahrscheinlich eine große bahnbrechende Änderung, daher könnte es in V6 ausgeliefert werden. Wir diskutieren dies immer noch.

Möglicherweise können wir einige Zeit in die Aufteilung dieser PR in mehrere PRs investieren, damit wir einige Dinge schneller zusammenführen und veröffentlichen können.

Hilfe wäre sehr dankbar!

Das gleiche Problem hier - unser Problem bricht mit react-app-polyfill das jedoch aktualisiert wurde, um core-js Version 3 zu verwenden. Zurücksetzen auf Version 0.2.2.

Die Bestätigung dieses Fixes funktionierte auch für mich, [email protected] und [email protected]

fügte die Datei ./storybook/webpack.config.js mit den oben genannten hinzu

~ sorry - @ storybook /

EDIT: Sorry - habe die Antwort in einer anderen Ausgabe gefunden. https://github.com/storybooks/storybook/issues/5893

Problemumgehung
Verwenden Sie die nächste Version von CLI / React native, um 5.1.0-alpha.x zu erhalten:

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

Das Löschen des Alias ​​hat bei mir nicht funktioniert. Ich konnte dies jedoch umgehen, indem ich unsere Babel-Datei in .storybook verschob

Hallo allerseits! In dieser Ausgabe scheint in letzter Zeit nicht viel los zu sein. Wenn noch Fragen, Kommentare oder Fehler vorliegen, können Sie die Diskussion fortsetzen. Leider haben wir nicht die Zeit, um zu jeder Ausgabe zu gelangen. Wir sind immer offen für Beiträge. Bitte senden Sie uns eine Pull-Anfrage, wenn Sie helfen möchten. Inaktive Ausgaben werden nach 30 Tagen geschlossen. Vielen Dank!

^ Meines Wissens ist dies immer noch ein großes Problem und sollte nicht als inaktiv markiert werden

@jdhayford AFAIK Dies ist in 5.1 behoben, das in wenigen Tagen veröffentlicht werden soll

@shilman Das ist großartig! Danke und danke an die Mitwirkenden 👍

Dieses Problem tritt immer noch auf, konnte es jedoch mithilfe der @ brycehill- Lösung beheben

Das Löschen des Alias ​​hat bei mir nicht funktioniert. Ich konnte dies jedoch umgehen, indem ich unsere Babel-Datei in .storybook verschob

Ich stehe immer noch vor dem gleichen Problem. @ByDesignGit Können Sie bitte erklären, wie Sie das

Konnte durch manuelle Installation der neuesten npm i core-js -D beheben.
Es ist nicht gut, eine Abhängigkeit manuell zu installieren. Es sollte solche Probleme intern ordnungsgemäß verwalten.

Warten auf die richtige Lösung.

Ich bin auch auf das gleiche Problem gestoßen. Ich glaube jedoch, dass es jetzt das Gegenteil des ursprünglichen Problems ist, bei dem ein vorheriges Paket eine ältere Version von core-js (2.6.9) als Abhängigkeit installiert hat und das Storybook nun core-js @ 3 benötigt.
Zwischenbehebung mit @ HandanPHAI- Lösung und Warten auf eine ordnungsgemäße Behebung.

Ich stehe immer noch vor dem gleichen Problem. @ByDesignGit Können Sie bitte erklären, wie Sie das

Ich habe es gelöst, indem ich meine .babelrc in meine .storybook

Dieses Problem tritt immer noch auf, konnte es jedoch mithilfe der @ brycehill- Lösung beheben

Das Löschen des Alias ​​hat bei mir nicht funktioniert. Ich konnte dies jedoch umgehen, indem ich unsere Babel-Datei in .storybook verschob

Das selbe hier:

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

Das Löschen des Alias ​​hat bei mir nicht funktioniert. Aber ich habe npm i core-js -D installiert , wie

Warten Sie auch auf die richtige Lösung.

Ich stehe immer noch vor dem gleichen Problem. @ByDesignGit Können Sie bitte erklären, wie Sie das

Ich habe es gelöst, indem ich meine .babelrc in meine .storybook

Dieses Problem tritt immer noch auf, konnte es jedoch mithilfe der @ brycehill- Lösung beheben

Das Löschen des Alias ​​hat bei mir nicht funktioniert. Ich konnte dies jedoch umgehen, indem ich unsere Babel-Datei in .storybook verschob

Es funktionierte! Ich habe .babelrc in .storybook kopiert

@ arvenz0210 @ByDesignGit heißt das nicht, dass Sie jetzt zwei .babelrc -Dateien verwalten müssen? Scheint unerwünscht.

Ein Upgrade meines vue.js-Projekts auf "@storybook/vue": "^5.1.1" das Alias-Problem von core-js für mich gelöst. 👍

• Ich musste meine babel.config.js
• Ich musste nichts zu meiner Webpack-Konfiguration hinzufügen / daraus entfernen (ich verwende https://github.com/storybookjs/vue-cli-plugin-storybook v0.6.1, sodass meine Webpack-Konfiguration teilweise von vue-cli mit generiert wird Ein bisschen nicht verwandtes Zeug, das ich über vue.config.js hinzugefügt habe und das vue-cli mit der dynamisch generierten Webpack-Konfiguration verschmilzt.
• Es mussten keine Verweise auf Core-Js, Aliase oder Deps hinzugefügt / entfernt werden, die von Core-Js usw. abhängen.

Ich sehe dies auch in einem Angular-Projekt, daher keine .babel-Datei. Kein Glück mit der separaten Installation von core-js oder dem Löschen des 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'
}

Alle Überarbeitungen unter 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",

Entschuldigung, ich hatte keine Zeit mehr weiter zu debuggen.

Verwenden Sie @storybook/react": "^5.1.1" und erhalten Sie dieses Problem immer noch mit einem neuen npm install . Ich vermute, dass @ChandanPHAI korrekt ist. Ich habe andere Abhängigkeiten, die v2 des Pakets core-js installiert haben.

Diese PR wurde heute durchgeführt, sollte dies behoben werden. Kürze eine neue Version testen: # 7051

Immer noch passiert mit "@storybook/react": "^5.1.3" - Die Installation von core-js --dev das Problem an meinem Ende behoben.

jemand mit Problem https://github.com/storybookjs/storybook/issues/7021 ??

Hurra!! Ich habe gerade https://github.com/storybookjs/storybook/releases/tag/v5.1.4 mit PR # 7016 veröffentlicht, das auf dieses Problem verweist. Aktualisieren Sie noch heute, um es auszuprobieren!

Dieses Problem schließen. Bitte öffnen Sie erneut, wenn Sie der Meinung sind, dass noch mehr zu tun ist.

@shilman gerade aktualisiert und die gleichen Fehler ... :(

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

@shilman Ich habe das Storybook und die Addons auf die neueste Version aktualisiert.

Immer noch die Fehler im Zusammenhang mit Core-Js.

Die Installation von npm i core-js -D behebt das Problem lokal.

ohne core-js bibliothek funktioniert es nicht.

Importieren Sie babel-polyfill irgendwo in Ihren Code? Wenn ja, versuchen Sie das zu entfernen?

So habe ich den Repro-Zweig repariert, den ich bekommen habe:
https://github.com/umakantp/demo-repro/pull/1

Bitte senden Sie mir über einen beliebigen Kanal weitere Repro-Repos, damit ich das Problem beheben kann.

@ChandanPHAI @DonikaV

@ndelangen Hallo, ich habe nicht babel-polyfill in meinem Ordner. Mehr kann ich dir nicht zeigen. Es ist ein privates Repo.
Storybook und alle Addons wurden aktualisiert.

Hallo, ich habe das gleiche Problem mit Core-Js auch unter 5.1.4. Die manuelle Installation von Core-Js als Dev-Abhängigkeit funktionierte ebenfalls nicht.

Ich arbeite an dieser neuen Version innerhalb von 24 Stunden!

Yee-haw !! Ich habe gerade https://github.com/storybookjs/storybook/releases/tag/v5.1.5 mit PR # 7086 veröffentlicht, das auf dieses Problem verweist. Aktualisieren Sie noch heute, um es auszuprobieren!

Dieses Problem schließen. Bitte öffnen Sie erneut, wenn Sie der Meinung sind, dass noch mehr zu tun ist.

Ich erhalte immer noch Fehler für fast jede Komponente, die ich habe, wie die folgende:

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

Ich schließe nicht aus, dass es meine Schuld sein kann. Ich habe den Garncache geklärt, yarn.lock gelöscht und die neueste Version jeder Abhängigkeit installiert. Ich habe Core-Js nicht als Abhängigkeit installiert, aber ich verwende Babel mit einigen Voreinstellungen wie @babel/preset-env . Ich habe eine benutzerdefinierte Webpack-Konfiguration:

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 Ich habe genau den gleichen Fehler. Ich kann bestätigen, dass die Datei im Pfad des Core-JS-Moduls vorhanden ist, und in der Babel-Voreinstellung ist Core-JS 3 aktiviert, schlägt jedoch immer noch fehl. Konnten Sie das klären?

Bearbeiten:

Wenn ich Addon-Storysource entferne, funktioniert es wie erwartet. Ich bin mir nicht sicher, was das verursacht.

Bearbeiten 2:
Tiefer gegraben. Aus irgendeinem Grund benötigt der Storysource Loader alle .js-Dateien, um im Addon-Bereich angezeigt zu werden, und musste Knotenmodule in der Konfiguration ausschließen

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

Möglicherweise verwandt mit # 3626 # 6984

cc @ igor-dv @libetl ☝️

@ aga5tya Ja, du hast das Problem getroffen. Ich habe node_modules ausgeschlossen und alles funktioniert gut!

Ich musste:

• [x] Aktualisiere alle @ storybook / * Abhängigkeiten
• [x] füge "corejs": 3 zu meiner .babelrc hinzu
• [x] Führen Sie yarn add corejs@3
• [x] füge exclude: /node_modules/, zu meiner webpack.config.js hinzu
• [x] entferne import 'babel-polyfill' aus meiner app.js.

babel polyfill ist veraltet und muss überall durch core-js ersetzt werden

oder Airbnb-Browser-Shims :-p

In jedem Fall sollten node_modules immer von der Transpilation ausgeschlossen werden.

Ich habe folgenden Fehler:

FEHLER in ./.storybook/config.js
Modul nicht gefunden: Fehler: Modul 'core-js / modules / web.dom.iterable' kann nicht gefunden werden

Ich benutze Storybook / Vue 5.1.9.

@flowck Bitte installieren Sie core-js v3 in Ihrem Projektstamm

Können wir einen Weg finden, das Storybook zu verwenden, ohne dass Core-Js verwendet werden? Warum können Verbraucher keine eigenen Unterlegscheiben anbieten?

babel-polyfills ist eine Dep einer Bibliothek, die ich benutzen muss. Wie kann ich in diesem Fall das Storybook zum Laufen bringen?

Ich habe yarn upgrade interactive --latest , alle Storybook-bezogenen Abhängigkeiten aktualisiert und jetzt funktioniert es! 🎉

Zu Ihrer Information: Dieser Fehler ist erst aufgetreten, nachdem ich das Addon @storybook/addon-knobs hinzugefügt habe.

@ chadlavi-casebook ähm, könnten Sie versuchen, ein Webpack-Ignorier-Plugin hinzuzufügen, denke ich?
https://webpack.js.org/plugins/ignore-plugin/

Hatte das gleiche Problem mit @ storybook / vue 5.1.9. Das Ausführen von yarn why core-js stellte sich wie folgt heraus:

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

✅ Das Hinzufügen von core-js@^2.6.9 zu devDependencies hat das Problem für mich gelöst.

Stellen Sie sicher, dass Sie zuerst Ihre node_modules löschen.
rm -rf node_modules

Ich habe dieses Problem nach dem Upgrade von v5.1.9 auf v5.0.6 .

Gleicher Fehler. Behoben nach dem Downgrade von v5.1.9 auf v5.0.6

@JamyGolden & @Exomnius Könnten Sie bitte mehr über Ihr Setup

Die Ausgabe von yarn why core-js ist hilfreich, ein Reproduktions-Repo umso mehr.

@ndelangen Ich habe jetzt ohne Probleme ein Upgrade auf 5.1.9 . Ich denke, eine neue Patch-Abhängigkeit wurde installiert und hat das Problem 🤷‍♀️ behoben

Bearbeiten, musste erneut downgraden, fehlgeschlagene CI-Tests. Ich habe ein yarn why core-js :

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

Sie haben es lokal zum Laufen gebracht, aber das CI hatte immer noch den gleichen Fehler?

@ndelangen Ja, das CI und ein anderer 1.15.2 , Knoten 8.15.1 ), wir verwenden auch eine Sperrdatei. Das obige war das fehlerhafte yarn why core-js und das ist meins:

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.

Ein Beispiel für denselben Fehler, der bei jeder Behauptung auftritt:

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

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

aha, das Storybook läuft also in Ordnung, aber ein Test verwendet immer noch eine alte Core-JS-Version!

Was ist in localMocksFile.js ? Wahrscheinlich müssen Sie nur diese 1 Datei aktualisieren.

@ndelangen Der Fehler, den ich zuvor eingefügt habe, bezog sich auf laufende Storyshots (der nur nach dem Aktualisieren der Version des Storybooks auftritt). Die Fehler, die der andere Entwickler beim Ausführen von yarn storybook erhält, enthalten viele ähnliche Fehler, die anscheinend in jeder Datei fehlerhaft sind:

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

Ich bin mir nicht sicher, ob dies hilfreiche Informationen sind, aber @babel/polyfill ist nicht in der primären package.json im Projekt enthalten.

Ich habe folgenden Fehler:

FEHLER in ./.storybook/config.js
Modul nicht gefunden: Fehler: Modul 'core-js / modules / web.dom.iterable' kann nicht gefunden werden

Ich benutze Storybook / Vue 5.1.9.

Behebung durch Installation von 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"
  }

Dies ist eher eine Problemumgehung als eine Korrektur, aber das Zurücksetzen ALLER meiner Storybook-Pakete (einschließlich Addons) auf Version 5.0.6 hat dies behoben. Nichts anderes in diesem Thread hat geholfen.

(Befehle für React + Yarn unten, aber leicht in NPM / Vue übersetzbar):

Zuerst:

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

Gefolgt von:

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

Ich sehe das Samme-Problem, wenn ich versuche, ein Storybook zu erstellen:
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

Dies geschah nach dem Update auf Knoten v12 mit nvm.

Wir mussten dies tun, um ein Polyfill-Problem zu beheben, damit ich den Knoten nicht herabstufen kann. Vorher hat alles funktioniert. Leider weiß ich nicht, auf welcher Knotenversion ich vorher war. Ich habe alles in diesem Thread ausprobiert, möchte aber nicht auf 5.0.6 zurücksetzen, da ein wichtiger Grund für das Einrichten des Storybooks für dieses Projekt die Verwendung der neuen Dokumente ist. Ich habe hier alles gepusht: https://github.com/netliferesearch/netlife2019/tree/storybook_setup_stories

Bearbeiten: Ich habe den Knoten herabgestuft und es funktioniert immer noch nicht. Hätte das vor dem Posten versuchen sollen. Ich bin ein bisschen ratlos, was passiert, ich werde weiter suchen.

Die Verwendung von @storybook/vue 5.2.5 neben Nuxt.js v2.10.1 hatte das gleiche Problem: yarn storybook funktioniert, aber yarn build oder eine andere nuxtbezogene Aufgabe ist fehlgeschlagen. yarn why core-js liefert die folgende Ausgabe:

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

Also benutze ich den gleichen Ansatz wie @frebro , versuche es

$ yarn add -D [email protected]

und 🎉: Ich bekomme eine Arbeitsumgebung: yarn storybook , yarn build und alle anderen Aufgaben funktionieren wieder.

@rwam yarn add -D [email protected] funktioniert für mich in meinem Storybook 5.2.5 HTML-Projekt thx dude :)

Vue mit @ vue / cli Migration

über Fehler:

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

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

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

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

über 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

meine arbeit deps:

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

Gesundheit für Sie und Ihre Lieben;)

Ich habe eine robustere Lösung gefunden, um Storybook in einem Nuxt-Projekt zum Laufen zu bringen. Die Lösung hängt von einer Versionsinkongruenz von core-js ab. Nuxt verwendet standardmäßig Version 2 und Storybook Version 3. Um das Problem zu lösen, muss ich diesem Hinweis von @ nuxt / babel-preset-app folgen:

Hinweis: Da Core-js @ 2 und Core-js @ 3 beide von Babel 7.4.0 unterstützt werden, empfehlen wir, Core-js direkt hinzuzufügen und die Version über die Option corejs festzulegen.

Ich bekomme wieder eine Arbeitsumgebung mit Nuxt 2.11.0, wenn ich dieses Update auf meiner nuxt.config.js verwende :

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

Ich bin auf diese Lösung gestoßen , weil aktualisieren konnte .

Ich hatte das gleiche Problem, als ich versuchte, Storybook (5.3.18) zu gatsby v2 hinzuzufügen, wenn mindestens eine Komponente statische Abfragen verwendete. Das Verschieben von .babelrc in .storybook funktionierte wie von @brycehill vorgeschlagen .

Ich habe eine robustere Lösung gefunden, um Storybook in einem Nuxt-Projekt zum Laufen zu bringen. Die Lösung hängt von einer Versionsinkongruenz von core-js ab. Nuxt verwendet standardmäßig Version 2 und Storybook Version 3. Um das Problem zu lösen, muss ich diesem Hinweis von @ nuxt / babel-preset-app folgen:

Hinweis: Da Core-js @ 2 und Core-js @ 3 beide von Babel 7.4.0 unterstützt werden, empfehlen wir, Core-js direkt hinzuzufügen und die Version über die Option corejs festzulegen.

Ich bekomme wieder eine Arbeitsumgebung mit Nuxt 2.11.0, wenn ich dieses Update auf meiner nuxt.config.js verwende :

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

Ich bin auf diese Lösung gestoßen , weil aktualisieren konnte .

Super, hat für mich gearbeitet!

@masives Das gleiche Problem mit gatsby. Könnten Sie einen Link zum Kommentar / .babelrc posten, da ich sie in dieser Ausgabe anscheinend nicht finde?

Nvm. Probleme wurden durch Geschichten im Seitenverzeichnis verursacht. Das Problem wurde behoben, indem Seitengeschichten nach __stories__ verschoben wurden

Next.js 9.1.1 -> Next.js 9.4.4 hat mich gestolpert.

Der Vergleich der Ergebnisse von npm list core-js ergab, dass nach der Aktualisierung von Next eine Babel-Laufzeit von Core Js fehlte. Ich habe dieses fehlende Paket in den Dev-Abhängigkeiten neu installiert und LO und siehe, es hat funktioniert

cc @ndelangen

Gleiches Problem mit der Version 5.3.19 bei der Migration von core-js v2 auf v3

Gleiches Problem für mich. Wie @denimamab verwende ich die Version 5.3.19

Es wurde lokal behoben mit:
rm ./package-lock.json
rm -rf ./node_modules
npm installieren

Jetzt funktioniert npm run storybook

Ich wollte nur meine Erfahrungen mit diesem Fehler teilen, nachdem ich einen Tag damit verbracht habe ...

Bei der Fehlerbehebung habe ich zahlreiche GH-Themen-Threads gelesen, einschließlich dieses. Ich habe einige der vorgeschlagenen Korrekturen ausprobiert, wobei nur eine zu einem "akzeptablen" Erfolg führte.

Referenz

Das alles seitdem an einem Ort, cuz. 😅

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

Projektstatus und Voraussetzungen

• Ich habe eine herausragende, separate Änderung, um alle Webpack- / Babel-Pakete [meines Teams] zu aktualisieren (Babel ist v7.xx in meiner Änderung und in der separaten Änderung), aber aufgrund unseres ie11-Tests ist der Test noch nicht abgeschlossen Infrastruktur. Die Änderung führt CoreJs Version 3 als Abhängigkeit und useBuiltIns: 'usage' , wobei wir zuvor einen manuellen Import von @babel/polyfill und den Standardwert für useBuiltIns . Ich gehe davon aus, dass diese Änderung bald zusammengeführt wird. Dies ist der Hauptgrund, warum ich corejs nicht als Abhängigkeit in meine aktuelle Änderung aufnehmen kann / werde, wie viele andere als Fix vorgeschlagen (und verifiziert) haben.
• Ich habe eine weitere ausstehende Änderung, basierend auf dem Zweig, der Webpack / Babel-Pakete aktualisiert, wodurch unsere Storybook-Version von Version 5.3.19 auf die neueste Version 6.xx aktualisiert wird. Ich habe nicht versucht, diesen Fehler in diesem Zweig zu wiederholen, da ich davon ausgehe, dass alles in Ordnung sein wird ) Mein Grund dafür ist unten beschrieben.
• Das aktuelle Projekt hat eine Wurzel .babelrc (siehe oben) für die Haupt-App. Diese Konfiguration verwendet @babel/preset-env und verwendet einen Root .browserslistrc (siehe oben), um die Verwendung von Polyfills zu bestimmen. In der Hauptniederlassung unserer App ist kein .storybook/.babelrc vorhanden.
• Wir verwenden das Storybook nur für die interne Entwicklerdokumentation. Da die Organisation hauptsächlich Chrome als Standardbrowser verwendet, sind keine Polyfills erforderlich. Diese Offenbarung trug tatsächlich zur endgültigen Lösung bei.
• Ich verwende eine benutzerdefinierte Storybook-Webpack-Konfiguration, aber nur, um zusätzliche Regeln für Schriftarten / Bilder hinzuzufügen. Ich habe den Versuch, die Kernregeln für die Verarbeitung von .js zu ändern, aus den in dieser Storybook-Ausgabe beschriebenen Gründen abgebrochen.
• Ich erlebe diese Ausgabe nur, wenn ich die STATIC STORYBOOK-Site generiere. Das Ausführen über den mitgelieferten Dev-Server für die lokale Entwicklung hat keine Probleme.

Frühe Fixversuche

Die meisten meiner frühen Versuche, das Problem zu beheben, drehten sich um den Versuch, Optionen im Stammverzeichnis .babelrc (siehe oben) festzulegen, um zu versuchen, Babel (wie vom Tool build-storybook ) mitzuteilen, wie ich möchte die Transpilation erfolgen. Keine von anderen vorgeschlagene Konfiguration von useBuiltIns , sourceType usw. war erfolgreich. Außerdem habe ich versucht, die gesamte Route zum Reinigen des npm-Cache-Entfernen-Knoten-Moduls-und-Paket-Sperren-dann-npm-Installierens ohne Erfolg (obwohl _did_ dazu führte, dass sich einige deps von deps ein wenig änderten).

Endgültige Lösung

Während ich anfänglich zögerte, ein benutzerdefiniertes .storybook/.babelrc , gingen mir die Optionen aus. Ich hatte zuvor versucht, diese Datei zu erstellen und sie über die Eigenschaft extends harmonisch mit dem Stamm .babelrc und gegen eine Wand zu stoßen, aber ich beschloss, es noch einmal zu versuchen.

Durch einfaches Verschieben der Root-Babel-Konfiguration in die Storybook-spezifische Konfiguration konnte der statische Site-Build erfolgreich abgeschlossen werden. Es gab jedoch immer noch einige Laufzeitfehler, die auf eine fehlerhafte Transpilation hinwiesen (das erneute Exportieren einiger Importe führte dazu, dass diese Werte undefined in der Datei, in die die endgültigen Importe leben). Ungefähr zu dieser Zeit wurde mir klar, dass ich keine Polyfills für das Storybook benötigte, also entfernte ich die Voreinstellung @babel/preset-env in den neuen .storybook/.babelrc insgesamt. HUZZAH, Problem gelöst! Die ursprüngliche Konfiguration musste jedoch für die App bestehen bleiben, daher habe ich in .storybook/.babelrc-ci und die ursprüngliche Root-Konfiguration wiederhergestellt. Dann musste ich unsere CI-Pipeline aktualisieren, um nach der ci-Konfiguration zu suchen und sie umzubenennen, um das Suffix -ci vor dem Erstellen der statischen Site abzuschneiden, aber das war trivial.

Erraten der Probleme

Bei diesem Prozess habe ich meine Pakete und die Sperrdatei häufig überprüft und festgestellt, dass Storybook v5.3.19 und alle seine Addons zwar von corejs v3.xx abhängig sind, jedoch von den vorhandenen @babel/polyfill und ein paar anderen Babel deps vertraute auf corejs v2.xx! Ich vermute, dass mindestens ein Problem die Auflösung in der App ist, um den kleinsten gemeinsamen Nenner von v2 zu verwenden. Dies war sinnvoll, da die aufgetretenen Fehler darin bestanden, Module wie es.array.iterator referenzieren, während v2 Module wie es6.array.iterator bereitstellt. Ich bin mir nicht sicher, wie das Storybook dep in Konflikt steht, wenn es ältere babel / corejs-Konfigurationen unterstützen soll, aber es scheint der Fall zu sein. Außerdem muss es etwas darüber geben, wie entweder / all storybook-babel / installiertes babel / storybook-corejs / installierte-corejs ein vorhandenes .babelrc finden und anwenden. Ich weiß nicht, warum das Verschieben der Root-Konfiguration in eine Storybook-spezifische Konfiguration das Problem auf magische Weise löst. Pathing vielleicht? 🤷‍♂️

Fazit

Wenn Sie nach all dem Geschwätz hier geblieben sind, herzlichen Glückwunsch! 😂

Alles in allem bin ich nicht begeistert von den Reifen, durch die ich springen musste, um dieses Problem zu umgehen, aber vielleicht ist meine Situation etwas Einzigartiges. Außerdem kann ich alles herausreißen, nachdem meine oben genannten Upgrades für Babel / Webpack / Storybook zusammengeführt wurden.

Wie auch immer, ich hoffe, dass dies für mindestens eine Person interessant war, die unter demselben Problem leidet. Und ich werde @shilman und @ndelangen markieren, da sie anscheinend in die Lösung dieses Problems investiert sind. 👋