Build fails if more than one file includes a tagged template literal

[nigelzor]

🐛 bug report

Parcel generates invalid javascript when more than one file includes a tagged template literal.

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

{
  "browserslist": ["defaults"]
}

🤔 Expected Behavior

The build should succeed.

😯 Current Behavior

$ parcel build src/index.html
🚨 Build failed.

@parcel/optimizer-terser: "_" is redeclared

    2885 | 
  > 2886 | let _ = (t)=>t
  >      |    ^ "\_" is redeclared
    2887 | , t;
    2888 | const $85deba37093b6689$export$c9cacf6069bed432 = $cc85e8b8e7405a89$export$2e2bcd8739ae039.div(t || (t = _`

  💡 It's likely that Terser doesn't support this syntax yet.

With --no-optimize, a SyntaxError: redeclaration of let _ will be thrown at runtime instead.

💁 Possible Solution

🔦 Context

💻 Code Sample

A sample project demonstrating this issue is available here: https://github.com/nigelzor/parcel-bad-tagged-templates

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0
Node	14.17.3
Yarn	1.22.5
Operating System

[mischnic]

Reproduction (with "browserslist": ["Chrome 40"]):

// red.js
export const Red = String.raw`
    color: red;
`;


// index.js
import { Red } from "./red.mjs";
const Blue = String.raw`
    color: blue;
`;
console.log(Red, Blue);

produces:

function _templateObject() {
    var data = $5e409c1f3bf46915$export$2e2bcd8739ae039([
        "\n    color: red;\n"
    ]);
    _templateObject = function _templateObject() {
        return data;
    };
    return data;
}
var _ = function(t) {
    return t;
}, t;
var $51015df37f6ab11b$export$b7d7e6f1815ae490 = String.raw(t || (t = _(_templateObject())));


function _templateObject() {
    var data = $5e409c1f3bf46915$export$2e2bcd8739ae039([
        "\n    color: blue;\n"
    ]);
    _templateObject = function _templateObject() {
        return data;
    };
    return data;
}
var _ = function(t) {
    return t;
}, t;
var $0147a7bdfc4f9f3f$var$Blue = String.raw(t || (t = _(_templateObject())));
console.log($51015df37f6ab11b$export$b7d7e6f1815ae490, $0147a7bdfc4f9f3f$var$Blue);

Might be related: swc-project/swc#2486

[Oupsla]

Hello, got the same problem with parcel (v2) and using styled-components.

I didn't know it was related to tagged template literal but since styled-components use a lot of them, it seems related.

If it helps, I got :

🚨 Build failed.

@parcel/optimizer-terser: "_" is redeclared

    115098 | );
  > 115099 | var $478f3fb9d8f5b7d8$export$2e2bcd8739ae039 = $478f3fb9d8f5b7d8$var$Background;
  >        |    ^ "\_" is redeclared
    115100 | 
    115101 | });

  💡 It's likely that Terser doesn't support this syntax yet.

With "browserslist": "> 0.5%, last 2 versions, not dead",

Removing browserlist from package.json resolve this issue but it removes the optimization from parcel (since terser is not called).

[mebtte]

Same issue when updating to 2.0.0 from 2.0.0-rc.

[bachngotiki]

Hello, got the same problem with parcel (v2) and using styled-components.

I didn't know it was related to tagged template literal but since styled-components use a lot of them, it seems related.

If it helps, I got :

🚨 Build failed.

@parcel/optimizer-terser: "_" is redeclared

    115098 | );
  > 115099 | var $478f3fb9d8f5b7d8$export$2e2bcd8739ae039 = $478f3fb9d8f5b7d8$var$Background;
  >        |    ^ "\_" is redeclared
    115100 | 
    115101 | });

  💡 It's likely that Terser doesn't support this syntax yet.

With "browserslist": "> 0.5%, last 2 versions, not dead",

Removing browserlist from package.json resolve this issue but it removes the optimization from parcel (since terser is not called).

Thanks for your tip.
Yes. But also your code now might not run on older browsers.

[tbassetto]

Since the linked issue on SWC project is closed, can we expect an update of parcel with the fix soon? Or is there a workaround in the meantime?

[mischnic]

This is still broken in Parcel even though swc version was bumped since then. (You can test this with the nightly version)

[michielvanderros-tomtom]

The tip about .browserlistrc did the trick for me. I went over the lines one by one, and I still had safari >= 10.1 in there. Removing this did the trick, despite even still having IE11 on the list.

Update: Pinpointed it more precisely. The issue for me is triggered by supporting ios_saf 12.2-12.5. This get included in the defaults setting and by usage > 0.5%. Adding an extra rule not ios_saf < 13 fixed the issue of the _ redeclaration tripping Terser.

[avsmithy]

Adding the not ios_saf < 13 rule to the sample project (https://github.com/nigelzor/parcel-bad-tagged-templates) allows it to compile. Thanks for the workaround @michielvanderros-tomtom!

[jeffpeck10x]

I am having this issue in a project that is using parcel@2.1.1.

Setting browserslist to the following seems to fix parcel build:

  "browserslist": [
    "defaults",
    "not ios_saf < 13"
  ],

Whereas doing this does NOT work:

"browserslist": "> 0.5%, not op_mini all, not ie 11, not ios_saf < 13",

So, there is probably some other browser in the list that needs to be explicitly removed.

---

Either way though, how can anybody use this solution? It still will not work with parcel serve regardless of browserslists, throwing this at runtime:

Uncaught SyntaxError: Identifier '_' has already been declared

Is there another workaround for that, or anything that I might be missing?

[jeffpeck10x]

Please disregard my previous comment. Indeed, adding not ios_saf < 13 to the browserslist fixes it.

If anyone is curious, the reason that I still encountered what I did above is because I was using an already built library that contained these tagged template literals AND I had built it with --no-optimize so I never saw an error message.

It wasn't until it was dropped into another project running parcel@2.1.1 (not sure if that detail is relevant) that the issue was even noticed, upon which I tried modifying browserslist in that project, following the advise of this thread.

Once I went back to the previous project and "fixed" it by putting not ios_saf < 13 in the browerslist, everything was all good (at least for everybody who has ever updated ios some time in the last 3 years)

[sladg]

Experiencing same issue once I use "default" for Browserlist.
Running Parcel 2.5.0

[aehrenthal]

Experiencing the same issue with Parcel 2.5.0 when using Iterators.

.browserslistrc

chrome >= 79
firefox >= 85
safari >= 13
edge >= 88

index.ts

export * from "./IteratorOne";
export * from "./IteratorTwo";

IteratorOne.js

export class IteratorOne {
  iterable;

  constructor(users) {
    this.iterable = users;
  }

  *[Symbol.iterator]() {
    yield* this.iterable;
  }

  testMethod() {
    console.log("test one");
  }
}

IteratorTwo.js

export class IteratorTwo {
  iterable;

  constructor(cars) {
    this.iterable = cars;
  }

  *[Symbol.iterator]() {
    yield* this.iterable;
  }

  testMethod() {
    console.log("test two");
  }
}

It produces the following output

The following .browserslistrc seems to work

chrome >= 79
firefox >= 90
safari >= 15
edge >= 88

The suggested solution of

  "browserslist": [
    "defaults",
    "not ios_saf < 13"
  ],

does not fix this issue.