babel: After upgrading babel preset-env, core, runtime and typescript to 7.7.7, async functions are not working in some cases

Bug Report

After updating preset-env ,core, runtime, and typescript to 7.7.7 from 7.7.5, in some scenarios async functions are not behaving the same way.

image

  • I would like to work on a fix!

Current Behavior When a click handler is called in this case, the error in the screenshot above is generated for the async function.

Input Code

  • REPL or Repo link if applicable:

const Modal = () => {
const onClose = async () => {
    if (isFormDirty) {
      try {
        await confirm.show('You have unsaved changes. Are you sure you want to close?'); // returns a promise
      } catch (err) {
        return;
      }
    }
  };

return <Header onClose={onClose} />
}



class Header {
 
handleClose = (event) => {
 this.props.onClose();
}

render() {
 <Thingy onClose={this.handleClose} />
}
}

const Thingy = ({ onClose }) => {
<button onClick={onClose}>
}

Expected behavior/code A clear and concise description of what you expected to happen (or code).

I expect the code to be ok executing the async function.

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

  • Filename: babel.config.js
module.exports = function buildPreset(context, options) {
  const env = process.env.BABEL_ENV || process.env.NODE_ENV || 'development';

  const plugins = [
    'babel-plugin-lodash',
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-function-sent',
    '@babel/plugin-proposal-json-strings',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-throw-expressions',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    '@babel/plugin-transform-runtime',
  ];

  const presetEnvOptions = {
    loose: true,
    modules: false,
    useBuiltIns: 'usage',
    spec: true,
    corejs: 2,
    ...options,
  };

  const presets = [
    [require('@babel/preset-env'), presetEnvOptions],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ];

  if (env === 'production') {
    plugins.push(
      '@babel/plugin-transform-react-constant-elements',
      '@babel/plugin-transform-react-inline-elements'
    );
  }

  return {
    presets: presets,
    plugins: plugins,
  };
};

Environment

  System:
    OS: macOS 10.15.2
  Binaries:
    Node: 11.12.0 - ~/.nvm/versions/node/v11.12.0/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.7.0 - ~/.nvm/versions/node/v11.12.0/bin/npm
  npmPackages:
    @babel/core: ^7.7.7 => 7.7.7
    @babel/runtime: ^7.7.7 => 7.7.7
    babel-jest: ^24.0.0 => 24.9.0
    babel-loader: ^8.0.2 => 8.0.6
    babel-plugin-ts-optchain: ../babel-plugin-ts-optchain/ => 1.0.2
    eslint: ^6.8.0 => 6.8.0
    jest: ^24.0.0 => 24.9.0
    webpack: ^4.41.4 => 4.41.4
  • Babel version(s): [e.g. v6.0.0, v7.0.0-beta.34]
  • Node/npm version: [e.g. Node 8/npm 5]
  • OS: [e.g. OSX 10.13.4, Windows 10]
  • Monorepo: [e.g. yes/no/Lerna]
  • How you are using Babel: [e.g. cli, register, loader]

Possible Solution

Additional context/Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain.

About this issue

  • Original URL
  • State: open
  • Created 5 years ago
  • Comments: 15 (4 by maintainers)

Most upvoted comments

Ok, I’m really confused but interested 🙃 I understand if you don’t have time to help me debug this bug since you have worked it around, but…

  1. There is a var _this3 = declaration somewhere. Could you check if it seems to use the same this as the one in the last line (.bind(this)) of the code you posted?
  2. Could you add a debugger; right before the _newArrowCheck in the compiled output, check the values of this and _this3, and check which one is unexpected? They should be the this available in the arrow function, so the one in the context which encloses the arrow itself.

I just tried spec true and loose false, and it still had the same issue. its working with both set to false.