Storybook: Storybook v5 ломается при использовании core-js ^ 3.0

Созданный на 20 мар. 2019  ·  100Комментарии  ·  Источник: storybookjs/storybook

Опишите ошибку
Storybook не компилируется после обновления core-js до версии 3.

Это может иметь какое-то отношение к полифилу символов, необходимому в
https://github.com/storybooks/storybook/blob/0bdb2ca94e5ec732d84d3b330aa3b5bedfc534ec/lib/core/src/server/common/polyfills.js#L3

Воспроизводить
Шаги по воспроизведению поведения:

  1. Установить core-js версии 3.0 или выше
  2. Есть corejs: { version: 3 }, в параметрах @babel/env
  3. Попробуйте запустить сервер сборников рассказов
  4. Наблюдать за ошибкой
ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator' in '/Users/Work/react/.storybook'
 @ ./.storybook/config.js 3:0-55
 @ 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

Система:

babel / webpack core dependencies has workaround high priority question / support

Самый полезный комментарий

У меня тоже такая проблема. Я использую последнюю версию firebase, которая недавно добавила зависимость от core-js @ 3 .
после обновления firebase сборник рассказов, который использовался для запуска, выдает следующие ошибки:


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

Все 100 Комментарий

Storybook как-то неправильно использует core-js. @babel/preset-env версия 7.4.1 обновлена ​​до core-js@3 и мое приложение Storybook реагирует на запросы при запуске тестов

client-api выглядит так, как будто он должен иметь core-js @ 2 в качестве зависимости, поскольку сгенерированное ядро ​​требует этого

Хотя он говорит, что исправлен в 5.0.4 и 5.0.5, я все равно получаю эту ошибку.

Как воспроизвести:
Установите @storybook/cli и пакет инициализации. Затем запустите сборник рассказов с помощью 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 Это не ошибка, это предупреждение. Это исправлено в 5.1.0-alpha.16 и я выпущу исправление для latest через несколько дней, если никто не пожалуется.

Понял! Благодаря!

Я обновил версию сборника рассказов до 5.0.6, и эта проблема решена.

@ jessy1092 Приятно это слышать. Я пока закрываю это. Если кто-то снова столкнется с этой проблемой, я открою снова.

Здравствуйте,
Похоже, у меня это не работает, даже со сборником рассказов 5.1.0-alpha.18

Вот воспроизводимое репо: https://github.com/christophehurpeau/cra-rest-hooks-storybook

yarn install
yarn storybook

надеюсь, это поможет

@christophehurpeau Есть шанс попробовать для меня 5.0.6 ? Повторное открытие этого. 😭

Я все еще сталкивался с той же проблемой при использовании core-js @ v3 в моем основном проекте. Решение заключалось в том, чтобы убедиться, что в конфигурации webpack, что core-js/modules разрешено для версии, связанной с сборником рассказов.

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

Хакерское решение, но на данный момент должно быть достаточно хорошим.

@shilman также пробовал 5.0.6, результат тот же (https://github.com/christophehurpeau/cra-rest-hooks-storybook/tree/storybook-5.0.6)

@artursvonda Я не использую core-js v3, его использует зависимость. У меня нет node_modules/@storybook/core/node_modules/core-js потому что v2 - это тот, который используется как сценариями реакции, так и @ storybook / core, дедупликацией в node_modules. Только зависимость с использованием core-js 3 не находит core-js

ах, так это работает, когда я удаляю псевдоним:

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

Вау. псевдонимы пугают. почему сборник рассказов их использует?

cc @ndelangen

У меня тоже такая проблема. Я использую последнюю версию firebase, которая недавно добавила зависимость от core-js @ 3 .
после обновления firebase сборник рассказов, который использовался для запуска, выдает следующие ошибки:


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

могу подтвердить,

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

в свежих cra2 и sb init вылетает

То же самое для меня. Возврат к firebase версии 4.12.1 работал, но ему больше года и это не очень хорошее решение.

ах, так это работает, когда я удаляю псевдоним:

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

Также использование [email protected] с [email protected] и добавление этого к .storybook/webpack.config.js решило проблему.

Я только что увидел, что firebase обновила до 5.10.0 а также обновила сборник рассказов до 5.0.10 , и мне удалось удалить псевдоним "hack" выше.

к сожалению, обновление Firebase и Storybook до последней версии не устранило мою проблему.
Я должен прекратить использовать сборник рассказов для этого вопроса.

@zjaml вы пробовали обходные пути

@shilman об этом, я не знаю, в каком файле мне это делать.

@zjaml Это .storybook/webpack.config.js . Пожалуйста, дайте мне знать, работает ли это для вас!

@shilman так работает! Благодаря!

Я использую babel preset-env, и я столкнулся с той же проблемой с Storybook 5.0.10.

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

Обходной путь удаления псевдонима исправил это для меня. 🙏 @christophehurpeau

Следует ли нам удалить псевдоним из файла webpack.config превью?

может даже все псевдонимы?

Та же проблема, удаление псевдонима не решает проблему для меня :(

То же самое для меня. Удаление псевдонима не решает проблему

Я думаю, этот PR рассмотрит эту и многие другие проблемы:
https://github.com/storybooks/storybook/pull/6566

Вероятно, это серьезное критическое изменение, поэтому оно может появиться в V6, мы все еще обсуждаем это.

Возможно, мы можем потратить некоторое время на разделение этого PR на несколько PR, чтобы мы могли объединить и выпустить некоторые вещи быстрее.

Помощь будет очень признательна!

Та же проблема здесь - наша ломается с react-app-polyfill хотя он был обновлен для использования core-js версии 3. На данный момент откат к версии 0.2.2.

подтверждение, что это исправление сработало и для меня, [email protected] и [email protected]

добавил файл ./storybook/webpack.config.js с указанным выше

~ извините - @ storybook /

РЕДАКТИРОВАТЬ: Извините - закончил поиск ответа в другом вопросе. https://github.com/storybooks/storybook/issues/5893

Обходной путь
Используйте следующую версию CLI / React native, чтобы получить 5.1.0-alpha.x:

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

Удаление псевдонима у меня не сработало. Однако я смог обойти это, переместив наш файл babel в .storybook

Всем привет! Похоже, что в последнее время в этом вопросе особо ничего не происходит. Если все еще есть вопросы, комментарии или ошибки, пожалуйста, продолжайте обсуждение. К сожалению, у нас нет времени разбираться в каждой проблеме. Мы всегда открыты для предложений, поэтому, если вы хотите помочь, отправьте нам запрос на перенос. Неактивные вопросы будут закрыты через 30 дней. Благодаря!

^ Насколько мне известно, это все еще серьезная проблема, и ее не следует отмечать как неактивные.

@jdhayford AFAIK это исправлено в версии 5.1, выпуск которой планируется через несколько дней.

@shilman Замечательно ! Спасибо и спасибо участникам 👍

Эта проблема все еще возникает, но ее удалось исправить с помощью решения

Удаление псевдонима у меня не сработало. Однако я смог обойти это, переместив наш файл babel в .storybook

Я все еще сталкиваюсь с той же проблемой. @ByDesignGit Не могли бы вы объяснить, как вам удалось это исправить?

Можно было исправить, вручную установив последнюю версию npm i core-js -D.
Устанавливать зависимость вручную нецелесообразно. он должен правильно управлять такими проблемами внутри компании.

Жду правильного исправления.

Я тоже столкнулся с той же проблемой. Однако я считаю, что теперь это противоположно исходной проблеме, когда предыдущий пакет устанавливал старую версию core-js (2.6.9) в качестве зависимости, а теперь для сборника рассказов требуется core-js @ 3.
Временные исправления с использованием решения @ChandanPHAI, а также ожидание правильного исправления.

Я все еще сталкиваюсь с той же проблемой. @ByDesignGit Не могли бы вы объяснить, как вам удалось это исправить?

Я решил это, переместив свой .babelrc в свой .storybook

Эта проблема все еще возникает, но ее удалось исправить с помощью решения

Удаление псевдонима у меня не сработало. Однако я смог обойти это, переместив наш файл babel в .storybook

То же самое и здесь:

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

Удаление псевдонима у меня не сработало. Но я установил npm i core-js -D как предложил @ChandanPHAI , и это сработало 👌

Жду и правильного исправления.

Я все еще сталкиваюсь с той же проблемой. @ByDesignGit Не могли бы вы объяснить, как вам удалось это исправить?

Я решил это, переместив свой .babelrc в свой .storybook

Эта проблема все еще возникает, но ее удалось исправить с помощью решения

Удаление псевдонима у меня не сработало. Однако я смог обойти это, переместив наш файл babel в .storybook

Это сработало! Я скопировал .babelrc в .storybook

@ arvenz0210 @ByDesignGit, разве это не значит, что теперь вам нужно поддерживать два файла .babelrc ? Кажется нежелательным.

Обновление моего проекта vue.js до "@storybook/vue": "^5.1.1" решило для меня проблему с псевдонимом core-js. 👍

  • не нужно было перемещать мой babel.config.js
  • не нужно было ничего добавлять / удалять из моей конфигурации веб-пакета (я использую https://github.com/storybookjs/vue-cli-plugin-storybook v0.6.1, поэтому моя конфигурация веб-пакета частично генерируется vue-cli с немного несвязанного материала, который я добавил через vue.config.js который vue-cli объединяется с динамически генерируемой конфигурацией webpack.)
  • не нужно было добавлять / удалять какие-либо ссылки на core-js, псевдонимы или deps, которые зависят от core-js и т. д.

Я также вижу это в проекте Angular, поэтому файла .babel нет. Не повезло ни с отдельной установкой core-js, ни с удалением псевдонима.

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

Все изменения в 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",

Извините, у меня не было времени на дальнейшую отладку.

Используется @storybook/react": "^5.1.1" но проблема по-прежнему возникает с новым npm install . Я подозреваю, что @ChandanPHAI верен, у меня есть другие зависимости, которые установили v2 пакета core-js .

Этот PR, сделанный сегодня, должен исправить это,

Все еще происходит с "@storybook/react": "^5.1.3" - Установка core-js --dev устранила проблему на моей стороне.

кто-нибудь сталкивается с проблемой https://github.com/storybookjs/storybook/issues/7021 ??

Ура !! Я только что выпустил https://github.com/storybookjs/storybook/releases/tag/v5.1.4, содержащий PR №7016, который ссылается на эту проблему. Обновите сегодня, чтобы попробовать!

Закрытие этого вопроса. Пожалуйста, откройте снова, если вы считаете, что еще многое предстоит сделать.

@shilman только что обновился, и такие же ошибки ... :(

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

@shilman Я обновил сборник рассказов и дополнения до последней версии.

По-прежнему возникают ошибки, связанные с core-js.

установка npm i core-js -D устраняет проблему локально.

без библиотеки core-js он не работает.

Вы импортируете babel-polyfill куда-нибудь в свой код? Если да, попробуйте это удалить?

Вот как я исправил полученную репро-ветку:
https://github.com/umakantp/demo-repro/pull/1

Пожалуйста, пришлите мне другие репро репозитории по любому каналу, чтобы я мог исправить проблему.

@ChandanPHAI @DonikaV

@ndelangen привет, в моей папке нет babel-polyfill . Я не могу показать вам больше. Это частное репо.
Сборник рассказов и все дополнения обновлены.

Привет, возникла та же проблема с core-js даже на 5.1.4. Manuall, устанавливающий core-js как зависимость dev, тоже не работал.

Я работаю над этим, новым релизом в течение 24 часов!

Ага !! Я только что выпустил https://github.com/storybookjs/storybook/releases/tag/v5.1.5, содержащий PR # 7086, который ссылается на эту проблему. Обновите сегодня, чтобы попробовать!

Закрытие этого вопроса. Пожалуйста, откройте снова, если вы считаете, что еще многое предстоит сделать.

Я по-прежнему получаю ошибки почти для каждого компонента, который у меня есть, например:

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

Я не исключаю, что это может быть моя вина. Я кланировал кеш пряжи, удалил yarn.lock, установил последнюю версию каждой зависимости. У меня не установлен core-js в качестве зависимости, но я использую babel с некоторыми предустановками, такими как @babel/preset-env . У меня есть настраиваемая конфигурация веб-пакета:

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 У меня точно такая же ошибка. Я могу подтвердить, что файл присутствует в пути модулей core-js, а также в предустановке babel включен core-js 3, но все равно не работает. Удалось ли вам разобраться в этом?

Редактировать:

Если я удалю addon-storysource, все будет работать должным образом. Не уверен, что это вызывает.

Изменить 2:
Копнул глубже. По какой-то причине загрузчику storysource нужны все файлы .js, чтобы они отображались на панели надстройки, и ему пришлось исключить модули узлов в конфигурации

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

Возможно связано с # 3626 # 6984

коп @ igor-dv

@ aga5tya Да, вы попали в проблему. Я исключил node_modules, и все работает нормально!

Мне пришлось:

  • [x] обновить все зависимости @ storybook / *
  • [x] добавить "corejs": 3 в мой .babelrc
  • [x] запустить yarn add corejs@3
  • [x] добавить exclude: /node_modules/, в мой webpack.config.js
  • [x] удалить import 'babel-polyfill' из моего app.js

babel polyfill устарел и должен быть везде заменен на core-js

или airbnb-browser-shims :-p

в любом случае, node_modules всегда следует исключать из транспиляции.

У меня следующая ошибка:

ОШИБКА в ./.storybook/config.js
Модуль не найден: ошибка: не удается найти модуль core-js / modules / web.dom.iterable

Я использую сборник рассказов / vue 5.1.9.

Screen Shot 2019-06-22 at 7 26 48 PM

@flowck, пожалуйста, установите core-js v3 в корень вашего проекта

Можем ли мы найти способ использовать сборник рассказов без использования каких-либо core-j? Почему потребители не могут предоставить свои собственные прокладки?

babel-polyfills - это часть библиотеки, которую я должен использовать. Как я могу запустить сборник рассказов в этом случае?

Я запустил yarn upgrade interactive --latest , обновил все зависимости, связанные со сборником рассказов, и теперь он работает! 🎉

К вашему сведению: эта ошибка произошла только после того, как я добавил аддон @storybook/addon-knobs .

@ chadlavi-casebook ммм, вы могли бы попробовать добавить плагин игнорирования веб-пакетов, я думаю?
https://webpack.js.org/plugins/ignore-plugin/

Была такая же проблема с @ storybook / vue 5.1.9. Запуск yarn why core-js оказался таким:

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

Добавление core-js@^2.6.9 в devDependencies решило эту проблему для меня.

Обязательно сначала удалите свои node_modules.
rm -rf node_modules

У меня возникла эта проблема после обновления до v5.1.9 с v5.0.6 .

Та же проблема. Исправлено после перехода с v5.1.9 на v5.0.6

@JamyGolden и @Exomnius, не могли бы вы рассказать больше о своей настройке?

вывод yarn why core-js полезен, репозиторий воспроизведения еще более полезен.

@ndelangen Сейчас я без проблем 5.1.9 , думаю, была установлена ​​новая зависимость патча, которая решила проблему 🤷‍♀️

Edit, пришлось снова перейти на более раннюю версию, не пройдя тесты CI. Я сделал 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.

У вас он работает локально, но у CI все еще та же ошибка?

@ndelangen да, у CI и другого разработчика есть проблемы (я 1.15.2 , узел 8.15.1 ), мы тоже используем файл блокировки. Вышеупомянутое было неудачным yarn why core-js и это мое:

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.

Пример той же ошибки, которая существует в каждом утверждении:

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

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

ага, значит, сборник рассказов работает нормально, но тест по-прежнему использует старую версию core-js!

Что внутри localMocksFile.js ? Скорее всего, все, что вам нужно сделать, это обновить этот 1 файл.

@ndelangen, ошибка, которую я вставил ранее, была связана с запуском сторишотов (что происходит только после обновления версии сборника рассказов). Ошибки, которые возникают у другого разработчика при запуске yarn storybook содержат множество похожих ошибок, по-видимому, это ошибка для каждого файла:

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/&#64;storybook/core/dist/server/common/polyfills.js ./node_modules/&#64;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/&#64;storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/&#64;storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/&#64;storybook/core/node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main} [built]
[./node_modules/&#64;storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~main} [built]
[./node_modules/&#64;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'
 &#64; ./app/helpers/device.js 1:0-42 1:42-84
 &#64; ./app/helpers/index.js
 &#64; ./app/components/Button/index.js
 &#64; ./app/components/Button/__tests__/index.stories.js
 &#64; ./app sync \.stories\.(js|jsx)$
 &#64; ./.storybook/config.js
 &#64; multi ./node_modules/&#64;storybook/core/dist/server/common/polyfills.js ./node_modules/&#64;storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true
...

Не уверен, что это полезная информация, но @babel/polyfill не включен в основной package.json в проекте.

У меня следующая ошибка:

ОШИБКА в ./.storybook/config.js
Модуль не найден: ошибка: не удается найти модуль core-js / modules / web.dom.iterable

Я использую сборник рассказов / vue 5.1.9.

Screen Shot 2019-06-22 at 7 26 48 PM

Решается установкой 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"
  }

Это обходной путь, а не исправление, но откат ВСЕХ моих пакетов Storybook (включая надстройки) до версии 5.0.6 исправил это. Больше ничего в этой теме не помогло.

(Команды для React + Yarn ниже, но легко переводятся в NPM / Vue):

Первое:

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

С последующим:

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

Я вижу проблему samme, когда пытаюсь запустить сборник рассказов:
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

Это произошло после обновления до узла v12 с помощью nvm.

Нам пришлось это сделать, чтобы исправить проблему с полифилом, поэтому я не могу понизить версию узла. До этого все работало. К сожалению, я не знаю, на какой версии узла я был до этого. Я перепробовал все в этой ветке, но я не хочу возвращаться к 5.0.6., Так как основной причиной создания сборника рассказов для этого проекта является использование новой документации. Я тут все запихнул: https://github.com/netliferesearch/netlife2019/tree/storybook_setup_stories

Изменить: я понизил рейтинг узла, и он все еще не работает, нужно было попробовать это перед публикацией. Я немного не понимаю, что происходит, буду искать.

Использование @storybook/vue 5.2.5 помимо Nuxt.js v2.10.1 и имело ту же проблему: yarn storybook работает, но yarn build или любая другая задача, связанная с nuxt, не удалась. 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#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.

Поэтому я использую тот же подход, что и @frebro , попробуйте

$ yarn add -D [email protected]

и 🎉: У меня рабочая среда: yarn storybook , yarn build и все другие задачи снова работают.

@rwam yarn add -D [email protected] работает для меня в моем сборнике рассказов 5.2.5 HTML-проект thx dude :)

Vue с миграцией @ vue / cli

об ошибке:

если 'core-js': '^3.*.*':

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

если 'core-js': '^2.*.*':

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

о депс:

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

мои рабочие депс:

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

Здоровья тебе и твоим близким;)

Я нашел более надежное решение для работы Storybook в проекте Nuxt. Решение зависит от несовпадения версий core-js. Nuxt использует версию 2 по умолчанию и версию 3 сборника рассказов. Поэтому, чтобы решить эту проблему, я должен следовать этой заметке из @ nuxt / babel-preset-app :

Примечание. Поскольку core-js @ 2 и core-js @ 3 поддерживаются в Babel 7.4.0, мы рекомендуем напрямую добавить core-js и установить версию с помощью параметра corejs.

Я снова получаю рабочую среду с Nuxt 2.11.0, используя это обновление на моем 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 }
            }
          ]
        ]
      }
    }
  }
}

