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 ，我也在考虑这个。 我们可以考虑从react-scripts中公开babel-loader ...可能会有所帮助。 最近有一个公关为chalk （https://github.com/facebook/create-react-app/pull/6150）做类似的事情。

或者，如果这是@storybook/react的依赖关系，会更容易吗？ 而不是对等。 我意识到这可能会给非CRA用户带来问题。

或者，当react-scripts存在时，我们可以直接从react-scripts/node_modules/babel-loader导入babel-loader react-scripts/node_modules/babel-loader 。 我们已经从react-scripts文件夹加载了配置。

@ igor-dv @ndelangen @tmeasday对@mrmckeb在上面

解决方法似乎对我不起作用。 在尝试解决方法后，我仍然看到冲突。

解决方法似乎对我不起作用。 在尝试解决方法后，我仍然看到冲突。

确保删除开头的“ ^”，否则仍然会得到8.0.5

我认为我们可能会要求babel-loader从react-scripts找到它的地方（使用requireFrom之类的东西，尽管如果react-scripts导出它会更容易）（如果我们使用的是CRA的webpack配置）。

预设会更好，但我想我们已经有CRA的特殊情况代码（要使用它的配置），所以在那做起来可能相对容易些？

解决方法似乎对我不起作用。 在尝试解决方法后，我仍然看到冲突。

确保删除开头的“ ^”，否则仍然会得到8.0.5

这就是我的package.json中的内容：“ babel-loader”：“ 8.0.4”

是否需要采取其他步骤来解决此问题？

@jlmelis ，安装了什么版本的“ react-scripts”？ 我可以确认对于“ react-scripts”：“ 2.1.3”解决方法似乎工作正常

@vsubbotskyy-我正在使用

我能够使工作正常进行。 谢谢

我环顾了一下，我认为在这个阶段，使用CRA（使用CRA）时，需要使用装载机会更容易。 我现在做公关。

@tmeasday ，如果您可以看一下并提供有关PR＃5308的反馈，那就太好了。

我经历了同样的问题，终于解决了。 我在package.json文件中将babel-loader更改回“ 8.0.4”，并且需要删除package-lock json文件，然后我便可以使用Storybook进行启动和测试。 我希望这是有帮助的。

“ _我在package.json_中将babel-loader改回了“ 8.0.4”
我希望这不是解决方案，并且会尽快得到解决，因为它阻止了我们更新react-scripts：/
谢谢

+1

抱歉，我已经停滞了1.5个星期，也没有对此发表评论。 现在就这样做。

仍然有同样的问题

感谢@oscargws ，我们正在积极调查此问题，并提出了＃5308来解决此问题。 @ndelangen ，您可以看看那个PR吗？

@mrmckeb啊，很好。 对于其他有问题的人，手动更改package.json中的babel-loader版本已为我修复了！

有人知道那里到底是什么东西吗？ 这是补丁版本的颠簸，对我来说似乎很奇怪。

@ igor-dv，问题是CRA期望版本完全匹配-如果在package.json中安装

解决方案是在使用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]

@ Rolando-Barbella尝试通过package.json中的resolution字段将版本固定到8.0.4

我将版本从2.1.2更改2.1.5然后解决了

是的，对于@nguyentuandat来说，这是一个不错的解决方法，但是只是暂时的，直到我们确定如何正确处理此问题为止。

更新react-scripts对我有用（thx，@nguyentuandat）。 我在2.1.1上，使用changelog的说明进行了更新：

yarn add --exact [email protected]

在尝试了这里的所有内容之后，我找到了解决方案。

只需在文本编辑器中打开.profile（它隐藏在主目录中，因此请按Ctrl + H）

只需将此行粘贴到.profile的底部

导出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", 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)

太棒了！ 我刚刚发布了https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.25，其中包含引用此问题的PR＃5308。 立即升级以试用！

因为它是预发行版，所以您可以在@next NPM标签上找到它。

解决此问题。 如果您认为还有更多事情要做，请重新打开。

我刚刚尝试了最新的Beta版。 我们正在将故事书与[email protected]并在此处描述了Typescript设置： https ://storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

尽管由于需求找不到CRA babel-loader，但此操作失败。 已经有解决方案了吗？

@mrmckeb对此有任何了解吗？

我刚刚尝试了最新的Beta版。 我们正在将故事书与[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 ，仍然需要更新打字稿文档。 如果您让我知道我对打字稿和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打字稿应用程序，我也遇到了这个问题。 来自大师和故事书的最新CRA 5.0.11

@revmischa是您在src/下的故事吗？

是的@shilman-我基本上是在运行CRA然后是sb init： 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] 。 前几天刚刚进行了设置，对于使用新的CRA设置的用户来说， React的文档/设置指南将是过时的。

否则，问题看起来固定fixed

大家好，是的，请确保删除您的babel-loader并进行快速抽查以查看是否在其他地方列出了它。

您也可以告诉CRA如果需要，可以跳过该检查，但这是出于安全考虑...

我仍然遇到@ storybook / react 5.0.11和master的最新create-react-app这个问题。
问题是CRA想要babel-loader 8.0.5并运行sb init将"babel-loader": "^8.0.6"到我的packages.json
那么如何检测Babel-loader CRA已经需要的内容并将其添加呢？ 还是只是在检测到CRA时跳过将babel-loader添加到sb init的package.json中？ 根据此问题的历史记录，使故事书和CRA之间的两个确切版本保持同步并不是解决任何问题的方法。

请我真的需要帮助。

我尽一切努力，但没有做任何事情。

`项目依赖树可能存在问题。
这可能不是Create React App中的错误，而是您需要在本地修复的问题。

Create React App提供的react-scripts软件包需要依赖项：

“ babel-loader”：“ 8.0.5”

不要尝试手动安装它：包管理器会自动安装它。
但是，在树的更高位置检测到了不同版本的babel-loader：

c：\ Users \ Z-Dra \ node_modulesbabel-loader（版本：8.0.6）

众所周知，手动安装不兼容的版本会导致难以调试的问题。

如果您希望忽略此检查，请将SKIP_PREFLIGHT_CHECK = true添加到项目中的.env文件。
这将永久禁用此消息，但您可能会遇到其他问题。

要修复依赖关系树，请尝试按照确切的顺序执行以下步骤：

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-Dra \ node_modulesbabel-loader是否在项目目录之外。
   例如，您可能不小心在主文件夹中安装了某些内容。

3. 尝试在项目文件夹中运行npm ls babel-loader。
   这将告诉您安装了babel-loader的其他哪个软件包（除了预期的react-scripts）。

如果没有其他帮助，请将SKIP_PREFLIGHT_CHECK = true添加到项目中的.env文件。
如果您仍然要继续进行操作，那将永久禁用此预检检查。

附言：我们知道此消息很长，但请阅读上述步骤:-)我们希望您对他们有所帮助！

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`

请有人可以帮助我吗？

我发现我的主目录/home/user/node_modules全局安装了babel-loader 8.0.6 ，因此在项目目录下安装了babel-loader 8.0.5，因此我将npm remove babel-loader删除

我敢肯定这是一个愚蠢的问题，但是...
如果我使用打字稿，我需要babel做什么？

感谢@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/和演示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插件。

@ rlecaro2和@Akaryatrh ，我们在几个月前进行了更改，在最新的Storybook版本中，babel-loader未与CRA

据我了解，除了.storybook中的文件未正确处理之外，您根本没有任何问题。 这是因为Create React App的配置会忽略源代码之外的文件。

我们做了一个小的改变，以允许内部打字稿.storybook目录在这里，并且可以为配置的其余部分做。 我假设你们俩都没有使用TypeScript，这就是为什么该修复不适用于您的原因。

我有点困惑为什么devDependencies修复有效，但是...我认为这也需要调查。

另请注意，这是一个新问题，与以上内容无关。 当这里的评论提醒所有用户时，我在这里创建了新票证：＃7201。 请在此处添加详细信息。

大！ 我将尝试弄清是什么使dev依赖项起作用。 对于其他任何人，问题都是＃7201（轻微错字）。

@ ramonex1

是的，对我来说，这只是一个愚蠢的想法。

这是我文件夹中的另一个节点模块

这仍然对我不起作用，我已经看到了很多问题，但是似乎找不到确定的修复/升级路径或修复方法的指南。

仅供参考，我们在@mrmckeb上提供了一些改变游戏规则的CRA支持工作，希望可以使对这些问题的推理更加轻松

我也面临同样的问题，并已解决它。 我的项目名称为“ idash2”，并将其安装在

代码/网站/前端/ idash2

但是问题是我不小心在此目录上安装了node_modules

代码/网络/前端

在删除代码/ web / frontend / node_modules并重新安装react app之后，问题解决了。

此解决方案的功劳：Parinya Onsuwan

我遇到了同样的问题，似乎什么也没有用……针对此问题是否有永久有效的解决方案？

@isenese我相信这是https://www.npmjs.com/package/@storybook/preset -create-react-app的一部分，或者不久之后

@isenese ，对不起，我最近有点失灵。

这已在Storybook的新版本中得到解决，或者至少应该得到解决-如果您仍然遇到此问题，请提供版本详细信息，我们可以提供帮助。

您好，我是CRA用户，并通过React文档中描述的以下命令初始化Storybook时遇到了此问题。

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

然后，我通过初始化以下内容解决了该问题。

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

（而且没有--type选项的自动检测也很成功。太酷了！）

我认为这是缺乏文档，并且可能会犯此类错误。
请将有关--type react_scripts说明添加到React的

谢谢！

我们还在试用CRA的新预设，它将取代CRA的内置预设。 这应该使将来的设置更加容易。

您好，我是CRA用户，并通过React文档中描述的以下命令初始化Storybook时遇到了此问题。

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

然后，我通过初始化以下内容解决了该问题。

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

（而且没有--type选项的自动检测也很成功。太酷了！）

我认为这是缺乏文档，并且可能会犯此类错误。
请将有关--type react_scripts说明添加到React的

谢谢！

非常感谢！ 我正用这个去香蕉。

谢谢大家，我会做笔记以更新该文档。

@mrmckeb仍然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”，
“ react-is”：“ ^ 17.0.1”，
“ react-test-renderer”：“ ^ 17.0.1”
}，
“决议”：{
“ / react-scripts / / babel-loader”：“ ^ 8.1.0”
}

`

使用babel-loader的相同lib的attibute分辨率。

确认这仍然是最新版本的creat-react-app和storybook的问题。

编辑：create-react-app将抱怨node_modules中的babel-loader版本不正确。 我可以使用yarn add -D --exact [email protected]来解决此问题，这是CRA所需的版本。

可以确认我也遇到了这个问题，我们可以重新打开这个问题吗？ 如果我自己不使用它，我真的不想在包中包含babel-loader吗？
我可以确认@DylanCulfogienis修复程序有效！

我们不再将babel-loader安装到CRA应用中，因此我认为我们无需重新打开问题@eglavin

仍然无法进行全新安装吗？

这里同样的问题

我们不再将babel-loader安装到CRA应用中，因此我认为我们无需重新打开问题@eglavin

仍然无法进行全新安装吗？

同样的问题在这里，如果您的应用需要与Storybook一起运行，那么您仍然需要包含babel-loader 。

Babel-loader已包含在CRA中，故事书也可以使用它。 没有？

在最新安装的最新CRA / SB版本（在撰写本文时分别为4.0.1和6.1.18）时，这仍然是一个问题。

在将CRA v4与SB v6.1一起安装时，也会遇到此问题：

同样的问题在这里：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) 

PS：我们是否应该针对一个问题的不同版本来发布一个新的问题？

非常感谢@DylanCulfogienis ，您保存了我的一天！ 我花了几个小时来删除并安装故事书，甚至再次安装并保留node_modules目录和agian，并且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解决方案也为我修复了该问题。 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