[英]React Storybook Fails on Demo
I'm attempting to use React Storybook in a project that already has an extensive Webpack 2 config. 我正在尝试在已经具有广泛的Webpack 2配置的项目中使用React Storybook。 I started the Storybook following the basic steps:
我按照以下基本步骤启动了Storybook:
npm i -g @storybook/cli
getstorybook
When I run yarn storybook
, it breaks on the JSX of the demo component: 当我运行
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
Since I didn't start this project originally using create-react-app
- do I need to modify the Storybook webpack config to enable JSX? 由于我最初并未使用
create-react-app
启动该项目-我是否需要修改Storybook Webpack配置以启用JSX?
This might to be a problem with Storybook not replicating webpack babelrc behaviour exactly. 这可能是Storybook无法完全复制webpack babelrc行为的问题。
In my case, I had an empty (just {}) .babelrc file with all the important react/jsx plugins defined in webpack.config.js. 在我的情况下,我有一个空的(只是{}).babelrc文件,其中包含在webpack.config.js中定义的所有重要的react / jsx插件。 Storybook read the .babelrc instead of using the babel settings in webpack.config.js.
故事书将读取.babelrc,而不是使用webpack.config.js中的babel设置。
Deleting the .babelrc solved that issue. 删除.babelrc解决了该问题。
in my case, i didnt have a .babelrc
at all -- i used the entry "babel"
in the package.json. 就我而言,我
.babelrc
没有.babelrc
,我在package.json中使用了"babel"
条目。 when running the storybook in this project, the babel entry wasnt there. 在该项目中运行故事书时,那里没有通天塔条目。 i added it and things magically started working.
我添加了它,魔术开始起作用。
{
"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"
]
}
}
i hope this helps someone. 我希望这可以帮助别人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.