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"),
};

使用create react app

1 个答案: