使用创建反应应用程序反应 styleguidist 错误

Question

我正在尝试将 React Styleguidist 添加到我的项目中，但遇到 "Unexpected token" 编译器错误。

我正在使用 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"),
};

使用创建反应应用程序反应 styleguidist 错误

React styleguidist error with create react app

create-react-app

react-styleguidist