创建React应用程序时出现react styleguidist错误

Question

我正在尝试将React Styleguidist添加到我的项目中，但是得到了一个“意外的令牌”编译器错误。

我正在使用Create react app创建项目。在它不起作用后，我创建了一个新项目，并在返回组件时继续收到相同的错误。

下面是我创建的简单组件的代码，试图弄清楚:从‘React’导入react；

​

import React from 'react';

const Component1 = (props)=><div>Test</div>;


export default Component1;

​

根据我在https://react-styleguidist.js.org/docs/getting-started.html上读到的内容，看起来我应该只需要运行npm install --save-dev react-styleguidist，然后运行npx styleguidist server

我确信我遗漏了一些东西，但是找不到任何可以解释下面错误的东西。

SyntaxError: /Users/seanlynch/Projects/style/src/Components/Component1.js: Unexpected token (3:28)

  1 | import React from 'react';
  2 |
> 3 | const Component1 = (props)=><div>Test</div>;
    |                             ^
  4 |
  5 |
  6 | export default Component1;
 @ ./node_modules/react-styleguidist/lib/index.js (./node_modules/react-styleguidist/loaders/styleguide-loader.js!./node_modules/react-styleguidist/lib/index.js) 46:30-101
 @ ./node_modules/react-styleguidist/lib/index.js
 @ multi ./node_modules/react-styleguidist/lib/index ./node_modules/react-styleguidist/node_modules/react-dev-utils/webpackHotDevClient.js

Answer 1

使用下面的代码行添加styleguide.config.js

module.exports = {
    propsParser: require("react-docgen").parse,
    webpackConfig: require("react-scripts/config/webpack.config"),
};