Я столкнулся с этим решением, потому что не смог обновить nuxt до последней стабильной версии.

Я столкнулся с той же проблемой при попытке добавить сборник рассказов (5.3.18) в gatsby v2, когда, по крайней мере, один компонент использовал статические запросы. Перемещение .babelrc в .storybook работало, как было предложено @brycehill .

Я нашел более надежное решение для работы Storybook в проекте Nuxt. Решение зависит от несовпадения версий core-js. Nuxt использует версию 2 по умолчанию и версию 3 сборника рассказов. Поэтому, чтобы решить эту проблему, я должен следовать этой заметке из @ nuxt / babel-preset-app :

Примечание. Поскольку core-js @ 2 и core-js @ 3 поддерживаются в Babel 7.4.0, мы рекомендуем напрямую добавить core-js и установить версию с помощью параметра corejs.

Я снова получаю рабочую среду с Nuxt 2.11.0, используя это обновление на моем 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 }
            }
          ]
        ]
      }
    }
  }
}

Я столкнулся с этим решением, потому что не смог обновить nuxt до последней стабильной версии.

Замечательно, у меня сработало!

@masives Возникла та же проблема с gatsby. Не могли бы вы опубликовать ссылку на комментарий / .babelrc, поскольку я не могу найти их в этом выпуске.

