Storybook: babel-loader가 create-react-app 2.1.3과 충돌합니다.

+1

CRA 앱에 babel-loader 를 설치하면 안 되나요?

babel-loader dep를 제거하면 스토리 북이 깨집니다 ... 😕

같은 문제가 있음 😕

같은 문제 ... 아직 해결 방법이 없습니까?

@ ayoola-moore 예, 해결 방법은 package.json 의 줄을 다음과 같이 변경하는 것입니다.

"babel-loader": "8.0.4"

이렇게하면 react-scripts 및 storybook 모두 작동합니다. 여전히 더 나은 솔루션을 찾고 있습니다. : 혼란 :

cc @artisologic @YoannDelpierre @ovionlogis @patricknick @mrmckeb @ivnkld @viniciusreiss @dlevs @Jipperism @euskonadox @fuadajip @AMTourky @greatermeans @tmeasday @ Eugene-Sviridov @nerfologist

@shilman , 나도 이것에 대해 생각하고 있습니다. 반응 스크립트에서 babel-loader 노출을 고려할 수 있습니다. chalk (https://github.com/facebook/create-react-app/pull/6150)에 대해 비슷한 일을 한 최근 PR이있었습니다.

또는 이것이 @storybook/react 의 종속성이라면 더 쉬울까요? 동료 의존성보다는. 그래도 비 CRA 사용자에게는 문제가 발생할 수 있음을 알고 있습니다.

또는 react-scripts 이 존재하면 babel-loader 에서 react-scripts/node_modules/babel-loader babel-loader 를 직접 가져올 수 있습니다. react-scripts 폴더에서 이미 구성을로드했습니다.

@ igor-dv @ndelangen @tmeasday @mrmckeb 가 위에 제시 한 옵션에 대한 의견이 있습니까? 이것이 우리가 CRA 사전 설정으로 처리 할 수있는 것입니까?

해결 방법이 작동하지 않는 것 같습니다. 해결 방법을 시도한 후에도 여전히 충돌이 발생합니다.

해결 방법이 작동하지 않는 것 같습니다. 해결 방법을 시도한 후에도 여전히 충돌이 발생합니다.

선행 "^"를 제거해야합니다. 그렇지 않으면 8.0.5가 표시됩니다.

나는 우리가 아마 필요가 있다고 생각 babel-loader 밖으로 whereever의 react-scripts 사용하여 발견 그것은 ( requireFrom 경우 또는이처럼 비록 react-scripts 그것을 수출이 더 쉽게 만들 것 ) CRA의 웹팩 구성을 사용하는 경우.

사전 설정은 더 좋게 만들 수 있지만 이미 CRA에 대한 특수 사례 코드 (구성 사용)가 있다고 생각하므로 여기서 수행하는 것이 비교적 쉬울까요?

해결 방법이 작동하지 않는 것 같습니다. 해결 방법을 시도한 후에도 여전히 충돌이 발생합니다.

선행 "^"를 제거해야합니다. 그렇지 않으면 8.0.5가 표시됩니다.

이것은 내 package.json에있는 것입니다. "babel-loader": "8.0.4"

해결을 위해 취해야 할 다른 단계가 있습니까?

@jlmelis , 어떤 버전의 "반응 스크립트"가 설치되어 있습니까? "반응 스크립트": "2.1.3"해결 방법이 제대로 작동하는 것 같습니다.

@vsubbotskyy -

나는 일에 대한 일을 할 수 있었다. 감사

주위를 둘러 보았고이 단계에서는 CRA의 로더에서 요구하는 것이 더 쉬울 것이라고 생각합니다 (CRA가 사용될 때). 지금 홍보하겠습니다.

@tmeasday , PR # 5308을 살펴보고 피드백을 제공 할 수 있다면 좋을 것입니다.

나는 같은 문제를 겪었고 마침내 수정했습니다. 내 package.json 파일에서 babel-loader를 다시 "8.0.4"로 변경하고 패키지 잠금 json 파일을 삭제해야했고 그 후 스토리 북으로 시작하고 테스트 할 수있었습니다. 도움이 되었기를 바랍니다.

"_ 내 package.json_에서 babel-loader를 다시"8.0.4 "로 변경했습니다."
이것이 해결책이 아니기를 바라며 반응 스크립트 업데이트를 차단하고 있기 때문에 곧 수정 될 것입니다.
감사

+1

죄송합니다. 저는 1.5 주 동안 활동을하지 않았고 이에 대한 리뷰를 추적하지 않았습니다. 지금하고 있습니다.

여전히 같은 문제가 있음

감사합니다 @oscargws , 우리는이 문제를 적극적으로 조사하고 @ndelangen , 그 PR을 살펴볼 수 있습니까?

@mrmckeb 아 아주 좋아요. 문제가있는 다른 사람을 위해 package.json에서 babel-loader 버전을 수동으로 변경하면 문제가 해결되었습니다!

아무도 정확히 거기에서 깨진 것을 알고 있습니까? 패치 버전 범프입니다. 이상하게 보입니다.

@ igor-dv, 문제는 CRA가 정확한 버전 일치를 기대한다는 것입니다. package.json 에 충돌하는 항목이 설치되어 있으면 오류가 발생합니다. 따라서 CRA가 한두 버전 (패치 버전이더라도)이되면 Storybook을 설치 한 후이 오류를 볼 수 있습니다.

여기서 해결책은 CRA로 작업 할 때 CRA 버전의 babel-loader 를 사용하여이 문제가 발생하지 않도록하는 것입니다.

다음 해결 방법이 저에게 효과적입니다.

package.json의 줄을 "babel-loader": "8.0.4" 변경하면 문제가 해결되는 것 같습니다.

이것에 대한 업데이트가 있습니까? "babel-loader": "8.0.4" 또는 다른 단계를 추가하여 해결할 수 없습니다.

이것에 대한 업데이트가 있습니까? "babel-loader": "8.0.4" 또는 다른 단계를 추가하여 해결할 수 없습니다.

babel-loader 8.0.4를 종속성 및 피어 종속성으로 추가하여 해결할 수있었습니다.

babel-loader 8.0.4를 종속성 및 피어 종속성으로 추가하여 해결할 수있었습니다.

Unfournatatley는 나를 위해 아닙니다. babel-loader": "8.0.5 를 요청합니다. 차이가 있는지 확실하지 않습니다. 또한 npm ls babel-loader 하면 다음과 같은 오류가 발생합니다.

├── [email protected] 
└─┬ [email protected]
  ├── [email protected]  deduped
  └─┬ [email protected]
    └── [email protected]

롤란도-Barbella은 통해 버전 핀 봅니다 @ resolution 에 package.json에 필드에 8.0.4

버전을 2.1.2 에서 2.1.5 한 다음 해결되었습니다.

예, 이것은 현재 @nguyentuandat에 대한 좋은 해결 방법이지만 제대로 처리하는 방법을 알아 내기 전까지는 일시적입니다.

반응 스크립트 업데이트가 저에게 효과적이었습니다 (thx, @nguyentuandat). 나는 2.1.1에 있었고 변경 로그의 지침으로 업데이트되었습니다.

yarn add --exact [email protected]

여기에서 모든 것을 시도한 후 해결책을 찾았습니다.

텍스트 편집기에서 .profile을여십시오 (홈 디렉토리에 숨겨져 있으므로 Ctrl + H를 누르십시오).

.profile 하단에이 줄을 붙여 넣으세요.

export PATH = $ HOME / .node_modules_global / bin : $ PATH

그리고 Voila .... 작동합니다

"react-scripts": "2.1.8" 및 storybook v5를 사용하면 동일한 오류가 발생합니다.
수동으로 추가, 다른 사람에 의해 언급 한 바와 같이 "babel-loader": "8.0.4" 로 devDependency 그것을 해결했습니다.

"@storybook/react": "^4.1.4", 사용하여 "react-scripts": "2.1.5", 및 "@storybook/react": "^4.1.4", Yarn .

The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.0.5"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree: babel-loader (version: 8.0.4)

npm ls babel-loader 실행하면 다음이 발생합니다.
├─┬ UNMET DEPENDENCY [email protected]
│ └── UNMET DEPENDENCY [email protected]
└─┬ UNMET DEPENDENCY [email protected]
└── UNMET DEPENDENCY [email protected]

babel-loader 이 내 package.json에 없습니다. 8.0.4 버전을 devDependency로 추가해도 문제가 해결되지 않습니다.

npm i 가 예상대로 작동합니다. 그러나 npm start 시도 할 때 동일한 문제를 찾습니다.

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.0.5"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:
.../node_modules/babel-loader (version: 8.0.4)

좋은 졸리 !! 방금이 문제를 참조하는 PR # 5308이 포함 된 https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.25 를 릴리스했습니다. 지금 업그레이드하여 사용해보세요!

출시 전 버전이므로 @next NPM 태그에서 찾을 수 있습니다.

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

방금 최신 베타 빌드를 시도했습니다. [email protected] 와 함께 스토리 북을 사용하고 있으며 여기에 설명 된 Typescript 설정 : https://storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

요구 사항이 CRA babel-loader를 찾을 수 없기 때문에 이것은 실패합니다. 이에 대한 해결책이 이미 있습니까?

@mrmckeb 는

방금 최신 베타 빌드를 시도했습니다. [email protected] 와 함께 스토리 북을 사용하고 있으며 여기에 설명 된 Typescript 설정 : https://storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

요구 사항이 CRA babel-loader를 찾을 수 없기 때문에 이것은 실패합니다. 이에 대한 해결책이 이미 있습니까?

예, "react-scripts": "3.0.1" 에서도 같은 문제가 발생했습니다.

이것은 코드베이스에 스토리 북을 추가 한 후 얻은 것입니다.

* The react-scripts package provided by Create React App requires a dependency:

  "babel-jest": "24.7.1"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-jest was detected higher up in the tree:

  /xxx/node_modules/babel-jest (version: 24.8.0) 

• devDependencies

"typescript": "3.4.5",
"@storybook/react": "^5.0.11",
"@storybook/addon-actions": "^5.0.11",
"@storybook/addon-links": "^5.0.11",
"@storybook/addons": "^5.0.11",
"@babel/core": "^7.4.4",
"babel-loader": "^8.0.6"

• npm ls babel-jest

└─┬ [email protected]
  ├── [email protected] 
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └── [email protected] 

안녕하세요 @patricknick 및 @wxqee , CRA를 사용하는 경우 사용자 정의 구성이 없어야합니다. :) TypeScript는 기본적으로 작동합니다. 새로 설치하고 사용자 지정 구성없이 사용해보고 작동하지 않는 경우 알려주세요.

