Storybook: babel-loaderがcreate-react-app2.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 、私もこれについて考えています。 react-scriptsからbabel-loaderを公​​開することを検討できます...それは役立つかもしれません。 chalk （https://github.com/facebook/create-react-app/pull/6150）で同様のことをした最近のPRがありました。

あるいは、これが@storybook/react依存関係である場合、より簡単でしょうか？ ピア依存ではなく。 ただし、CRA以外のユーザーには問題が発生する可能性があることを認識しています。

または、 react-scriptsが存在する場合、 react-scripts/node_modules/babel-loaderからbabel-loaderを直接インポートすることもできます。 react-scriptsフォルダーから構成を既にロードしています。

@イゴール-DV @ndelangen @tmeasday @mrmckebが上にレイアウトしたことのオプション上の任意の意見？ これはCRAプリセットで処理できるものですか？

回避策は私にはうまくいかないようです。 回避策を試した後も、競合が発生します。

回避策は私にはうまくいかないようです。 回避策を試した後も、競合が発生します。

先頭の「^」を必ず削除してください。削除しないと、8.0.5が表示されます。

react-scriptsが見つけた場所からbabel-loader必要になる可能性があると思います（ react-scriptsエクスポートした場合は簡単になりますが、 requireFromなどを使用します） ）CRAのwebpack構成を使用している場合。

プリセットはそれをより良くするでしょうが、私たちはすでにCRAの特別なケースコードを持っていると思います（それの構成を使用するために）ので、おそらくそこでこれを行うのは比較的簡単でしょうか？

回避策は私にはうまくいかないようです。 回避策を試した後も、競合が発生します。

先頭の「^」を必ず削除してください。削除しないと、8.0.5が表示されます。

これは私のpackage.jsonにあるものです： "babel-loader"： "8.0.4"

回避策のために実行する必要がある他の手順はありますか？

@jlmelis 、どのバージョンの「react-scripts」がインストールされていますか？ 「react-scripts」の場合：「2.1.3」の回避策は正常に機能しているようです。

@ vsubbotskyy -npxでcreate-react-appを実行しています。 表示されるバージョンは2.1.3です。 おそらく他の何かが私のセットアップで厄介です。 修正が行われるかどうかを確認するために、これを監視します。 ありがとう！

私は仕事を回避することができました。 ありがとう

周りを見回しましたが、この段階では、CRAからローダーに要求する方が簡単だと思います（CRAを使用する場合）。 今からPRをします。

@ tmeasday 、PR＃5308を寄せいただければ幸いです。

私は同じ問題を経験し、最終的にそれを修正しました。 package.jsonファイルでbabel-loaderを「8.0.4」に戻し、package-lock jsonファイルを削除する必要がありました。その後、ストーリーブックを起動してテストすることができました。 これがお役に立てば幸いです。

"_package.json_でbabel-loaderを" 8.0.4 "に戻しました。"
それが解決策ではなく、react-scriptsの更新をブロックしているため、すぐに修正されることを願っています：/
ありがとう

+1

申し訳ありませんが、私は1.5週間活動を停止し、これに関するレビューを追跡しませんでした。 今そうしています。

まだ同じ問題があります

@oscargwsに感謝し@ndelangen 、そのPRを見ていただけますか？

@mrmckebああとてもいい。 問題を抱えている他の人のために、package.jsonのbabel-loaderバージョンを手動で変更することで修正されました！

誰かがそこで何が正確に壊れているか知っていますか？ それはパッチバージョンのバンプです、私には奇妙に思えます。

@ igor-dv、問題は、CRAが完全なバージョン一致を期待していることです-競合する何かがpackage.jsonインストールされると、エラーがスローされます。 したがって、CRAがバージョンまたは2つ遅れている場合はいつでも（パッチバージョンであっても）、ユーザーはStorybookのインストール後にこのエラーを確認できます。

ここでの解決策は、CRAを使用するときにCRAのバージョンのbabel-loaderを使用して、この問題が発生しないようにすることです。

次の回避策は私のために働きます：

package.jsonの行を"babel-loader": "8.0.4"と、修正されるようです。

これに関する更新はありますか？ "babel-loader": "8.0.4"または他のステップを追加するだけでは解決できません

これに関する更新はありますか？ "babel-loader": "8.0.4"または他のステップを追加するだけでは解決できません

依存関係とピア依存関係の両方としてbabel-loader8.0.4を追加することで、これを解決することができました。

依存関係とピア依存関係の両方としてbabel-loader8.0.4を追加することで、これを解決することができました。

Unfournatatleyは私には向いていません、私はbabel-loader": "8.0.5を要求していますが、それが違いを生むかどうかはわかりません。また、 npm ls babel-loaderを実行すると、次のようになります。

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

@ Rolando-Barbella package.jsonのresolutionフィールドから8.0.4バージョンを固定してみてください

バージョンを2.1.2から2.1.5に変更したところ、解決しました

はい、これは今のところ@nguyentuandatの良い回避策ですが、これを適切に処理する方法を理解するまでは一時的なものです。

react-scriptsの更新は私のために働いた（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として手動で追加すると修正されました。

Yarnを使用して"react-scripts": "2.1.5",と"@storybook/react": "^4.1.4",をインストールします。

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

ただし、requireがCRA babel-loaderを見つけることができないため、これは失敗します。 そのための解決策はすでにありますか？

@mrmckebはこれについて

最新のベータビルドを試しました。 [email protected]とここで説明されているTypescriptセットアップでストーリーブックを使用しています： https ：//storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

ただし、requireが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]リリースをインストールしました。 Storybookはビルドされて実行されますが、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/ディレクトリに移動しようとしましたが、突然機能しました。 理由はわかりませんが、ずっと推奨されているのか、必要なのかはわかりませんが、これで修正されました。

新しいCRAtypescriptアプリで、私もこの問題を抱えています。 マスターとストーリーブック5.0.11からの最新のCRA

@revmischaはsrc/下のあなたの物語ですか？

はい@ shilman-私は基本的にCRAを実行してからhttps ：

ストーリーは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 / react5.0.11とマスターからの最新のcreate-react-appでまだこの問題が発生しています。
問題は、CRAがbabel-loader 8.0.5を必要としていて、 sb initすると"babel-loader": "^8.0.6"がpackages.jsonに追加されることです。
では、babel-loader CRAがすでに必要としているものを検出し、それを追加するのはどうでしょうか。 または、CRAが検出された場合、sbinitのpackage.jsonへのbabel-loaderの追加をスキップしますか？ この問題の履歴に基づくと、ストーリーブックとCRAの間で2つの正確なバージョンを同期させることは、何の解決策にもなりません。

本当に助けが必要です。

私はすべてを試しますが、すべてがうまくいきます。

`プロジェクトの依存関係ツリーに問題がある可能性があります。
Create React Appのバグではない可能性がありますが、ローカルで修正する必要があります。

Create React Appが提供するreact-scriptsパッケージには、依存関係が必要です。

「バベルローダー」：「8.0.5」

手動でインストールしようとしないでください。パッケージマネージャーが自動的にインストールします。
ただし、ツリーの上位で別のバージョンのbabel-loaderが検出されました。

c：\ Users \ Z-Dra \ node_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. 使用するパッケージマネージャーに応じて、npminstallまたはyarnを実行します。

ほとんどの場合、これで問題を解決できます。
これで問題が解決しない場合は、他にもいくつか試すことができます。

1. npmを使用した場合は、yarn（http://yarnpkg.com/）をインストールし、代わりに上記の手順を繰り返します。
   npmにはパッケージの巻き上げに関する既知の問題があり、将来のバージョンで解決される可能性があるため、これが役立つ場合があります。

2. c：\ Users \ Z-Dra \ node_modulesbabel-loaderがプロジェクトディレクトリの外にあるかどうかを確認します。
   たとえば、ホームフォルダに誤って何かをインストールした可能性があります。

3. プロジェクトフォルダーでnpmlsbabel-loaderを実行してみてください。
   これにより、（予想されるreact-scriptsを除いて）他のどのパッケージがbabel-loaderをインストールしたかがわかります。

他に何も役に立たない場合は、プロジェクトの.envファイルにSKIP_PREFLIGHT_CHECK = trueを追加します。
とにかく続行したい場合は、このプリフライトチェックが永久に無効になります。

PSこのメッセージが長いことは承知していますが、上記の手順をお読みください:-)お役に立てば幸いです。

npm ERR！ コードELIFECYCLE
npm ERR！ errno 1
npm ERR！ [email protected]開始： react-scripts start
npm ERR！ 終了ステータス1
npm ERR！
npm ERR！ [email protected]開始スクリプトで失敗しました。
npm ERR！ これはおそらくnpmの問題ではありません。 上記の追加のログ出力がある可能性があります。

npm ERR！ この実行の完全なログは、次の場所にあります。
npm ERR！ C：\ Users \ Z-Dra \ AppData \ Roaming \ npm-cache_logs \ 2019-05-29T12_53_58_726Z-debug.log`

誰か助けてくれませんか？

babel-loader 8.0.6ホームディレクトリ/home/user/node_modulesにグローバルにインストールされていることを発見したので、プロジェクトディレクトリの下にbabel-loader 8.0.5がインストールされたので、ホームのnpm remove babel-loaderを削除します。ディレクトリ（8.0.6）、すべてが正常に動作するより。

これは私が確信しているばかげた質問ですが...
typescriptを使用している場合、何のためにbabelが必要ですか？

@shilmanに感謝し

実行した手順：

1. 最新のTypescriptバージョンをインストールします。 npx create-react-app my-app --typescript介したCRA（react-script 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開発依存関係を削除します
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内の私のdependecirdでは定義されていません
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]は新しいバージョンのwebpackを提供していますが、CRAは古いバージョンを望んでいます。
依存関係に[email protected]を追加すると、修正されます。 これがストーリーブックの問題であるかどうかはよくわかりません。

@vipyoshiいくつかのコメント：

• --type react渡してはいけません。 代わりにCRAテンプレートを使用させてください。
• これは最新バージョン@storybook/cli@nextで修正されており、今後24時間以内に安定版としてリリースされます。

真剣に、TypeScriptを使用しているのになぜbabelが必要なのですか？

@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を使用していますが、排出されていません。

他に何が問題になる可能性がありますか（開く必要があります）？
手伝いましょうか？

_{PS：グローバルスタイルのデコレータを使用しています。}

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は、TypeScriptの使用方法です。 TSチームは、TypeScriptコンパイラまたはBabelプラグインの2つのパスを提供します。

@ rlecaro2と@Akaryatrhは、数か月前に変更を加えました。最新のStorybookリリースでは、babel-loaderはCRAと一緒にインストールされず、代わりにCRA内から検出されます。

私が理解しているように、 .storybook内のファイルが正しく処理されていないという事実を除けば、問題はまったくありません。 これは、Create ReactAppの構成がソース外のファイルを無視するためです。

私たちは、内部の活字体を可能にするために小さな変更を加えた.storybookディレクトリここでは、および設定の残りの部分のために同じことを行うことができます。 私はあなたが両方ともTypeScriptを使用していないと仮定しているので、その修正はあなたのために機能しませんでした。

devDependencies修正が機能する理由は少し混乱しています...それも調査が必要だと思います。

また、これは新しい問題であり、上記とは関係ありません。 ここのコメントがすべてのユーザーに警告するので、私はここに新しいチケットを作成しました：＃7201。 そこに詳細を追加してください。

すごい！ 何が開発依存関係を機能させているのかを理解しようとします。 他の人にとっては、問題は＃7201（マイナーなタイプミス）です。

@ ramonex1

はい、私にとっては愚かな考えです。

それは私のフォルダ内の別のノードモジュールです

これはまだ私には機能していません、私はこの問題をたくさん見ましたが、決定的な修正/アップグレードパスまたは修正方法のガイドラインを見つけることができないようです。

参考までに、 画期的な作業があります-うまくいけば、これらの問題についての推論がはるかに簡単になります

私も同じ問題に直面し、それを修正しました。 私のプロジェクト名は「idash2」で、インストールします

コード/ウェブ/フロントエンド/ idash2

しかし、問題は、このディレクトリに誤ってnode_modulesをインストールしたことです

