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

[danieltroger]

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

[babel-bot]

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."

[danieltroger]

@babel-bot

This link is no longer active

To join this workspace, you’ll need to ask the person who originally invited you for a new link.

[danieltroger]

I figured out that

const [...string_as_array] = string;

Is the same as

const string_as_array = string.split("");

But I'm sad that the magic of babel "just working" got destroyed as .split("") is a much uncooler solution.

So a possible solution would to transpile such cases to .split("")

[JLHwung]

babel-cli: ^6.26.0 => 6.26.0
babel-core: ^6.26.3 => 6.26.3

You are using Babel 6, which is not supported, please upgrade to Babel 7 and see if it is reproducible.

[danieltroger]

Hello, thank you for your response.

I was not aware I was using an old version :(

I ran this:

npm install @babel/core --save
npx babel-upgrade --write

envinfo now looks like this:

$ npx envinfo --preset babel

  System:
    OS: macOS High Sierra 10.13.6
  Binaries:
    Node: 15.3.0 - /usr/local/bin/node
    Yarn: 1.22.10 - [redacted]/node_modules/.bin/yarn
    npm: 6.14.9 - [redacted]/node_modules/.bin/npm
  npmPackages:
    @babel/core: ^7.0.0 => 7.12.9 
    @babel/preset-env: ^7.0.0 => 7.12.7 

The code now was transpiled to this (I deleted my dist directory so this is freshly generated):

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

The error persists:

Uncaught TypeError: price_array.reverse is not a function
    formatprice main.ts:130
    <anonymous> debugger eval code:1
debugger eval code:9434:36

[nicolo-ribaudo]

Try uninstalling babel-cli, babel-core and babel-preset-env and removing env from your config.

[danieltroger]

I apologise for my previous comment, I forgot to switch to my babel-v7 branch.

The only difference running your commands did was removing "babel-preset-env": "^1.7.0", from package.json and it did the trick!

It now transpiles to function X(e){var t=[];return Number(e).toString().split("").reverse().forEach(function(e,r){return t.push.apply(t,!r||r%3?[e]:[" ",e])}),t.reverse().join("")} and returns the correct output.

Thank you very much for your help and sorry again for not being on the newest version or whatever.
Is there some auto-updater? I thought running npm update installed all updates…

THE ISSUE PERSISTS, PLEASE TRY IT YOURSELF

I apologise for my apologisation, it still doesn't work.

I forgot to revert my manual fix to the actual function. As said above, the only change was that babel-preset-env went away. Babel-upgrade must have done the rest, including changing .babelrc.

The transpiled output looks like 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("")}

Here's a screenshot to my deleted comment to which I now again stand.

[JLHwung]

I can not reproduce your issue on REPL (Babel 7): There is reason why we ask you to provide an REPL link in the issue template when you create a bug report.

It will be great if you can share a reproduction repo, otherwise we can only guess what may be going wrong, e.g.

Did you install @babel/cli?
Did you have globally install babel-cli?
Did you try rename .babelrc to babel.config.json?
What is your minifier? Uglify or Terser?
......

[danieltroger]

Oh my god, it can actually do it, there's hope!

Thanks a lot for that REPL link, it was awesome to see it transpile.

I think many more people would use it if it actually was usable like the one you sent, i.e. you put code on one side and on the other there's output transpiled by babel. The one in the issue template which didn't 404 (like the slack invite link) puts you into some react situation and I tried to add code there but it didn't get executed. I didn't bother to figure out how to configure that thing correctly and proceeded without.

Here's a "reproduction repo": https://filebin.net/77524fgxrpmfzo5h

You need to run npm install and then npm run build and then the output will be in the dist directory. Idk what minifies, I think it's parcel?

I don't have any babel globally

daniel@iMac:/tmp/test2$ npm list -g --depth 0
/usr/local/lib
├── asar@3.0.3
├── http-server@0.12.3
├── npm@6.14.9
├── svgexport@0.4.1
├── ts-node@9.0.0
└── typescript@4.1.2

npm ERR! invalid: minimist@0.0.8 /usr/local/lib/node_modules/http-server/node_modules/mkdirp/node_modules/minimist
npm ERR! missing: readable-stream@^2.2.2, required by concat-stream@1.6.2
npm ERR! invalid: debug@2.6.9 /usr/local/lib/node_modules/svgexport/node_modules/extract-zip/node_modules/debug

Did you install @babel/cli?

I suppose, it's in packages.json

Did you try rename .babelrc to babel.config.json?

Doesn't help

[danieltroger]

FYI, this is where I get when I click on the repl link in the issue template: https://github.com/babel/babel/issues/babeljs.io/repl and there's a 404 error

And this is the other one: https://codesandbox.io/s/babel-repl-custom-plugin-7s08o?file=/src/index.js
Ah, now I remember. I think the other one just styled the code you wrote on the left side. Both equally useless. You can maybe add the link you sent me as example?

[JLHwung]

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.

[nicolo-ribaudo]

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

[devongovett]

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

[nicolo-ribaudo]

Thanks!

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

[danieltroger]

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
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?