New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
adrienharnay opened this Issue Feb 7, 2019 · 11 comments

Comments

Projects
None yet
4 participants
@adrienharnay
Copy link

adrienharnay commented Feb 7, 2019

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

This comment has been minimized.

Copy link
Collaborator

babel-bot commented Feb 7, 2019

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

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Feb 7, 2019

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

@adrienharnay

This comment has been minimized.

Copy link
Author

adrienharnay commented Feb 7, 2019

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 comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Feb 7, 2019

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

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Feb 7, 2019

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

This comment has been minimized.

Copy link
Author

adrienharnay commented Feb 8, 2019

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

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Feb 8, 2019

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

This comment has been minimized.

Copy link
Author

adrienharnay commented Feb 8, 2019

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

@adrienharnay

This comment has been minimized.

Copy link
Author

adrienharnay commented Feb 11, 2019

Hey, do you have any update on this?

@existentialism

This comment has been minimized.

Copy link
Member

existentialism commented Feb 11, 2019

@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

This comment has been minimized.

Copy link
Author

adrienharnay commented Feb 11, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment