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

Question

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

这就是“帮手 class”的样子：

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"
    ]
}

还有一次运行构建失败，不确定原因，因为它应该正确编译代码

Answer 1

此语法应该有效：

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;
  };
}

Answer 2

已解决，这里是解决方法：

感谢https://github.com/rschristian

问题出在 .babelrc 文件中，所以我删除了它并在 preact.config.js[=25= 中添加了我的 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' ); }

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

希望对大家有帮助

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

Cannot convert non-arrow function to a function expression. React/Preact build fail

ecmascript-6

reactjs

babeljs

preact