Can't find private variable @derivedConstructor (Safari iOS 10.3.1)

[adrienharnay]

Bug Report

Current Behavior

Can't find private variable @derivedConstructor error on Safari iOS 10.3.1

Input Code

The following code generated an error on Safari iOS 10.3.1:

before Babel:

someFunction = async () => {
  ...
}

after Babel:

_defineProperty(this, "someFunction", async (props, state) => {
  ...
}

Expected behavior/code

The example is working on Safari iOS 10.0 and Safari iOS 11

Babel Configuration (.babelrc, package.json, cli command)

const pkg = require('./package.json');

module.exports = api => {
  const env = api.env();

  const presets = [
    [
      '@babel/env',
      {
        modules: false,
        useBuiltIns: 'entry',
        { targets: { esmodules: true },
      },
    ],
    '@babel/react',
    '@babel/typescript',
  ];

  const plugins = [
    '@babel/proposal-class-properties',
    '@babel/plugin-syntax-dynamic-import',
  ].filter(Boolean);

  return {
    presets,
    plugins,
  };
};

Environment

• Babel version(s): Latest for all babel-related packages:

    "@babel/core": "7.2.2",
    "@babel/plugin-proposal-class-properties": "7.2.3",
    "@babel/plugin-syntax-dynamic-import": "7.2.0",
    "@babel/plugin-transform-react-jsx-source": "7.2.0",
    "@babel/preset-env": "7.2.3",
    "@babel/preset-react": "7.0.0",
    "@babel/preset-typescript": "7.1.0",

• Node/npm version: Node 10.15.0 / Yarn 1.13.0
• OS: Mac OSX 10.14.2
• Monorepo: yes
• How you are using Babel: loader via webpack

Possible Solution

Additional context/Screenshots

Please let me know if I can help in any way!

[babel-bot]

Hey @adrienharnay! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

[nicolo-ribaudo]

What is the full stack trace? The Babel transform looks correct

[adrienharnay]

Hey, thanks for your answer. The rest is basic components stack trace (componentDidMount, render, render, hydrate, ...).

Here is the full class if it can help:

class SomeClass_SomeClass extends react_default.a.Component {
  constructor() {
    super(...arguments);

    _defineProperty(this, "state", getInitialState(this.props));

    _defineProperty(this, "someFunction", async (props, state) => {
      ...
    }
  }
}

[nicolo-ribaudo]

This is not a fix (I'm not sure where the error comes from), but does it work for you?
mobxjs/mobx#1169 (comment)

[nicolo-ribaudo]

Ok, it is this bug: https://bugs.webkit.org/show_bug.cgi?id=166879

Are you using preset-env? We should update it to transpile async async functions (or classes) in broken safari releases.

[adrienharnay]

Yes that does fix it if I do

class SomeClass extends React.Component {
  constructor(props) {
    super(props);

    this.someFunction = this.someFunction.bind(this);
  }

  async someFunction() {
    ...
  }
}

And yes I am using preset-env (see first post for my .babelrc.js config). I only included the config related to esmodules: true, since Safari Mobile 10.3.1 supports <script type="module" />.

I think the issue only appears on Safari Mobile 10.1 through 10.3.1, but I am not 100% sure. If that can help you, I can download simulators to try different iOS versions to help you target the right versions for the fix!

Thanks again

[nicolo-ribaudo]

I'm not 100% sure about what is the process to update preset-env's compat data since we get them from an external source (compat-table). Maybe @existentialism can help.

[adrienharnay]

I do not know either, but can look it up if needed. Let me know if I can help with anything!

[adrienharnay]

Hey, do you have any update on this?

[existentialism]

@adrienharnay as @nicolo-ribaudo mentioned, we'll need to report this upstream to compat-table, as we source all our mappings from their data... mind taking the lead on that?

[adrienharnay]

Sure, created an issue on the compat-table repo: compat-table/compat-table#1419

[adrienharnay]

@existentialism PR merged :)

[adrienharnay]

compat-table/compat-table#1423

[zloirock]

@aaronabramov next step for fixing this issue - updating compat-table here, calling this script and creating a pull request with the result -)

[adrienharnay]

Do you want me to do it? If so, would you mind providing me the exact commit you want me to use? :)

[zloirock]

Most likely after that also will be required to update some preset-env tests.

[adrienharnay]

Alright, please tell me if I can help

[existentialism]

I have a PR for this, will get it up tonight or tomorrow.

[FrAgFo0d]

Hey I know this should be closed
but I am running a test on iOS 10.3.3
Using babel 7.4.4 and preset-env 7.4.4

could it be the bug is back? Or might it have to do with other issues?

[TheKidCoder]

Any update on this? We are still seeing this.