Question

我试图在已经拥有广泛的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？

Answer 1

这可能是故事书不能完全复制webpack babelrc行为的问题。

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

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

Answer 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"
   ]
 }
}

我希望这对某人有帮助。

演示中的React故事书失败

2 个答案: