React Storybook在演示中失败

Question

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

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启动这个项目--我需要修改故事书webpack的配置才能启用JSX吗？

Answer 1

这可能是一个问题，因为Storybook没有准确地复制webpack的行为。

在我的例子中，我有一个空的(只有{}) .babelrc文件，其中包含在webpack.config.js中定义的所有重要的react/jsx插件。Storybook阅读.babelrc，而不是使用webpack.config.js中的巴别塔设置。

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

Answer 2

在我的例子中，我根本没有.babelrc --我在package.json中使用了条目"babel"。当在这个项目中运行故事书时，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"
   ]
 }
}

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