-3

Babel incorrectly converting/transpiling the following code

const arr = [...new Set([1, 2, 3, 1])]

into

var arr = [].concat(new Set([1, 2, 3, 1]))

The first returns a list of numbers, whereas the other returns a list of set(s)

Is this a Babel bug?

Using @babel/plugin-transform-spread@7.14.6 and @babel/plugin-transform-destructuring@7.14.7

laiqjafri
  • 1
  • 1
  • 1
    How did you configure Babel? You can try out what it does here: https://babeljs.io/repl – Felix Kling Feb 07 '22 at 15:50
  • [I don't see that behavior on Babel's REPL](https://babeljs.io/REPL#?browsers=&build=&builtIns=false&corejs=3.6&spec=false&loose=false&code_lz=MYewdgzgLgBAhgJwTAvDA2gOm2ApgdxgGVcoAKdARgBoYAmWgZlsoF0BKVgKFEhABtcmACYBLBGUQJ2AbiA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=true&fileSize=false&timeTravel=false&sourceType=module&lineWrap=false&presets=env%2Ces2015%2Ces2016%2Ces2017%2Creact%2Cstage-0%2Cstage-1%2Cstage-2%2Cstage-3&prettier=false&targets=&version=7.17.1&externalPlugins=&assumptions=%7B%7D). – T.J. Crowder Feb 07 '22 at 15:52
  • What version of Babel are you using? What options (`.babelrc` or similar) are you using? It's ***very*** unlikely you found such a basic bug in Babel, though obviously it's possible. More likely, you have a setting that tells Babel to relax its correctness rules to simplify output. – T.J. Crowder Feb 07 '22 at 15:52
  • What version **of Babel** (not plugins) are you using? And again, what configuration? – T.J. Crowder Feb 07 '22 at 16:26

1 Answers1

0

This looks like it’s related to babel/babel#9108 Correctly transform spreads to use proper concat method, which was merged in v7.2.2.

As mentioned in smashercosmo’s comment on the PR…

One bad thing about this PR is that before it if somebody tried to spread Set in loose mode, clear error was thrown, but now he will get wrong output of [Set()], which will be harder to spot.

I think this is exactly what you’re seeing here. It might be because your Babel config has loose set to true, maybe, but I’m not sure.

A potential workaround would be to use Array.from:

const myArrayWithDupes = ['a', 'b', 'c', 'a'];

console.log([...new Set(myArrayWithDupes)]); // your original line
console.log([].concat(new Set(myArrayWithDupes))); // incorrect when `loose` is set to `true`
console.log(Array.from(new Set(myArrayWithDupes))); // a potential workaround
Rishabh
  • 1
  • 2
  • You may be on the right general track, but [just setting `loose` doesn't cause this](https://babeljs.io/REPL#?browsers=&build=&builtIns=false&corejs=3.6&spec=false&loose=true&code_lz=MYewdgzgLgBAhgJwTAvDA2gOm2ApgdxgGVcoAKdARgBoYAmWgZlsoF0BKVgKFEhABtcmACYBLBGUQJ2AbiA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=true&fileSize=false&timeTravel=false&sourceType=module&lineWrap=false&presets=env%2Ces2015%2Ces2016%2Ces2017%2Creact%2Cstage-0%2Cstage-1%2Cstage-2%2Cstage-3&prettier=false&targets=&version=7.17.1&externalPlugins=&assumptions=%7B%7D). – T.J. Crowder Feb 07 '22 at 16:03
  • thanks @rishabh, looks like you have narrowed it down for me – laiqjafri Feb 07 '22 at 16:22
  • @T.J.Crowder Hmm, looks like you’re right. I’ve updated my answer to only include the workaround. – Rishabh Feb 07 '22 at 16:24