1

我正在尝试在一个已经拥有大量 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 吗？

4

2 回答 2

0

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

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

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

于 2018-04-05T20:29:34.023 回答
0

就我而言，我根本没有.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"
   ]
 }
}

我希望这可以帮助别人。

于 2019-01-24T23:57:09.720 回答