Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

preset-env with async arrow function class properties produces broken code on Edge

See original GitHub issue

Bug Report

Current Behavior See the code below. This code works as expected on Chrome (the instance of Bar) is logged, but it does not work on Edge. On Edge, undefined is logged.

This is because super() apparently returns undefined on Edge when the superclass is not actually an ES2015 class.

In my example, this comes up in practice when I have things extending React.Component.

Input Code https://babeljs.io/repl/#?babili=false&browsers=Edge>%3D14%2C Chrome >%3D 60&build=&builtIns=usage&code_lz=PTAEEkFsEMHMEsB2BTUAXAFvAzqHpp0AnaRbAB3gBtkATUAYyum2wDoAoAMwFdEG08APaJQAMSFCAFAEpQAbwC-HDkxa4AQtCKhkADzTJEtXBKEKOoRiOxoiPAUKKyLVq9h7lkzmQG5LoMoBXJKgALygLmEAfAqK_gEARtrhBNgAnvyRcjGubgw2QjRsVEKwUpg4fgHxHEEoAO6gWj5syT6-QA&debug=true&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=true&fileSize=false&lineWrap=false&presets=stage-2%2Cenv&prettier=false&targets=&version=6.26.0&envVersion=1.6.2

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

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

Per REPL.

Environment

Babel version(s): v6.26.0 in REPL, but I actually saw this with a recent v7 beta
Node/npm version: Node 8/npm 5
OS: OS X 10.12.6
Monorepo: No
How you are using Babel: webpack, CLI, and REPL

Possible Solution @loganfsmyth suggested transpiling to (super(...), _this = this) instead of _this = super(...).

Issue Analytics

State:
Created 5 years ago
Reactions:4
Comments:9 (6 by maintainers)

Top GitHub Comments

1reaction

vitorbalcommented, Nov 12, 2018

Would transpiling to (super(...), _this = this), as mentioned in the issue description, be an acceptable solution here?

Or is the suggested fix to force classes to be transformed and wait for the ChakraCore fix to land?

1reaction

macrozonecommented, Oct 8, 2018

is there any workaround for this? This looks like an easy fix, but the bug has a heavy impact.

Top Results From Across the Web

Arrow Function syntax not working with webpack?

I'm using webpack for bundling and babel for transpiling. When I am try to use arrow function in my code. It gives me...

async arrow function expected a return value - You.com

Component is distributed as an ES5 constructor function, so my React components that use async arrow function properties all produce this problem code...

Modern JavaScript In The Wild - Cody Lindley

Consider this an elaborate cheatsheet with runnable code purposefully ... For example, it can take arrow function syntax and convert it to ES5...

Babel v6 Changelog - Fossies

A class property fix (set this correctly when using async arrow function class properties without a super class). A fix for react-constant-elements plugin...

BabelJS - Quick Guide - Tutorialspoint

For example, arrow function, const, let classes will be converted to function, ... BabelJS code changes the syntax while transpiling which makes the...