Nvm. Проблемы были вызваны историями, находящимися в каталоге страниц. Решил проблему, переместив истории страниц в __stories__

Next.js 9.1.1 -> Next.js 9.4.4 меня сбил с толку.

Сравнение результатов npm list core-js показало, что после обновления Next отсутствовала среда выполнения babel ядра js. Я переустановил этот недостающий пакет в зависимостях dev, и LO и Behold сработали

cc @ndelangen

Та же проблема с версией 5.3.19 при переходе с core-js v2 на v3

То же самое для меня. Как @denimamab, я использую версию 5.3.19

Исправлено локально:
rm ./package-lock.json
rm -rf ./node_modules
npm install

Теперь сборник рассказов npm run работает

Просто хотел поделиться своим опытом с этой ошибкой, потратив на нее день ...

Я прочитал множество тем о проблемах GH, включая этот, при устранении проблемы. Я попробовал несколько из предложенных исправлений, и только одно привело к «приемлемому» успеху.

Справка

Собираем все это в одном месте с тех пор, потому что. 😅


Существующий .babelrc в корне проекта

{
  "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": "./"
}


Корень .browserslistrc

last 2 versions
> 1%
IE >= 11


Актуально (в основном) package.json

"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

Статус проекта и предпосылки

  • У меня есть выдающееся отдельное изменение для обновления всех пакетов webpack / babel [моей команды] (babel - это v7.xx в моем изменении и в отдельном изменении), но он еще не вышел из тестирования из-за нашего теста ie11 инфраструктура. изменение вводит corejs версии 3 в качестве зависимости и useBuiltIns: 'usage' , где ранее мы использовали ручной импорт @babel/polyfill и значение по умолчанию для useBuiltIns . Я ожидаю, что это изменение скоро будет объединено. это основная причина, по которой я могу / не буду включать corejs в качестве зависимости в мое текущее изменение, как многие другие предлагали (и проверяли) в качестве исправления.
  • у меня есть _другое_ выдающееся изменение, основанное на ветке, которая обновляет пакеты webpack / babel, которая обновляет нашу версию сборника рассказов с v5.3.19 до новейшей v6.xx.Я не пытался воспроизвести эту ошибку в этой ветке, так как предполагаю, что все будет хорошо ) моя причина описана ниже.
  • текущий проект имеет корень .babelrc (см. выше) для основного приложения. в этой конфигурации используется @babel/preset-env и корень .browserslistrc (см. выше) для определения использования полифилла. нет .storybook/.babelrc нет в основной ветке нашего приложения.
  • мы используем сборник рассказов только для внутренней документации для разработчиков. поскольку организация в основном использует хром в качестве браузера по умолчанию, полифиллы не нужны. это откровение действительно способствовало окончательному решению.
  • Я _am_ использую настраиваемую конфигурацию веб-пакета сборника рассказов, но только для добавления дополнительных правил для шрифтов / изображений. Я отказался от попытки изменить основные правила обработки .js по причинам, изложенным в этом выпуске сборника рассказов .
  • ЭТА ПРОБЛЕМА У МЕНЯ ВОЗНИКАЮТ ТОЛЬКО ПРИ СОЗДАНИИ СТАТИЧЕСКОГО САЙТА ИСТОРИИ. запуск через прилагаемый dev-сервер для локальной разработки не вызывает проблем.

