Skip to content
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

Arrow functions as class properties compile incorrectly #3471

Closed
KidkArolis opened this issue Feb 7, 2022 · 5 comments · Fixed by #3556
Closed

Arrow functions as class properties compile incorrectly #3471

KidkArolis opened this issue Feb 7, 2022 · 5 comments · Fixed by #3556
Labels
Milestone

Comments

@KidkArolis
Copy link

KidkArolis commented Feb 7, 2022

Describe the bug

When using specific browser target to reduce how much compilation is being applied to the code, an edge case surfaces that incorrectly transpiles arrow functions as class properties, losing the correct reference to this. See the attached playground and you'll notice _this.getBar(b) is referencing _this which is not a valid reference.

Input code

class Foo {
  getBar(b) {
    return b * 2
  }

  getFoo = ({ b } = {}) => {
    return this.getBar(b)
  }
}

const f = new Foo()
console.log(f.getFoo({ b: 2 }))

Config

{
    env: {
      targets: '> 0.25% and last 2 versions, not dead, not ie <= 11',
      coreJs: 3,
      mode: 'entry'
    },
    jsc: {
      parser: {
        jsx: true,
        exportDefaultFrom: true
      },
      transform: {}
    }
  }
}

Playground link

https://play.swc.rs/?version=1.2.133&code=H4sIAAAAAAAAA0vOSSwuVnDLz1eo5lJQSE8tcUos0kjSBPMUFIpSS0qL8hSSFLQUjIACtVwQNSDltgoa1UCJWiCjulZTwdYOVUtJRmaxHtw4sF6g7uT8vOIShTSgnrzUcpCtGppgsfycVL2c%2FHSNND2I6SCjrRSMFGo1NQHVZOk3oQAAAA%3D%3D&config=H4sIAAAAAAAAA0WO3QqDMAyFXyUEdidjE9yFbHuDPUSwUTq0lSbKRPrua53Du5Pz85EV39JgveJIQThkJYtT%2BmCN3AwkTbCjYpFqyWqpF44FKoWONVekSlnvvfCeFjhYZ9slkxo%2FjIFFjohc1%2F%2BbMYEGb6ZsrKjLyBvwhvFg7Dsrr72oYUo3u3nbbG8kPD7hci6rE5Az0JMolDBzEOudFOC8gmEyP2UZ7g%2B4XjHGL6hpzCH9AAAA

Expected behavior

this.getBar(b) call should work!

Actual behavior

Error is thrown Uncaught TypeError: _this.getBar is not a function, because _this is not pointing to the class instance.

Version

1.2.133

Additional context

No response

@kdy1 kdy1 added this to the v1.2.138 milestone Feb 7, 2022
@KidkArolis
Copy link
Author

In the provided playground, switching from JavaScript to TypeScript produces correct output!

@Austaras
Copy link
Member

Austaras commented Feb 7, 2022

There are two layers of bug:
1. compat data(which is directly copied from babel) lacks safari support for optional parameters.
2. swc transform arrow in class field wrongly, which is an extremely rare case since class field is an ES2022 feature while arrow is ES6

see #3268

@williamtetlow
Copy link
Contributor

I believe 2 may be fixed in #3459

@Austaras
Copy link
Member

Austaras commented Feb 7, 2022

No. This is not related to ts nor decorator

@swc-bot
Copy link
Collaborator

swc-bot commented Oct 18, 2022

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@swc-project swc-project locked as resolved and limited conversation to collaborators Oct 18, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Development

Successfully merging a pull request may close this issue.

5 participants