React Storybook 在演示中失败答案

【问题标题】：React Storybook Fails on DemoReact Storybook 在演示中失败
【发布时间】：2017-08-23 21:52:51
【问题描述】：

我正在尝试在一个已经拥有大量 Webpack 2 配置的项目中使用 React Storybook。我按照基本步骤开始编写故事书：

npm i -g @storybook/cli

getstorybook

当我运行yarn storybook 时，它会在演示组件的 JSX 上中断：

ERROR in ./stories/index.jsx
Module parse failed: /Users/alexanderhadik/project/web/node_modules/@storybook/react/node_modules/babel-loader/lib/index.js??ref--0!/Users/alexanderhadik/project/web/stories/index.jsx Unexpected token (9:55)
You may need an appropriate loader to handle this file type.
| import { Button, Welcome } from '@storybook/react/demo';
| 
| storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
| 
| storiesOf('Button', module)
 @ ./.storybook/config.js 4:2-23
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

由于我最初没有使用 create-react-app 启动这个项目 - 我是否需要修改 Storybook webpack 配置以启用 JSX？

【问题讨论】：

标签： reactjs webpack jsx storybook

【解决方案1】：

这可能是 Storybook 没有准确复制 webpack babelrc 行为的问题。

就我而言，我有一个空的（只是 {}）.babelrc 文件，其中包含在 webpack.config.js 中定义的所有重要的 react/jsx 插件。 Storybook 读取 .babelrc 而不是使用 webpack.config.js 中的 babel 设置。

删除 .babelrc 解决了这个问题。

【讨论】：

【解决方案2】：

就我而言，我根本没有.babelrc——我在package.json 中使用了"babel" 条目。在 this 项目中运行故事书时，没有 babel 条目。我添加了它，事情神奇地开始了。

{
 "name": "root",
 "private": true,
 "devDependencies": {
   "@storybook/addon-actions": "^4.1.11",
   "@storybook/addon-links": "^4.1.11",
   "@storybook/addons": "^4.1.11",
   "@storybook/react": "^4.1.11",
   ...
 },
 "dependencies": {},
 "scripts": {
   "storybook": "start-storybook -p 6006",
   "build-storybook": "build-storybook"
 },
 "babel": {
   "presets": [
     "@babel/preset-env",
     "@babel/preset-react"
   ]
 }
}

我希望这对某人有所帮助。

【讨论】：