コード/ウェブ/フロントエンド

code / web / frontend / node_modulesを削除し、reactアプリを再インストールした後、問題は解決しました。

このソリューションの功績：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オプションなしの自動検出も成功しました。かっこいいです！）

これはドキュメントの不足であり、そのような間違いを犯す可能性があると思います。
Storybook for Reactページに--type react_scriptsに関する説明を追加するか、CRA用の別のチュートリアルを作成してください。

ありがとう！

また、CRAの組み込みプリセットを置き換える、CRAの新しいプリセットも試しています。 これにより、将来のセットアップが容易になります。

こんにちは、私はCRAユーザーであり、Reactのドキュメントで説明されている次のコマンドでストーリーブックを初期化したときに、この問題に直面しまし

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

次に、以下で初期化して問題を修正しました。

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

（そして、 --typeオプションなしの自動検出も成功しました。かっこいいです！）

これはドキュメントの不足であり、そのような間違いを犯す可能性があると思います。
Storybook for Reactページに--type react_scriptsに関する説明を追加するか、CRA用の別のチュートリアルを作成してください。

ありがとう！

どうもありがとうございます！ これでバナナに行きました。

みんなありがとう、私はそのドキュメントを更新するためにメモを取ります。

@mrmckebはまだ同じ問題（CRA 3.3 + Storybook 5.2.8）に直面しており、 react_scriptsフラグに関するドキュメントには何も見つかりません-他の人が行く必要がないように、そこにあると素晴らしいでしょうこれを見つけるためにGHの問題を通して...🎉

@aericson 、ご不便をおかけして申し訳ありません。 今日見てみます。

これは詳細設定にあることに注意してください。 それは言う：

クイックスタートガイドを使用して、ストーリーブック用にプロジェクトをセットアップしようとした可能性があります。 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 / prefix-create-react-app"： "^ 3.1.5"、
"@ storybook / react"： "^ 6.0.28"、
"@ tests-library / dom"： "^ 7.26.5"、
"@ tests-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"、
"react-is"： "^ 17.0.1"、
"react-test-renderer"： "^ 17.0.1"
}、
「解像度」：{
" / react-scripts / / babel-loader"： "^ 8.1.0"
}

`

同じlibのbabel-loaderを使用した属性の解決。

これが最新バージョンのcreat-react-appとstorybookの問題であることを確認します。

編集：create-react-appは、node_modulesの不正なbabel-loaderバージョンについて文句を言います。 CRAが必要としたバージョンであるyarn add -D --exact [email protected]を使用して問題を解決することができました。

私もこれに遭遇していることを確認できますか、この問題を再開できますか？ 自分で使用しない場合は、パッケージにbabel-loaderを含める必要はありませんか？
@DylanCulfogienisの修正が機能することは確認できます！

CRAアプリにbabel-loaderをインストールしなくなったため、 @ eglavinの問題を再度開く必要はないと思います。

新規インストールでまだ失敗していますか？

ここで同じ問題

CRAアプリにbabel-loaderをインストールしなくなったため、問題@eglavinを再度開く必要はないと思います。

新規インストールでまだ失敗していますか？

ここでも同じ問題があります。アプリをストーリーブックで実行する必要がある場合でも、 babel-loaderを含める必要があります。

Babel-loaderはすでにCRAに含まれており、ストーリーブックはそれを使用できます。 番号？

これは、最新のCRA / SBバージョン（この記事の執筆時点では、それぞれ4.0.1と6.1.18）の新規インストールでは依然として問題です。

また、SBv6.1とともにCRAv4をインストールしたときにこれに遭遇しました。

ここで同じ問題：React4.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) 

PS：同じ問題の異なるバージョンに関係するので、新しい問題を開く必要がありますか？

@DylanCulfogienisに感謝しyarn add -D --exact [email protected]は機能しました！

私はMonorepoを持っていて、上記のようにReact webパッケージにbabel-loaderを追加しました（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ソリューションは、半日の戦いの後、私にもそれを修正しました。 https://github.com/storybookjs/storybook/issues/12408から別のコマンドがここにまとめられていますが、これが私を動かしたセットアップです。

# 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に複製