Storybook: core-js ^ 3.0을 사용할 때 Storybook v5가 중단됨

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 및 init 패키지를 설치합니다. 그런 다음 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',
        ),
    }
}

Hacky 솔루션이지만 지금은 충분합니다.

@shilman 도 5.0.6, 동일한 결과를 시도했습니다 (https://github.com/christophehurpeau/cra-rest-hooks-storybook/tree/storybook-5.0.6)

@artursvonda 나는 core-js v3를 사용하지 않고 종속성이 그것을 사용합니다. v2는 node_modules에서 중복 제거 된 react-scripts와 @ storybook / core에서 모두 사용되기 때문에 node_modules/@storybook/core/node_modules/core-js 가 없습니다. core-js 3을 사용하는 종속성 만 core-js를 찾지 못합니다.

아 그래서 별칭을 삭제하면 작동합니다.

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

와. 별칭은 무섭습니다. 왜 동화책에서 그것들을 사용합니까?

cc @ndelangen

나도이 문제가 있습니다. 최근 core-js @ 3 에 종속성을 추가 한 최신 firebase를 사용하고 있습니다.
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 위의 @parkerholladay 의 해결 방법을 시도

@shilman 에 대해, 어떤 파일에서 해야할지 모르겠습니다.

@zjaml .storybook/webpack.config.js 입니다. 그것이 당신을 위해 작동하는지 알려주십시오!

@shilman 그렇게 작동합니다! 감사!

나는 babel preset-env를 사용하고 있으며 스토리 북 5.0.10에서 동일한 문제에 직면했습니다.

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

별칭 삭제 해결 방법으로 해결 되었습니다. 🙏 @christophehurpeau

미리보기의 webpack.config에서 별칭을 삭제해야합니까?

어쩌면 모든 별칭일까요?

여기에서 같은 문제, 별칭 제거는 나를 위해 문제를 해결하지 않습니다.

나에게도 같은 문제입니다. 별칭을 제거해도 문제가 해결되지 않습니다.

이 PR은이 문제와 내가 생각하는 다른 많은 문제를 다룰 것입니다.
https://github.com/storybooks/storybook/pull/6566

그래도 아마도 주요 변경 사항 일 수 있으므로 V6에서 제공 될 수 있지만 여전히이 문제에 대해 논의 중입니다.

아마도 우리는 PR을 여러 PR로 분할하는 데 시간을 할애하여 일부를 더 빨리 병합하고 릴리스 할 수 있습니다.

많은 도움을 주시면 감사하겠습니다!

여기서도 동일한 문제가 발생합니다. core-js 버전 3을 사용하도록 업데이트되었지만 react-app-polyfill 문제가 발생합니다. 현재 버전 0.2.2로 롤백합니다.

이 수정 사항을 확인하면 [email protected] 및 [email protected]

위와 함께 ./storybook/webpack.config.js 파일을 추가했습니다.

~ 죄송합니다-@ storybook / [email protected] 이 출시되지 않은 것 같습니다-의도적

편집 : 죄송합니다-다른 문제에서 답을 찾기 종료했습니다. https://github.com/storybooks/storybook/issues/5893

해결 방법
5.1.0-alpha.x를 얻으려면 CLI / React 네이티브의 다음 버전을 사용하세요.

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

별칭을 삭제해도 효과가 없었습니다. 그러나 바벨 파일을 .storybook 로 이동하여이 문제를 해결할 수있었습니다.

안녕하세요 여러분! 최근이 문제에서 많은 일이 일어나지 않은 것 같습니다. 여전히 질문, 의견 또는 버그가 있으면 토론을 계속하십시오. 안타깝게도 모든 문제를 다룰 시간이 없습니다. 우리는 항상 기여에 열려 있으므로 도움이 필요하면 풀 요청을 보내주십시오. 비활성 문제는 30 일 후에 마감됩니다. 감사!

^ 제가 아는 한이 문제는 여전히 매우 문제이며 비활성으로 표시해서는 안됩니다.

@jdhayford AFAIK이 문제는 5.1에서 수정되었으며 며칠 후에 출시 될 예정입니다.

@shilman 대단해! 기여자에게 감사하고 감사합니다 👍

이 문제는 여전히 발생하고 있지만 @brycehill 솔루션을 사용하여 해결할 수있었습니다.

별칭을 삭제해도 효과가 없었습니다. 그러나 바벨 파일을 .storybook 로 이동하여이 문제를 해결할 수있었습니다.

나는 여전히 같은 문제에 직면하고 있습니다. @ByDesignGit 어떻게 고칠 수 있었는지 설명해 주시겠습니까?

최신 npm i core-js -D를 수동으로 설치하여 수정할 수있었습니다.
종속성을 수동으로 설치하는 것은 좋지 않습니다. 이러한 문제를 내부적으로 적절히 관리해야합니다.

적절한 수정을 기다리고 있습니다.

나도 같은 문제가 발생했습니다. 그러나 이제 이전 패키지가 이전 버전의 core-js (2.6.9)를 종속성으로 설치했고 이제 스토리 북에 core-js @ 3이 필요한 원래 문제와는 반대라고 생각합니다
@ChandanPHAI 솔루션을 사용하여 임시 수정

나는 여전히 같은 문제에 직면하고 있습니다. @ByDesignGit 어떻게 고칠 수 있었는지 설명해 주시겠습니까?

.babelrc 을 .storybook 로 옮겨서 해결했습니다.

이 문제는 여전히 발생하고 있지만 @brycehill 솔루션을 사용하여 해결할 수있었습니다.

별칭을 삭제해도 효과가 없었습니다. 그러나 바벨 파일을 .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

별칭을 삭제해도 효과가 없었습니다. 하지만 @ChandanPHAI가 제안한대로 npm i core-js -D 를 설치 했고 작동했습니다 👌

적절한 수정을 기다리고 있습니다.

나는 여전히 같은 문제에 직면하고 있습니다. @ByDesignGit 어떻게 고칠 수 있었는지 설명해 주시겠습니까?

.babelrc 을 .storybook 로 옮겨서 해결했습니다.

이 문제는 여전히 발생하고 있지만 @brycehill 솔루션을 사용하여 해결할 수있었습니다.

별칭을 삭제해도 효과가 없었습니다. 그러나 바벨 파일을 .storybook 로 이동하여이 문제를 해결할 수있었습니다.

작동했습니다! .storybook에 .babelrc를 복사했습니다.

@ arvenz0210 @ByDesignGit 은 이제 두 개의 .babelrc 파일을 유지해야한다는 의미가 아닙니까? 바람직하지 않은 것 같습니다.

vue.js 프로젝트를 "@storybook/vue": "^5.1.1" 업그레이드하면 core-js 별칭 문제가 해결되었습니다. 👍

• babel.config.js 를 옮길 필요가 없었습니다.
• 내 webpack 구성에서 아무것도 추가 / 제거 할 필요가 없었습니다 (https://github.com/storybookjs/vue-cli-plugin-storybook v0.6.1을 사용하고 있으므로 내 webpack 구성은 부분적으로 vue-cli에 의해 생성됩니다. vue-cli가 동적으로 생성 된 웹팩 구성과 병합되는 vue.config.js 를 통해 추가 한 약간의 관련없는 항목입니다.)
• core-js 등에 의존하는 core-js, 별칭 또는 deps에 대한 참조를 추가 / 제거 할 필요가 없었습니다.

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 가 정확 core-js 패키지의 v2를 설치 한 다른 종속성 이 있습니다.

이 PR은 오늘이 문제를 해결해야합니다. @shilman 은 곧 새 릴리스 테스트를 수행합니다. # 7051

"@storybook/react": "^5.1.3" 계속 발생- core-js --dev 설치하면 문제가 해결되었습니다.

문제에 직면 한 사람 https://github.com/storybookjs/storybook/issues/7021 ??

야!! 방금이 문제를 참조하는 PR # 7016이 포함 된 https://github.com/storybookjs/storybook/releases/tag/v5.1.4 를 릴리스했습니다. 지금 업그레이드하여 사용해보세요!

이 문제를 마무리합니다. 할 일이 더 많다고 생각되면 다시여십시오.

@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

문제를 해결할 수 있도록 모든 채널을 통해 나에게 더 많은 재현 저장소를 보내 주시기 바랍니다.

트윗 담아 가기

@ndelangen 안녕하세요, 내 폴더에 babel-polyfill 이 없습니다. 더 이상 보여 드릴 수 없습니다. 개인 저장소입니다.
스토리 북과 모든 애드온이 업데이트되었습니다.

안녕하세요, 5.1.4에서도 core-js에서 동일한 문제가 발생했습니다. core-js를 dev 종속성으로 수동 설치하는 것도 작동하지 않았습니다.

24 시간 이내에 새 릴리스 작업 중입니다!

이호 !! 방금이 문제를 참조하는 PR # 7086이 포함 된 https://github.com/storybookjs/storybook/releases/tag/v5.1.5 를 릴리스했습니다. 지금 업그레이드하여 사용해보세요!

이 문제를 마무리합니다. 할 일이 더 많다고 생각되면 다시여십시오.

다음과 같은 거의 모든 구성 요소에 대해 여전히 오류가 발생합니다.

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/preset-env 와 같은 사전 설정과 함께 babel을 사용합니다. 사용자 지정 웹팩 구성이 있습니다.

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 :
더 깊이 파십시오. 어떤 이유로 스토리 소스 로더는 애드온 패널에 표시하기 위해 모든 .js 파일이 있어야하며 구성에서 노드 모듈을 제외해야했습니다.

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

# 3626 # 6984와 관련이있을 수 있습니다.

cc @ igor-dv @libetl ☝️

@ aga5tya 예, 문제가 발생했습니다. node_modules를 제외하고 모든 것이 잘 작동합니다!

나는 :

• [x] 모든 @ storybook / * 종속성 업데이트
• [x] .babelrc에 "corejs": 3 추가
• [x] yarn add corejs@3
• [x] webpack.config.js에 exclude: /node_modules/, 추가
• [x] 내 app.js에서 import 'babel-polyfill' 제거

babel polyfill은 더 이상 사용되지 않으며 모든 곳에서 core-js로 대체되어야합니다.

또는 airbnb-browser-shims :-p

어느 쪽이든 node_modules는 항상 트랜스 파일에서 제외되어야합니다.

다음과 같은 오류가 있습니다.

./.storybook/config.js의 오류
모듈을 찾을 수 없음 : 오류 : 'core-js / modules / web.dom.iterable'모듈을 찾을 수 없습니다.

Storybook / vue 5.1.9를 사용하고 있습니다.

@flowck 프로젝트 루트에 core-js v3를 설치하십시오.

core-js를 전혀 사용하지 않고 스토리 북을 사용하는 방법을 찾을 수 있습니까? 소비자가 자신의 심을 제공 할 수없는 이유는 무엇입니까?

babel-polyfills는 내가 사용해야하는 라이브러리의 dep입니다. 이 경우 어떻게 동화책을 실행할 수 있습니까?

yarn upgrade interactive --latest 하고 모든 스토리 북 관련 종속성을 업그레이드했으며 이제 작동 중입니다! 🎉

참고 :이 오류는 @storybook/addon-knobs 애드온을 추가 한 후에 만 ​​발생했습니다.

@ chadlavi-casebook uhm, webpack 무시 플러그인을 추가해 볼 수 있습니까?
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

✅ devDependencies에 core-js@^2.6.9 를 추가하면 문제가 해결되었습니다.

먼저 node_modules를 삭제하십시오.
rm -rf node_modules

v5.1.9 에서 v5.0.6 v5.1.9 로 업그레이드 한 후이 문제가 발생합니다.

같은 문제. v5.1.9 에서 v5.0.6 다운 그레이드 한 후 수정 됨

@JamyGolden & @Exomnius 설정에 대해 더 많이 공유해 주시겠습니까?

yarn why core-js 의 출력은 도움이되며 재생산 저장소는 훨씬 더 유용합니다.

@ndelangen 지금 문제없이 5.1.9 업그레이드했습니다. 새로운 패치 종속성이 설치되어 문제가 해결 된 것 같습니다 🤷‍♀️

편집, 다시 다운 그레이드해야했고 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/@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
...

이것이 유용한 정보인지 확실하지 않지만 @babel/polyfill 는 프로젝트의 기본 package.json에 포함되어 있지 않습니다.

다음과 같은 오류가 있습니다.

./.storybook/config.js의 오류
모듈을 찾을 수 없음 : 오류 : 'core-js / modules / web.dom.iterable'모듈을 찾을 수 없습니다.

Storybook / vue 5.1.9를 사용하고 있습니다.

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 패키지 (애드온 포함)를 v 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

이는 nvm을 사용하여 노드 v12로 업데이트 한 후에 발생했습니다.

polyfill 문제를 해결하기 위해이 작업을 수행해야하므로 노드를 다운 그레이드 할 수 없습니다. 그 전에는 모든 것이 작동했습니다. 불행히도 나는 그 전에 내가 어떤 노드 버전을 사용했는지 모릅니다. 이 스레드에서 모든 것을 시도했지만 5.0.6으로 롤백하고 싶지 않습니다.이 프로젝트의 스토리 북을 설정하는 큰 이유는 새 문서를 사용하기 때문입니다. 나는 여기에 모든 것을 밀었다 : https://github.com/netliferesearch/netlife2019/tree/storybook_setup_stories

편집 : 노드를 다운 그레이드했는데 여전히 작동하지 않습니다. 게시하기 전에 시도 했어야합니다. 나는 무슨 일이 일어나고 있는지 조금 잃어 버렸다. 나는 계속 찾아 볼 것이다.

Nuxt.js v2.10.1 외에 @storybook/vue 5.2.5를 사용하고 동일한 문제가 발생했습니다. 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 / cli 마이그레이션을 사용하는 Vue

오류 정보 :

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

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

내 작업 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
Invalid Option: corejs is not a valid top-level option : -rm -rf node_modules .

당신과 당신의 사랑하는 사람들에게 건강;)

Nuxt 프로젝트에서 Storybook이 작동하도록하는 더 강력한 솔루션을 찾았습니다. 해결책은 core-js의 버전 불일치에 따라 다릅니다. Nuxt는 기본 버전 2와 Storybook 버전 3을 사용합니다. 따라서 문제를 해결하려면 @ nuxt / babel-preset-app 의이 메모를 따라야

참고 : core-js @ 2 및 core-js @ 3 은 모두 Babel 7.4.0에서 지원되므로 core-js를 직접 추가하고 corejs 옵션을 통해 버전을 설정하는 것이 좋습니다.

내 nuxt.config.js 에서이 업데이트 를 사용하여 Nuxt 2.11.0으로 작업 환경을 다시 얻습니다 .

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에 추가하려고 할 때 동일한 문제에 직면했습니다. @brycehill에 의해 제안 이동 .babelrc는 일 .storybook합니다.

Nuxt 프로젝트에서 Storybook이 작동하도록하는 더 강력한 솔루션을 찾았습니다. 해결책은 core-js의 버전 불일치에 따라 다릅니다. Nuxt는 기본 버전 2와 Storybook 버전 3을 사용합니다. 따라서 문제를 해결하려면 @ nuxt / babel-preset-app 의이 메모를 따라야

참고 : core-js @ 2 및 core-js @ 3 은 모두 Babel 7.4.0에서 지원되므로 core-js를 직접 추가하고 corejs 옵션을 통해 버전을 설정하는 것이 좋습니다.

내 nuxt.config.js 에서이 업데이트 를 사용하여 Nuxt 2.11.0으로 작업 환경을 다시 얻습니다 .

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 개츠비 와 같은 문제가 발생합니다. 이 문제에서 찾을 수없는 것 같으므로 주석 / .babelrc에 대한 링크를 게시 할 수 있습니까?

Nvm. 페이지 디렉토리에있는 스토리로 인해 문제가 발생했습니다. 페이지 스토리를 __stories__로 이동하여 문제를 해결했습니다.

Next.js 9.1.1-> Next.js 9.4.4가 나를 괴롭 혔습니다.

npm list core-js 의 결과를 비교하면 Next를 업데이트 한 후 core js의 babel 런타임이 누락 된 것으로 나타났습니다. 이 누락 된 패키지를 dev 종속성 및 LO에 다시 설치했고 작동했습니다.

cc @ndelangen

core-js v2에서 v3 로의 마이그레이션을 처리하는 동안 버전 5.3.19와 동일한 문제

나에게도 같은 문제입니다. @denimamab 처럼 저는 5.3.19 버전을 사용하고 있습니다.

다음을 사용하여 로컬로 수정했습니다.
rm ./package-lock.json
rm -rf ./node_modules
npm 설치

이제 npm 실행 스토리 북 작품

하루를 보낸 후이 버그에 대한 경험을 공유하고 싶었습니다.

문제를 해결할 때 이것을 포함하여 수많은 GH 문제 스레드를 읽었습니다. 몇 가지 제안 된 수정 사항을 시도해 보았지만 하나만 "용인 할 수있는"성공을 거두었습니다.

참고

그 이후로이 모든 것을 한곳에 모으고 있습니다. 😅

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

프로젝트 상태 및 전제 조건

• 모든 [우리 팀의] webpack / babel 패키지를 업그레이드하기위한 뛰어난 개별 변경 사항이 있지만 (babel은 내 변경 사항과 별도의 변경 사항에서 v7.xx 임) 아직 ie11 테스트로 인해 테스트에서 벗어나지 않았습니다. 하부 구조. 변경 사항은 corejs 버전 3을 종속성으로 도입하고 useBuiltIns: 'usage' 을 도입했습니다. 이전에는 @babel/polyfill 의 수동 가져 오기를 사용하고 useBuiltIns 의 기본값을 사용했습니다. 이 변경 사항이 곧 병합 될 것으로 예상합니다. 이것이 다른 많은 사람들이 수정 사항으로 제안하고 확인했듯이 현재 변경 사항에 corejs를 종속성으로 포함 할 수 있거나 포함하지 않을 주된 이유입니다.
• 나는 v5.3.19에서 최신 v6.xx로 우리의 스토리 북 버전을 업그레이드하는 webpack / babel 패키지를 업데이트하는 브랜치를 기반으로 _another_ 눈에 띄는 변경 사항을 가지고 있습니다. ) 내 이유는 아래에 설명되어 있습니다.
• 현재 프로젝트에는 기본 앱에 대한 루트 .babelrc (위 참조)가 있습니다. 이 구성은 @babel/preset-env 를 사용하고 루트 .browserslistrc (위 참조)를 사용하여 polyfill 사용량을 결정합니다. 앱의 메인 라인 브랜치에는 .storybook/.babelrc 가 없습니다.
• 우리는 내부 개발자 문서 용으로 만 스토리 북을 사용합니다. 조직은 주로 기본 브라우저로 chrome을 사용하기 때문에 polyfill이 필요하지 않습니다. 이 계시는 실제로 최종 해결책에 기여했습니다.
• 나는 _am_ 사용자 정의 스토리 북 웹팩 구성을 사용하지만 글꼴 / 이미지에 대한 추가 규칙을 추가하기 위해서만 사용됩니다. 나는 이 스토리 북 문제에 설명 된 이유로 .js 처리에 대한 핵심 규칙을 수정하려는 시도를 포기했습니다.
• 정적 스토리 북 사이트를 생성 할 때만이 문제가 발생합니다. 로컬 개발을 위해 포함 된 dev-server를 통해 실행하면 문제가 발생하지 않습니다.

