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.
- 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)
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…
var _this3 =
declaration somewhere. Could you check if it seems to use the samethis
as the one in the last line (.bind(this)
) of the code you posted?debugger;
right before the_newArrowCheck
in the compiled output, check the values ofthis
and_this3
, and check which one is unexpected? They should be thethis
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.