Попытки раннего исправления

Большинство моих ранних попыток исправить проблему были связаны с попыткой установить параметры в корневом каталоге .babelrc (показано выше), чтобы попытаться связаться с babel (как запускается с помощью инструмента build-storybook ), как я хочу транспиляция должна произойти. Никакая конфигурация useBuiltIns , sourceType и т. Д., Предложенная другими, не была успешной. Кроме того, я пробовал весь маршрут clean-npm-cache-remove-node-modules-and-package-lock-then-npm-install, но безрезультатно (хотя этот _did_ немного изменил некоторые зависимости deps).

Окончательное решение

Поначалу я не решался попробовать использовать собственный .storybook/.babelrc , но у меня заканчивались варианты. Раньше я пытался создать этот файл и заставить его гармонично работать с корнем .babelrc через свойство extends и ударился о стену, но я решил попробовать еще раз.

Простое перемещение корневой конфигурации babel в конфигурацию, специфичную для сборника рассказов, позволило успешно завершить сборку статического сайта, но все еще оставались некоторые ошибки времени выполнения, указывающие на ошибочную транспиляцию (повторный экспорт некоторых импортов привел к тому, что эти значения были undefined в файле, в котором находится окончательный импорт). Примерно в это же время я понял, что мне не нужны полифиллы для сборника рассказов, поэтому я полностью удалил предустановку @babel/preset-env в новом .storybook/.babelrc . HUZZAH, проблема решена! Однако исходная конфигурация должна была сохраниться для приложения, поэтому я переименовал ее в .storybook/.babelrc-ci и восстановил исходную корневую конфигурацию. Затем мне пришлось обновить наш конвейер CI, чтобы проверить конфигурацию ci и переименовать, чтобы отрезать суффикс -ci перед сборкой статического сайта, но это было тривиально.

Угадывая проблему (ы)

Этот процесс заставил меня часто проверять свои пакеты и файл блокировки, и я обнаружил, что, хотя Storybook v5.3.19 и все его надстройки зависят от corejs v3.xx, существующий @babel/polyfill и немного других babel deps полагался на corejs v2.xx! Я предполагаю, что по крайней мере одна проблема - это разрешение в приложении использовать наименьший общий знаменатель v2. Это имело смысл, поскольку ошибки, с которыми я столкнулся, ссылались на такие модули, как es.array.iterator тогда как v2 предоставляет такие модули, как es6.array.iterator . Я не уверен в том, как конфликтует depbook истории, если он нацелен на поддержку старых конфигураций babel / corejs, но, похоже, это так. Кроме того, должно быть что-то о том, как / all storybook-babel / installed babel / storybook-corejs / installed-corejs находит и применяет существующий .babelrc . Я не понимаю, почему перемещение корневой конфигурации в конфигурацию для сборника рассказов волшебным образом решает проблему. Может быть, путь? 🤷‍♂️

Заключение

Если вы остались после всей этой болтовни, поздравляю! 😂

В общем, я не в восторге от обручей, через которые мне пришлось прыгнуть, чтобы обойти эту проблему, но, возможно, моя ситуация в чем-то уникальна. Кроме того, я смогу вырвать все это после того, как мои вышеупомянутые обновления babel / webpack / storybook будут объединены.

В любом случае, я надеюсь, что это было интересно по крайней мере одному человеку, страдающему той же проблемой. И я отмечу @shilman и @ndelangen, поскольку они, похоже,

Была ли эта страница полезной?
0 / 5 - 0 рейтинги