조기 수정 시도

문제를 해결하려는 초기 시도의 대부분은 루트 .babelrc (위 참조)에서 옵션을 설정하여 바벨 ( build-storybook 도구로 실행 됨)과 의사 소통을 시도하고 원하는 방식으로 전달하는 것입니다. 발생하는 트랜스 파일. 다른 사용자가 제안한 useBuiltIns , sourceType 등의 구성이 성공하지 못했습니다. 또한 전체 clean-npm-cache-remove-node-modules-and-package-lock-then-npm-install 경로를 아무 소용이없이 시도했습니다 (그 _did_로 인해 deps의 일부 deps가 약간 변경 되더라도).

마지막 해결책

처음에는 사용자 정의 .storybook/.babelrc 사용하는 것을 주저했지만 옵션이 부족했습니다. 이전에 해당 파일을 만들고 extends 속성을 통해 루트 .babelrc 와 조화롭게 작동하도록 시도했지만 벽에 부딪 혔지만 다시 시도하기로 결정했습니다.

루트 바벨 구성을 스토리 북 특정 구성으로 간단하게 이동하면 정적 사이트 빌드가 성공적으로 완료 될 수 있었지만 여전히 잘못된 트랜스 파일을 나타내는 런타임 오류가있었습니다 (일부 가져 오기를 다시 내 보내면 해당 값이 undefined 최종 가져 오기가 저장되는 파일). 스토리 북에 폴리 필이 필요하지 않다는 것을 깨달았 기 때문에 새로운 .storybook/.babelrc 에서 @babel/preset-env 사전 설정을 모두 제거했습니다. HUZZAH, 문제가 해결되었습니다! 그러나 원래 구성은 앱에 유지되어야했기 때문에 이름을 .storybook/.babelrc-ci 하고 원래 루트 구성을 복원했습니다. 그런 다음 CI 파이프 라인을 업데이트하여 CI 구성을 확인하고 정적 사이트 빌드 전에 -ci 접미사를 잘라내도록 이름을 변경해야했지만 이는 사소한 일이었습니다.

문제에 대한 추측

이 프로세스로 인해 내 패키지와 잠금 파일을 자주 검사하게되었고, 스토리 북 v5.3.19와 모든 애드온이 corejs v3.xx, 기존 @babel/polyfill 및 다른 바벨에 대한 종속성이 있음을 발견했습니다. deps는 corejs v2.xx에 의존했습니다! 적어도 한 가지 문제는 v2의 가장 낮은 공통 분모를 사용하는 앱의 해결 방법이라고 생각합니다. 이것은 내가 경험 한 오류가 es.array.iterator 와 같은 모듈을 참조하고 v2는 es6.array.iterator 와 같은 모듈을 제공하기 때문에 의미가 있습니다. 이전 babel / corejs 구성을 지원하는 것을 목표로하는 경우 스토리 북 dep이 어떻게 충돌하는지 잘 모르겠지만 그럴 것 같습니다. 또한 / all storybook-babel / installed babel / storybook-corejs / installed-corejs가 기존 .babelrc 찾고 적용하는 방법에 대한 내용이 있어야합니다. 루트 구성을 스토리 북별 구성으로 이동하면 문제가 마법처럼 해결되는 이유가 궁금합니다. 아마도 경로? 🤷‍♂️

결론

이 모든 블레 더링 후에도 꼼짝도하지 않았다면 축하합니다! 😂

대체로이 문제를 해결하기 위해 뛰어 내려야하는 농구대에 감격하지는 않지만 아마도 내 상황은 다소 독특합니다. 또한 앞서 언급 한 바벨 / 웹팩 / 스토리 북 업그레이드가 합쳐진 후에는 모두 뜯어 낼 수있을 것입니다.

어쨌든 같은 문제로 고통받는 적어도 한 사람에게 이것이 흥미 로웠기를 바랍니다. 계속해서 @shilman 과 @ndelangen 이이 문제를 해결하는 데 투자 한 것처럼 하겠습니다 . 👋