Destructuring doesn't work on strings in a `.ts` file bundled by parcel
See original GitHub issueBug Report
- I would like to work on a fix!
Current behavior
- REPL, Codesandbox, or GitHub Repo helps!
Input Code
function formatprice(price){
const [...price_array] = Number(price).toString();
let reversed_price = price_array.reverse(),
formatted_price = [];
reversed_price.forEach((character, index) => formatted_price.push(...(index && !(index % 3) ? [" ", character] : [character])));
return formatted_price.reverse().join("");
}
Expected behavior
This is what happens in the newest versions of chrome and firefox when not transpiling with babel
> formatprice(12345678910)
< "12 345 678 910"
What happens instead?
Uncaught TypeError: price_array.reverse is not a function
formatprice main.ts:120
<anonymous> debugger eval code:1
Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)
- Filename:
.babelrc
{
"presets": ["env",["@babel/preset-env", {
useBuiltIns: "usage", // or "entry"
corejs: 3,
}]]
}
Environment
System:
OS: macOS High Sierra 10.13.6
Binaries:
Node: 15.3.0 - /usr/local/bin/node
Yarn: 1.22.10 - [censored]/node_modules/.bin/yarn
npm: 6.14.9 - [censored]/node_modules/.bin/npm
npmPackages:
@babel/core: ^7.11.4 => 7.12.9
@babel/preset-env: ^7.11.0 => 7.12.7
babel-cli: ^6.26.0 => 6.26.0
babel-core: ^6.26.3 => 6.26.3
babel-preset-env: ^1.7.0 => 1.7.0
- How you are using Babel:
cli
Possible Solution
Additional context
It gets transpiled to this:
function X(e) {
var t = Number(e).toString().slice(0).reverse(),
r = [];
return t.forEach(function(e, t) {
return r.push.apply(r, !t || t % 3 ? [e] : [" ", e])
}), r.reverse().join("")
}
Issue Analytics
- State:
- Created 3 years ago
- Comments:15 (7 by maintainers)
Top Results From Across the Web
Scope hoisting - Parcel
Parcel's implementation of scope hoisting works by analyzing each module independently and in parallel, and at the end concatenating them together.
Read more >Property does not exists on type when destructuring ...
I want to use the interface defined in the model as the argument of a function. // model/interface.ts import { Document } from...
Read more >API - ESBuild
Bundling with esbuild only works with statically-defined imports (i.e. when the import path is a string literal). Imports that are defined at run-time...
Read more >How to set up a TypeScript project - Medium
NPM is bundled with Node.js, a web server you control entirely with JavaScript code. NPM is tightly integrated with Node. For example, the...
Read more >rollup.js
compile to a CommonJS module ('cjs') rollup main.js --file bundle.js ... and dramatically reduces the complexity of the problems you'll need to solve, ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Parcel 1 uses TSC for compiling typescript files, not babel. I would report this issue to TS instead. Here’s a reproduction: https://www.typescriptlang.org/play?noImplicitAny=false&target=1#code/GYVwdgxgLglg9mABMOAnAtgQygB1TCAUwAo8DCBKAbwChFEIEBnKRAbQDouyiB9TVKkwBPALqIAvIgByIdACNCqUviIUOUOAGUo+MAHNiFANx1EAG0KtUhAG5KmhACa8ehSYjf9BIjjfuojkYANGYoGNhQzq6q7lJsoqb0-g7RbhzhAKKYEAAWxMR5AjlRqMGIMGBOhAAeFJIAfMhoWFBRLuk4IEz5XBzEldU1iABkI4gAhANVtYgApIgAzPUA-OwARIjr5UVC0EriAFzsuyUHFBdJiDZQIKhI4a3tMeR+dqlGHABWcJXE6+sTDQAL40GiPbBuYgARgATIsACwAVgAbAB2AAcAE5oQAGCg0IA
Thanks a lot guys for the help!
I searched the typscript issues and apparently it’s expected behaviour??? They’re nuts.
I don’t see any benefits of typescript, all I want is my code to be transpiled to work in all browsers IE11 and newer, so I tried to switch to babel.
And it worked! I had issues before with .js files not getting transpiled (especially async functions) which was why I used
.ts
, but I guess those have been fixed with babel v7 or some obscure configuration option.I had to add this though to make it not complain about an unexisting regeneratorRuntime https://babeljs.io/docs/en/babel-plugin-transform-runtime
@devongovett you’re saying “Parcel 1”, is there something newer and better? I tried browsing the parcel site but it’s not clear if there’s a new version. There’s this project which says “closed” but the progress bar isn’t finished. And here it says that the old docs are outdated, suggesting there might be a new version? But further up it says suggesting there’s not
@JLHwung sorry for hijacking this but as a fresh babel user, is it possible to automatically get polyfills just for the functions I use? Setting corejs of “@babel/plugin-transform-runtime” to false makes the output 139KB smaller but does the
"corejs": 3
from"@babel/preset-env"
, still mean I get polyfills? Or do I have to continue manually importing them from core-js whenever I use them?