babel / babel/website

equally named private methods in different files break on merge

Open
#2,319 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
777
Forks
1.4k
Avg merge
16h 45m
Merged PRs (30d)
3

Description

## Bug Report

If you have two files, each with a different class, but the classes share a method with the same name, the merged output file breaks because of name overlap.

- [x] I would like to work on a fix!

**Input Code**

```js
// A.js
class A {
constructor() {}
public() { return this.#private(); }
#private() { console.log('A private'); }
}

// B.js
class B {
constructor() {}
public() { return this.#private(); }
#private() { console.log('B private'); }
}

// main.js
// Expected: "A private"
// Actual: "B private"
(new A).public();
```
Also see [this repo](https://github.com/Cxarli/babel-private-method-duplicate-issue)

**Run Command**
`npx babel A.js B.js main.js -o out.js`

**Output Code**

(slightly trimmed to make it clearer what the issue is, not actual output)

```js
var _private = new WeakSet();
class A {
constructor() { _private.add(this); }
public() { return _classPrivateMethodGet(this, _private, _private2).call(this); }
}
var _private2 = function _private2() { console.log('A private'); };

// this ID is reused
var _private = new WeakSet();
class B {
constructor() { _private.add(this); }
public() { return _classPrivateMethodGet(this, _private, _private2).call(this); }
}
// this ID is reused
var _private2 = function _private2() { console.log('B private'); };
```

**Expected behavior**
The second pair should get unique names, so they don't clash, which would make the result `"A private"`

**Babel Configuration**
- Filename: `babel.config.js`
```js
module.exports = {
plugins: [
[require("@babel/plugin-proposal-class-properties")],
[require("@babel/plugin-proposal-private-methods")],
],
};
```

**Environment**
```
Binaries:
Node: 14.7.0 - /usr/bin/node
Yarn: 1.22.4 - /usr/bin/yarn
npm: 6.14.7 - /usr/bin/npm
npmPackages:
@babel/cli: ^7.10.5 => 7.10.5
@babel/core: ^7.11.1 => 7.11.1
@babel/plugin-proposal-class-properties: ^7.10.4 => 7.10.4
@babel/plugin-proposal-private-methods: ^7.10.4 => 7.10.4
```

**Possible Solution**
Technically you can first concat the files before putting it through babel with `npx babel <(cat A.js B.js main.js) -o out.js` which means they are in the same scope and get unique functions and everything works. However, then you lose all source information (file, line) in case of errors.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.