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

Question

I am building a React app well technically preact but on the build it fails on the current code:

This is what the "helper class" looks like:

class DuplicateChecker {

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

It is imported to a component and used to help checking for stuff

And this is the error output

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

My .babelrc looks as following:

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

And still once i run the build it fails, not sure on why since it should compile the code properly

Answer 1

Solved, here is the solution:

Thanks to https://github.com/rschristian

The issue was within the .babelrc file, so i've deleted it and added my babel plugins within preact.config.js as followed:

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

After this change the build works fine with original syntax.

Hope this helps anyone