babel: Destructuring doesn't work on strings in a `.ts` file bundled by parcel

Bug 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("")
    }

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15 (7 by maintainers)

Most upvoted 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

devongovett on Dec 8, 2020

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.

try rename main.ts to main.js and volia

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 npm v1.12.4 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?

danieltroger on Dec 9, 2020

Thanks!

I’m closing this issue since it’s not a Babel bug.

nicolo-ribaudo on Dec 8, 2020

@devongovett Maybe you know what could be causing the problem?

nicolo-ribaudo on Dec 8, 2020

The reproduction repo uses parcel to transform main.ts. The .ts file is not handled by @babel/core in parcel(Try rename main.ts to main.js and volia), instead it uses typescript. I am not familiar with parcel + typescript so I would suggest file an issue there.

JLHwung on Dec 8, 2020

Hey @danieltroger! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we’re a limited number of volunteers, so it’s possible this won’t be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

babel-bot on Dec 7, 2020