无法将非箭头函数转换为函数表达式。 React/Preact 构建失败

Posted 2023-02-22

【中文标题】无法将非箭头函数转换为函数表达式。 React/Preact 构建失败

【英文标题】：Cannot convert non-arrow function to a function expression. React/Preact build fail

【发布时间】：2022-01-13 04:29:46

【问题描述】：

我正在构建一个 React 应用程序，技术上很好，但在构建时它在当前代码上失败：

这是“帮助类”的样子：

class DuplicateChecker 

  hasDuplicates = async () => 
     const checkFirstPage = await this.isDuplicateFoundOnFirst();
...etc

它被导入组件并用于帮助检查内容

这是错误输出

Cannot convert non-arrow function to a function expression.
  14 |   
  15 |
> 16 |   hasDuplicates = async () => 
     |                      ^
  17 |     const checkFirstPage = await this.isDuplicateFoundOnFirst();
  18 |

我的 .babelrc 如下所示：

    "presets": [
        "preact-cli/babel"
    ],
    "plugins": [
        "@quickbaseoss/babel-plugin-styled-components-css-namespace",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-arrow-functions",
        "babel-plugin-styled-components"
    ]

一旦我运行构建它仍然失败，不知道为什么，因为它应该正确编译代码

【问题讨论】：

你试过hasDuplicates = async function () 吗？

或const hasDuplicates = async () =>

我忘了提到它是一个类。从现在开始编辑文件

编辑了问题

【参考方案1】：

已解决，解决方法如下：

感谢https://github.com/rschristian

问题出在 .babelrc 文件中，因此我已将其删除并在 preact.config.js 中添加了我的 babel 插件，如下所示：

export default (config, env, helpers) => 
    const  rule  = helpers.getLoadersByName(config, 'babel')[0];
    const babelConfig = rule.options;

    babelConfig.plugins.push(
        '@quickbaseoss/babel-plugin-styled-components-css-namespace',
        'babel-plugin-styled-components'
    );

在此更改之后，构建可以使用原始语法正常工作。

希望这对任何人都有帮助

【参考方案2】：

这个语法应该可以工作：

TS Playground link

class DuplicateChecker 
  async hasDuplicates () 
    // placeholder code:
    return Math.random() < 0.5;
  



// Use:
(async () => 
  const dc = new DuplicateChecker();
  const duplicatesFound = await dc.hasDuplicates();
  console.log(duplicatesFound);
)();

或者，由于它不是 TypeScript（根据您的问题），您可以在构造函数中分配它，如下所示：

class DuplicateChecker 
  constructor () 
    this.hasDuplicates = async () => 
      // placeholder code:
      return Math.random() < 0.5;
    ;
  

编辑：另一种语法：

class DuplicateChecker 
  hasDuplicates = async function () 
    // placeholder code:
    return Math.random() < 0.5;
  ;

【讨论】：

不应该 babel 处理这个吗？

我不知道您的构建工具是如何设置的，也不知道您为转换源代码配置了哪些规则。我只是为您的方法提供建议的有效语法。

其中一种语法是否解决了问题？

很遗憾没有：/

@AlbertKarter 我在答案的末尾又添加了一种语法（来自my comment 的语法）。它对你有用吗？