@shilman- 아마도 이것을 반영하기 위해 문서를 업데이트해야할까요?

babel-jest 문제는 최신 버전의 CRA @ummahusla 에서 해결되어야합니다. 그렇지 않은 경우 https://github.com/facebook/create-react-app/issues 에서 문제를 제기

안녕하세요 @mrmckeb , 도와 주셔서 감사합니다! 방금 솔루션을 시도하고 사용자 지정 webpack.config.js를 제거했습니다.

// @ts-check

module.exports = ({ config, mode }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [['react-app', { flow: false, typescript: true }]],
    },
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

불행히도 이로 인해 다음 오류가 발생합니다.

ERROR in ./.storybook/config.tsx 22:32
Module parse failed: Unexpected token (22:32)
You may need an appropriate loader to handle this file type.
 addDecorator(story => {
   const DefaultRoute = props => <div id="router">{story()}</div>;
   return (
    <BrowserRouter>

이것은 내 config.tsx입니다.

import { withOptions } from '@storybook/addon-options';
import { addDecorator, configure } from '@storybook/react';
import { Grommet } from 'grommet';
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import GlobalStyle from '../src/globalStyles';
import '../src/i18n';
import { theme } from '../src/theme/index';

// automatically import all files ending in *.stories.tsx
const req = require.context('../src', true, /\.stories\.tsx$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

withOptions({
  addonPanelInRight: true,
});

addDecorator(story => {
  const DefaultRoute = props => <div id="router">{story()}</div>;
  return (
    <BrowserRouter>
      <DefaultRoute default />
    </BrowserRouter>
  );
});
addDecorator(story => (
  <>
    <GlobalStyle />
    {story()}
  </>
));
addDecorator(story => <Grommet theme={theme}>{story()}</Grommet>);

configure(loadStories, module);

이것에 대한 힌트를 줄 수 있습니까? 감사!

같은 문제가 발생합니다. JSX 파싱하는 것은 매우 불행한 것 같습니다.

@mrmckeb 방금 @storybook/preset-typescript 릴리스했고 어쨌든 typescript 문서를 업데이트해야합니다. Typescript 및 CRA에 대해 내가 말해야 할 내용을 알려 주시면 업데이트에 적용하게되어 기쁩니다. 감사! 🙇

감사합니다 @shilman. CRA 사전 설정은 내부적으로 CRA 구성을 사용하므로 CRA가 수행 할 수있는 모든 작업 (TypeScript, CSS 모듈, Sass 등)을 지원합니다. 기본적으로이 기능이 작동하는 데 필요한 것은 없습니다. 설치하고 이동하면됩니다!

언급 한대로 위의 babel-loader 문제가 발생했으며 Storybook 설정을 추가하면 내 CRA가 폭발했습니다. @storybook/[email protected] 릴리스를 설치했습니다. 스토리 북이 빌드되고 실행되지만 내 스토리 / 구성 요소가 UI에 채워지지 않습니다. 그리고 stdout 내 모든 이야기가 이러한 경고를 던지고 있습니다.

WARNING in ./stories/core.stories.js
Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: /project-ui/stories/core.stories.js: Unexpected token (14:47)
  13 | storiesOf('core/component', module)
> 14 |   .add('standard text', () => <Component block={FIXTURE} />)

다른 변형을 시도했지만 작동하지 않습니다 ...

const FIXTURE = {..some-data...}

storiesOf('core/component', module)
   .add('standard text', () => (<Component block={FIXTURE} />))

5.0.11 되 돌리면 Storybook 빌드에서 다시 작동하며 더 이상 경고를 표시하지 않습니다. 그리고 내 CRA가 다시 작동합니다. 업그레이드 경로를 위해 다른 작업을 수행해야합니까? 어제 너무 새로운 프로젝트의 스토리 북을 설정하십시오.

지금은 다시 작동하지만 5.1.x 릴리스와 관련하여 내 환경 상태에 대해 걱정하십시오.

다른 사람이 나와 같은 상황에 처하게 될 경우를 대비해 : 저는 평생 동안 Storybooks + CRA 통합 기능을 사용할 수 없었습니다. 여기서 Storybooks는 CRA의 빌드 설정을 사용합니다. 그러나 나는 내 이야기를 내 CRA 프로젝트의 src/ 디렉토리로 옮기려고했지만 갑자기 작동했습니다. 나는 이유를 모르거나 그것이 권장되거나 요구되었는지는 모르지만 이것은 나를 위해 해결되었습니다.

새로운 CRA 타이프 스크립트 앱에서도이 문제가 발생합니다. 마스터 및 스토리 북 5.0.11의 최신 CRA

@revmischa 당신의 이야기는 src/ 입니까?

예 @shilman- 기본적으로 CRA를 실행하고 sb init : https://github.com/jetbridge/create-react-app/pull/1/files#diff -0ae46a2383dedcac5f5e369f5ca5f169R35

이야기는 src / 안에 있습니다.

=> Found "[email protected]"
info Has been hoisted to "babel-loader"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "92KB"
info Disk size with unique dependencies: "520KB"
info Disk size with transitive dependencies: "1.28MB"
info Number of shared dependencies: 18
=> Found "jetbridge-react-scripts#[email protected]"
info This module exists because "jetbridge-react-scripts" depends on it.
info Disk size without dependencies: "76KB"
info Disk size with unique dependencies: "536KB"
info Disk size with transitive dependencies: "2.4MB"
info Number of shared dependencies: 29
=> Found "babel-preset-react-app#[email protected]"
info This module exists because "@storybook#react#babel-preset-react-app" depends on it.
info Disk size without dependencies: "1020KB"
info Disk size with unique dependencies: "1.45MB"
info Disk size with transitive dependencies: "3.32MB"
info Number of shared dependencies: 29

devDependencies에서 제거하면 :

=> Found "[email protected]"
info Reasons this module exists
   - "jetbridge-react-scripts" depends on it
   - Hoisted from "jetbridge-react-scripts#babel-loader"
   - Hoisted from "@storybook#react#babel-preset-react-app#babel-loader"
info Disk size without dependencies: "92KB"
info Disk size with unique dependencies: "552KB"
info Disk size with transitive dependencies: "2.41MB"
info Number of shared dependencies: 29

둘러싼 폴더의 프로젝트에 다른 버전이있는 것 같습니다.

모든 스토리를 ./stories/* 에서 ./src/stories/* 하고 .storybook/config.js 업데이트했으며 이제 @storybook/[email protected] 로 작업이 진행됩니다. 요 전에 이것을 설정 한 후 React 대한 문서 / 설정 가이드는 새로운 CRA 설정을 사용하는 사람들을 위해 최신 버전이 아닙니다.

그렇지 않으면 문제가 해결 된 것처럼 보입니다 👍

안녕하세요, 예, babel-loader 을 (를) 제거하고 다른 곳에 나열되어 있는지 빠르게 확인하십시오.

원하는 경우 해당 검사를 건너 뛰도록 CRA에 지시 할 수도 있지만 안전을 위해 거기에 있습니다.

@ storybook / react 5.0.11 및 master의 최신 create-react-app에서 여전히이 문제가 발생합니다.
문제는 CRA가 babel-loader 8.0.5를 원하고 sb init 실행하면 내 packages.json에 "babel-loader": "^8.0.6" 된다는 것입니다.
그렇다면 babel-loader CRA가 이미 필요한 것을 감지하고 추가하는 것은 어떻습니까? 또는 CRA가 감지되면 sb init의 package.json에 babel-loader 추가를 건너 뛰시겠습니까? 스토리 북과 CRA간에 정확한 두 버전을 동기화 상태로 유지하는 것은이 문제의 역사를 기반으로 할 때 해결책이 아닙니다.

정말 도움이 필요합니다.

나는 모든 것을 시도하지만 모든 것을 시도합니다.

`프로젝트 의존성 트리에 문제가있을 수 있습니다.
Create React App의 버그는 아니지만 로컬에서 수정해야하는 문제입니다.

Create React App에서 제공하는 react-scripts 패키지에는 종속성이 필요합니다.

"babel-loader": "8.0.5"

수동으로 설치하지 마십시오. 패키지 관리자가 자동으로 설치합니다.
그러나 다른 버전의 babel-loader가 트리에서 더 높은 곳에서 감지되었습니다.

c : \ Users \ Z-Dranode_modulesbabel-loader (버전 : 8.0.6)

호환되지 않는 버전을 수동으로 설치하면 디버그하기 어려운 문제가 발생하는 것으로 알려져 있습니다.

이 검사를 무시하려면 프로젝트의 .env 파일에 SKIP_PREFLIGHT_CHECK = true를 추가하십시오.
이 메시지는 영구적으로 비활성화되지만 다른 문제가 발생할 수 있습니다.

종속성 트리를 수정하려면 아래 단계를 정확한 순서대로 수행하십시오.

1. 프로젝트 폴더에서 package-lock.json (package.json이 아님) 및 / 또는 yarn.lock을 삭제하십시오.
2. 프로젝트 폴더에서 node_modules를 삭제하십시오.
3. 프로젝트 폴더의 package.json 파일에있는 종속성 및 / 또는 devDependencies에서 "babel-loader"를 제거하십시오.
4. 사용하는 패키지 관리자에 따라 npm install 또는 yarn을 실행하십시오.

대부분의 경우 이것은 문제를 해결하기에 충분합니다.
이것이 도움이되지 않았다면 시도해 볼 수있는 몇 가지 다른 방법이 있습니다.

1. npm을 사용했다면 yarn (http://yarnpkg.com/)을 설치하고 대신 위 단계를 반복합니다.
   npm에는 향후 버전에서 해결 될 수있는 패키지 호이 스팅 관련 알려진 문제가 있기 때문에 도움이 될 수 있습니다.

2. c : \ Users \ Z-Dranode_modulesbabel-loader가 프로젝트 디렉토리 외부에 있는지 확인하십시오.
   예를 들어 실수로 홈 폴더에 무언가를 설치했을 수 있습니다.

3. 프로젝트 폴더에서 npm ls babel-loader를 실행 해보십시오.
   이것은 babel-loader를 설치 한 다른 패키지 (예상되는 반응 스크립트와는 별도로)를 알려줍니다.

도움이되지 않으면 프로젝트의 .env 파일에 SKIP_PREFLIGHT_CHECK = true를 추가하십시오.
그래도 계속 진행하려는 경우이 프리 플라이트 검사를 영구적으로 비활성화합니다.

추신 :이 메시지가 길다는 것을 알고 있지만 위의 단계를 읽으십시오. :-) 도움이 되었기를 바랍니다.

npm 오류! 코드 ELIFECYCLE
npm 오류! 오류 번호 1
npm 오류! [email protected] 시작 : react-scripts start
npm 오류! 종료 상태 1
npm 오류!
npm 오류! [email protected] 시작 스크립트에서 실패했습니다.
npm 오류! 이것은 아마도 npm의 문제가 아닙니다. 위의 추가 로깅 출력이있을 수 있습니다.

npm 오류! 이 실행의 전체 로그는 다음에서 찾을 수 있습니다.
npm 오류! C : \ Users \ Z-DraAppData \ Roamingnpm-cache_logs \ 2019-05-29T12_53_58_726Z-debug.log`

누군가 나를 도울 수 있습니까?

내 홈 디렉토리 /home/user/node_modules 에 전역 적으로 babel-loader 8.0.6 설치되어 있으므로 프로젝트 디렉토리 아래에 babel-loader 8.0.5가 설치되어 있으므로 내 집에서 npm remove babel-loader 를 제거합니다. directory (8.0.6), 모두 잘 작동합니다.

이건 멍청한 질문이지만 ...
타이프 스크립트를 사용하는 경우 바벨이 필요한 것은 무엇입니까?

감사합니다 @shilman , 그러나 사전 릴리스는 babel-loader 문제를 해결하지 않는 것 같습니다.

취한 조치 :

1. 최신 Typescript 버전을 설치하십시오. npx create-react-app my-app --typescript 를 통한 CRA (반응 스크립트 3.0.1)
2. npx -p @storybook/cli sb init --type react
3. https://storybook.js.org/docs/configurations/typescript-config/ 및 demo https://github.com/johot/storybook4-cra2-typescript-react-docgen-typescript-demo의 지침을 사용하여 TS 용 스토리 북 구성 (참고 : 데모의 webpack.config.js는 오래되었으며 여기에서 수정되었습니다 : https://github.com/storybookjs/storybook/issues/5877#issuecomment-470186882)
4. yarn.lock 및 노드 모듈 폴더를 삭제합니다.
5. package.json에서 @babel/core 및 babel-loader dev 종속성 제거
6. yarn add -D @storybook/react@next
7. yarn
8. yarn storybook -오류 : Cannot find module 'babel-loader'

Package.json deps :

  "dependencies": {
    "@types/jest": "24.0.13",
    "@types/node": "12.0.4",
    "@types/react": "16.8.19",
    "@types/react-dom": "16.8.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "styled-components": "^4.2.1",
    "typescript": "3.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5", // I added this back the first time I got babel-loader missing error, but this still doesn't solve it.
    "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-info": "^5.0.11",
    "@storybook/addon-links": "^5.0.11",
    "@storybook/addons": "^5.0.11",
    "@storybook/react": "^5.1.0-rc.3",
    "@testing-library/react": "^8.0.1",
    "@types/storybook__addon-actions": "^3.4.2",
    "@types/storybook__addon-info": "^4.1.1",
    "@types/storybook__addon-links": "^3.3.4",
    "@types/storybook__addons": "^4.1.0",
    "@types/storybook__react": "^4.0.1",
    "husky": "^2.3.0",
    "jest-dom": "^3.4.0",
    "lint-staged": "^8.1.7",
    "prettier": "^1.17.1",
    "react-docgen-typescript-loader": "^3.1.0"
  },

Typescript없는 기본 설정은 나에게도 작동하지 않습니다.

1. npx create-react-app my-app
2. cd my-app
3. npx -p @storybook/cli sb init --type react

CRA는 "babel-loader": "8.0.5" 예상하지만 8.0.6 찾습니다. 그러나 나열된 devDependencies에 따라 생성 된 packages.json hsa :

  "devDependencies": {
    "@storybook/react": "^5.0.11",
    "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-links": "^5.0.11",
    "@storybook/addons": "^5.0.11",
    "@babel/core": "^7.4.5",
    "babel-loader": "^8.0.6"
  }

버전을 "babel-loader": "8.0.5" 설정하면이 문제가 해결됩니다.

또한 CRA (3.0.1)가 "webpack": "4.29.6" 예상하지만 4.32.2 찾는 다른 프로젝트에서도 비슷한 문제가 있습니다. package.json 내부의 dependentecird에 정의되어 있지 않습니다.
npm ls webpack 프로그램 :

+-- @storybook/[email protected]
| +-- @storybook/[email protected]
| | `-- [email protected]  deduped
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
`-- [email protected]
  `-- [email protected]  deduped

[email protected] 은 최신 버전의 웹팩을 제공하지만 CRA는 이전 버전을 원합니다.
종속성에 [email protected] 을 추가하면 문제가 해결됩니다. 이것이 동화책의 문제인지 확실하지 않습니다.

@vipyoshi 몇 가지 의견 :

• --type react 통과하면 안됩니다. 대신 CRA 템플릿을 사용합니다.
• 이 문제는 최신 버전 @storybook/cli@next 에서 수정되었으며 다음 24 시간 내에 안정적으로 출시됩니다.

TypeScript를 사용하는 경우 왜 바벨이 필요합니까?

@shilman @mrmckeb 최신 버전 :

"@storybook/addon-actions": "^5.1.1",
"@storybook/addon-links": "^5.1.1",
"@storybook/addons": "^5.1.1",
"@storybook/react": "^5.1.1",

JSX 구문이 .storybooks/config.js 에서 변환되지 않고 start-storybook 가 구문 오류 (처음 < )와 함께 실패합니다.

babel-loader를 설치했지만 CRA와 동기화 된 버전을 사용하는 이전 해결 방법을 사용하면 정상적으로 작동합니다.

CRA가 모든 폴더가 아닌 일부 폴더에서 babel-preset-react 를 사용하는지 확인하려고했지만 아무데도 얻지 못했습니다.

컨텍스트를 위해 CRA 3.0.1을 사용하고 있으며 꺼내지 않았습니다.

다른 문제가있을 수 있습니까 (하나를 열어야 함)?
내가 어떻게 도움이 될 수 있습니다?

_{추신 : 저는 글로벌 스타일 btw에 데코레이터를 사용하고 있습니다.}

JSX 구문은 .storybooks / config.js에서 변환되지 않으며 start-storybook이 구문 오류 (첫 번째 <)와 함께 실패합니다.

@ rlecaro2 여기에 똑같은 문제가 있습니다!

ERROR in ./.storybook/config.js
Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/.../Documents/pro/workshop/workshop-atomic-design/.storybook/config.js: Unexpected token (9:34)

>  9 | const themeDecorator = storyFn => <ThemeProvider theme={Theme}>{ storyFn() }</ThemeProvider>
     |                                   ^
  10 | addDecorator(themeDecorator);
  11 | configure(loadStories, module);

(devDependencies에서 babel-loader를 v8.0.5 로 선언하면이 문제도 해결됩니다)

@revmischa Babel은

@ rlecaro2 및 @Akaryatrh , 몇 달 전에 변경 한 사항이 있습니다. 최신 Storybook 릴리스에서는 babel-loader가 CRA와 함께 설치되지 않고 대신 CRA 내에서 발견됩니다.

내가 이해했듯이 .storybook 내의 파일이 올바르게 처리되지 않는다는 사실을 제외하고는 전혀 문제가 없습니다. 이는 Create React App의 구성이 소스 외부의 파일을 무시하기 때문입니다.

우리는 내부 타이프 수 있도록 작은 변화를 만들어 .storybook 디렉토리 여기 및 설정의 나머지 부분에 대한 동일한 기능을 수행 할 수 있습니다. 나는 당신이 TypeScript를 사용하지 않는다고 가정하고 그 수정이 당신을 위해 작동하지 않은 이유입니다.

devDependencies 수정이 작동하는 이유가 약간 혼란 스럽습니다. 또한 조사가 필요하다고 생각합니다.

또한 이것은 위와 관련이없는 새로운 문제입니다. 여기 댓글이 모든 사용자에게 경고하므로 여기에 새 티켓을 만들었습니다 : # 7201. 거기에 세부 사항을 추가하십시오.

큰! 개발자 종속성이 작동하도록 만드는 원인을 파악하려고 노력할 것입니다. 다른 사람에게만 문제는 # 7201 (사소한 오타)입니다.

뿡뿡

예, 그것은 단지 어리석은 생각입니다.

내 폴더의 또 다른 노드 모듈입니다.

이것은 여전히 ​​나를 위해 작동하지 않습니다.이 문제를 여러 번 보았지만 확실한 수정 / 업그레이드 경로 또는 수정 방법에 대한 지침을 찾지 못하는 것 같습니다.

참고로 @mrmckeb 에서 제공하는 CRA 지원에 대한 게임 변경 작업이 있습니다.이 문제에 대한 추론을 훨씬 쉽게 만들 수 있기를 바랍니다.

나는 또한 같은 문제에 직면하고 또한 그것을 고쳤다. 내 프로젝트 이름은 'idash2'이고 여기에 설치합니다.

코드 / 웹 / 프런트 엔드 / idash2

하지만 문제는 실수 로이 디렉토리에 node_modules를 설치했다는 것입니다.

코드 / 웹 / 프런트 엔드

code / web / frontend / node_modules를 제거하고 react app을 다시 설치하면 문제가 해결되었습니다.

이 솔루션에 대한 크레딧 : Parinya Onsuwan

동일한 문제가 발생하고 아무 것도 작동하지 않는 것 같습니다.이 문제에 대한 영구적 인 작동 솔루션이 있습니까?

@isenese 나는 이것이 https://www.npmjs.com/package/@storybook/preset -create-react-app의 일부라고 생각하거나 곧 될 것입니다

@isenese , 최근에 활동을

이 문제는 Storybook의 새 버전에서 해결되었거나 적어도 해결되어야합니다. 그래도 문제가 발생하면 버전 세부 정보를 제공해 주시면 도움을 드릴 수 있습니다.

안녕하세요, 저는 CRA 사용자이며 React 문서에 설명 된 다음 명령으로 스토리 북을 초기화 할 때이 문제에 직면했습니다.

npx -p @storybook/cli sb init --type react

그런 다음 다음과 같이 초기화하여 문제를 해결했습니다.

npx -p @storybook/cli sb init --type react_scripts

(그리고 --type 옵션이없는 자동 감지도 성공했습니다. 멋지네요!)

나는 이것이 문서가 부족하고 그런 종류의 실수를 할 수 있다고 생각합니다.
--type react_scripts 에 대한 설명 을 React 용 Storybook 페이지에 추가하거나 CRA에 대한 별도의 자습서를 만드십시오.

감사!

또한 CRA에 대한 기본 제공 사전 설정을 대체 할 새로운 CRA 사전 설정을 시험하고 있습니다. 이렇게하면 향후 설정이 더 쉬워집니다.

안녕하세요, 저는 CRA 사용자이며 React 문서에 설명 된 다음 명령으로 스토리 북을 초기화 할 때이 문제에 직면했습니다.

npx -p @storybook/cli sb init --type react

그런 다음 다음과 같이 초기화하여 문제를 해결했습니다.

npx -p @storybook/cli sb init --type react_scripts

(그리고 --type 옵션이없는 자동 감지도 성공했습니다. 멋지네요!)

나는 이것이 문서가 부족하고 그런 종류의 실수를 할 수 있다고 생각합니다.
--type react_scripts 에 대한 설명 을 React 용 Storybook 페이지에 추가하거나 CRA에 대한 별도의 자습서를 만드십시오.

감사!

정말 고맙습니다! 나는 이것으로 바나나를 먹고 있었다.

감사합니다. 문서를 업데이트하기 위해 메모를 작성하겠습니다.

@mrmckeb는 여전히 같은 문제 (CRA 3.3 + Storybook 5.2.8)에 직면 해 있으며 문서에서 react_scripts 플래그에 대한 문서를 찾을 수 없습니다. GH 문제를 통해 이것을 찾으십시오 ... 🎉

@aericson , 불편을 끼쳐 드려 죄송합니다. 오늘 볼게요.

이것은 고급 구성에 있습니다. 그것은 말한다 :

우리의 빠른 시작 가이드를 사용하여 Storybook 용 프로젝트를 설정하려고했을 수 있습니다. React를 사용하고 있다는 것을 감지 할 수 없어 실패했다면 React를 사용하도록 강제 할 수 있습니다.

CRA도 언급하도록 업데이트하겠습니다.

@mrmckeb 나는 그것이 단지 찾는 것에 관한 것이라고 생각합니다.

npx -p @storybook/cli sb init --type react

하지만

npx -p @storybook/cli sb init --type react_scripts

문서에서 다음을 볼 때 :

• https://storybook.js.org/docs/guides/quick-start-guide/
• https://storybook.js.org/docs/guides/guide-react/

따라서 CRA 저장소가있을 때 --type react 를 사용하여 모든 것을 올바르게 수행하고 있다고 생각합니다.

--type react 를 사용하면 Cannot find module 'babel-jest' 오류가 발생했습니다. --type react_scripts 이 (가) 즉시 작동합니다.

이해했으며 이제 문서가 @pkyeck 업데이트

전반적으로 문서의 그 부분이 더 명확해야한다고 생각합니다 ... # 9182의 개정이 있기를 바랍니다. @shilman 은 곧 출시 될 것이라고 생각합니다.

package.json에 babel-loader가 있으면 애플리케이션을 빌드 할 수 없습니다. 내가 얻은 최고의 솔루션은 다음과 같습니다.
`

"devDependencies": {
"@ babel / core": "^ 7.12.3",
"@ storybook / addon-actions": "^ 6.0.28",
"@ storybook / addon-essentials": "^ 6.0.28",
"@ storybook / addon-links": "^ 6.0.28",
"@ storybook / node-logger": "^ 6.0.28",
"@ storybook / preset-create-react-app": "^ 3.1.5",
"@ storybook / react": "^ 6.0.28",
"@ testing-library / dom": "^ 7.26.5",
"@ testing-library / react-hooks": "^ 3.4.2",
"@ types / react": "^ 16.9.56",
"@ types / react-dom": "^ 16.9.9",
"@ types / styled-components": "^ 5.1.4",
"babel-loader": "8.1.0",
"babel-eslint": "^ 10.1.0",
"eslint-config-prettier": "^ 6.14.0",
"eslint-config-react-app": "^ 5.2.1",
"eslint-import-resolver-typescript": "^ 2.3.0",
"eslint-plugin-flowtype": "^ 4.7.0",
"eslint-plugin-import": "^ 2.22.1",
"eslint-plugin-jsx-a11y": "^ 6.3.1",
"eslint-plugin-prettier": "^ 3.1.4",
"eslint-plugin-react": "^ 7.21.5",
"eslint-plugin-react-hooks": "^ 4.2.0",
"jest-environment-jsdom-sixteen": "^ 1.0.3",
"jest-styled-components": "^ 7.0.3",
"json-server": "^ 0.16.2",
"msw": "^ 0.21.3",
"예뻐": "^ 2.1.2",
"react-docgen-typescript-plugin": "^ 0.6.0",
"반응": "^ 17.0.1",
"react-test-renderer": "^ 17.0.1"
},
"해결책": {
" / react-scripts / / babel-loader": "^ 8.1.0"
}

`

babel-loader의 동일한 lib를 사용하는 attibute 해상도.

이것이 creat-react-app 및 스토리 북의 최신 버전에서 여전히 문제인지 확인합니다.

편집 : create-react-app은 node_modules의 잘못된 babel-loader 버전에 대해 불평합니다. CRA에 필요한 버전 인 yarn add -D --exact [email protected] 사용하여 문제를 해결할 수있었습니다.

이 문제가 발생하고 있음을 확인할 수 있습니다.이 문제를 다시 열 수 있습니까? 내 자신을 사용하지 않는다면 패키지에 babel-loader를 포함하고 싶지 않습니까?
그래도 @DylanCulfogienis 수정이 작동하는지 확인할 수 있습니다!

우리는 더 이상 babel-loader를 CRA 앱에 설치하지 않으므로 @eglavin 문제를 다시 열 필요가 없다고 생각합니다.

새로 설치해도 여전히 실패합니까?

여기에 같은 문제

우리는 더 이상 babel-loader를 CRA 앱에 설치하지 않으므로 @eglavin 문제를 다시 열 필요가 없다고 생각합니다.

새로 설치해도 여전히 실패합니까?

여기서도 같은 문제입니다. 앱이 스토리 북으로 실행되어야하는 경우에도 babel-loader 를 포함해야합니다.

Babel-loader는 이미 CRA에 포함되어 있으며 스토리 북은 그 중 하나만 사용할 수 있습니다. 아니?

이것은 최신 CRA / SB 버전 (이 문서 작성 당시 각각 4.0.1 및 6.1.18)의 새로 설치에 대한 문제입니다.

또한 SB v6.1과 함께 CRA v4를 설치할 때 다음과 같은 문제가 발생했습니다.

동일한 문제 : React 4.0.1 및

yarn install @storybook/react 

front  | There might be a problem with the project dependency tree.
front  | It is likely not a bug in Create React App, but something you need to fix locally.
front  | The react-scripts package provided by Create React App requires a dependency:
front  |   "babel-loader": "8.1.0"
front  | Don't try to install it manually: your package manager does it automatically.
front  | However, a different version of babel-loader was detected higher up in the tree:
front  |   /path/to/front/node_modules/babel-loader (version: 8.2.2) 

추신 : 우리는 같은 문제의 다른 버전과 관련된 새로운 문제를 열어야합니까?

@DylanCulfogienis 감사 yarn add -D --exact [email protected] 작동했습니다!

Monorepo가 ​​있고 위와 같이 babel-loader 을 React web 패키지에 추가했습니다 (8.1.0). babel-loader 오류를 해결했지만 새로운 오류가 생성되었습니다.

../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2982,14): error TS2300: Duplicate identifier 'LibraryManagedAttributes'.
../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2995,13): error TS2717: Subsequent property declarations must have the same type.  Property 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2996,13): error TS2717: Subsequent property declarations must have the same type.  Property 'abbr' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2997,13): error TS2717: Subsequent property declarations must have the same type.  Property 'address' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.

@types/react-dom 버전을 "17.0.0"으로 업그레이드하여이 문제를 해결할 수있었습니다.

@DylanCulfogienis 솔루션은 반나절 전투 후 나 정리 된

# Create project
npx create-react-app my-project
cd my-project

# Add Storybook:
npx -p @storybook/cli sb init

# Update Storybook
npx sb<strong i="8">@next</strong> upgrade --prerelease

# Fix babel error
yarn add -D --exact [email protected]

# Start app
yarn start

# Start Storybook
yarn storybook

# 4764에 복제