Parcel: Broken handling of Iterables

[annolangen]

🐛 bug report

Typescript supports Iterables and Chrome handles it well. Parcel, however, bundled up broken code for two cases;

• [...f.elements()] is transpiled to __spreadArrays(f.elements()) for function* f.elements().
• for (const v of f.elements()) is transpiled to a loop that attempts to access non-existing field length of the iterable.

My extensive search leads me to believe that this is due to "automatic" babel transforms and led me to try advice from various closed issues. I am already trying to no avail browserslist and .babelrc. Using a combination of rollup, tsconfig, and serve I can see my code working in Chrome.

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

.babelrc:
{
"presets": [
["env", {
"useBuiltIns": "entry",
"targets": {
"browsers": ["last 1 Chrome version"]
}
}]
]
}

package.json:
{
"private": true,
"scripts": {
"fix": "gts fix; tsc --noEmit",
"run": "parcel index.html",
"test": "jest"
},
"dependencies": {
"lit-html": "^1.1.0"
},
"devDependencies": {
"@types/jest": "^24.0.18",
"gts": "^1.0.0",
"jest": "^24.9.0",
"parcel": "^1.12.3",
"rollup": "^1.23.1",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-typescript2": "^0.24.3",
"serve": "^11.2.0",
"ts-jest": "^24.1.0",
"typescript": "^3.5.2"
},
"browserslist": [
"last 1 Chrome version"
]
}

🤔 Expected Behavior

[...f.elements()] should materialize an array from the iterable.
for (const v of f.elements()) should loop over the iterable contents
I have this working in unit tests and in Chrome when building with rollup.

😯 Current Behavior

Uncaught RangeError: Invalid array length
at __spreadArrays (app.ts:6)

No looping over elements in for-of loop.

💁 Possible Solution

Some configuration to neutralize Babel?

🔦 Context

I am trying to use Typescript, where iterables are a nice feature. I got my unit tests to work. I understand that different target browsers require different code generation, but I expect all generated code to conform to the Typescript specification. I expect that targeting a modern browser will generate more compact and cleaner code, than targeting obsolete browsers. Parcel, however, generates broken code.

💻 Code Sample

https://github.com/annolangen/parcel-issue

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.12.4
| Node | v10.16.0
| npm/Yarn |6.11.3
| Operating System | MacOs

[calebegg]

I ran into this issue. For me the solution was to add "downlevelIteration": true to my tsconfig.json, even though it used extends with a tsconfig.json that had that option.

[annolangen]

Thank you, this is a welcome workaround. A top level tsconfig.json with compilerOptions "downlevelIteration": true solves the issue for me, even without .bablerc or browserslist.

[babakness]

I have this issue too, ideally would do the right thing out of the box.

[RamIdeas]

I had this exact issue -- thanks to @calebegg for mentioning the quirk

I guess the real issue is that the extends field in tsconfig.json is not respected

[Grkmus]

I am having a similar problem. I am not using ts. How can I set this option?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.