[英]React Storybook Fails on Demo
我正在尝试在已经具有广泛的Webpack 2配置的项目中使用React Storybook。 我按照以下基本步骤启动了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?
这可能是Storybook无法完全复制webpack babelrc行为的问题。
在我的情况下,我有一个空的(只是{}).babelrc文件,其中包含在webpack.config.js中定义的所有重要的react / jsx插件。 故事书将读取.babelrc,而不是使用webpack.config.js中的babel设置。
删除.babelrc解决了该问题。
就我而言,我.babelrc
没有.babelrc
,我在package.json中使用了"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"
]
}
}
我希望这可以帮助别人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.