Parcel 2: transformer-typescript-tsc not respected during build

[avalanche1]

🐛 bug report

Although, I have transformer-typescript-tsc set up in .parcelrc - it looks like the code is still being piped through Babel.
I am calling a top-level await. Clearly, Babel doesn't support that out of the box, while TS 4.1 does.

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

.parcelrc:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
  }
}

.package.json:

    "parcel": "^2.0.0-nightly.566",
    "typescript": "^4.1.3"

😯 Current Behavior

I get this console error

🚨 Build failed.
@parcel/transformer-babel: 'await' is only allowed within async functions (4:12)
SyntaxError: 'await' is only allowed within async functions (4:12)
    at Object._raise (/Users/Kat/Documents/Travail_code/WebDev/21-02_Smart-Scanner/node_modules/@babel/parser/lib/index.js:748:17)
    at Object.raiseWithData (/Users/Kat/Documents/Travail_code/WebDev/21-02_Smart-Scanner/node_modules/@babel/parser/lib/index.js:741:17)
    at Object.raise (/Users/Kat/Documents/Travail_code/WebDev/21-02_Smart-Scanner/node_modules/@babel/parser/lib/index.js:735:17)
    at Object.checkReservedWord (/Users/Kat/Documents/Travail_code/WebDev/21-02_Smart-Scanner/node_modules/@babel/parser/lib/index.js:11386:14)
    at Object.parseIdentifierName (/Users/Kat/Documents/Travail_code/WebDev/21-02_Smart-Scanner/node_modules/@babel/parser/lib/index.js:11350:12)
    at Object.parseIdentifier (/Users/Kat/Documents/Travail_code/WebDev/21-02_Smart-Scanner/node_modules/@babel/parser/lib/index.js:11317:23)
    at Object.parseExprAtom (/Users/Kat/Documents/Travail_code/WebDev/21-02_Smart-Scanner/node_modules/@babel/parser/lib/index.js:10408:27)
    at Object.parseExprAtom (/Users/Kat/Documents/Travail_code/WebDev/21-02_Smart-Scanner/node_modules/@babel/parser/lib/index.js:4763:20)
    at Object.parseExprSubscripts (/Users/Kat/Documents/Travail_code/WebDev/21-02_Smart-Scanner/node_modules/@babel/parser/lib/index.js:10150:23)
    at Object.parseUpdate (/Users/Kat/Documents/Travail_code/WebDev/21-02_Smart-Scanner/node_modules/@babel/parser/lib/index.js:10130:21)
/Users/Kat/Documents/Travail_code/WebDev/21-02_Smart-Scanner/src/entry/popup/popup.ts:4:12
  3 | const foo = (bar) => (bar ? bar + "  ikki" : 1);
> 4 | console.log(await browser.storage.local.get());
>   |            ^
  5 | //# sourceMappingURL=popup.js.map

🤔 Expected Behavior

Obviously, compile w\o errors; using tsc.

💁 Possible Solution

🔦 Context

💻 Code Sample

popup.ts:

import {browser} from "webextension-polyfill-ts";
import "./popup.sass";

const foo = (bar?: string): number | string => (bar ? bar + "  ikki" : 1);
console.log(await browser.storage.local.get());

[mischnic]

This should work:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"],
    "*.{js,mjs,jsm,jsx,es6,cjs}": ["@parcel/transformer-js"]
  }
}

[avalanche1]

Nope

🚨 Build failed.
@parcel/transformer-js: 'await' is only allowed within async functions (3:12)

[mischnic]

I'm afraid TLA isn't support at the moment: #4028

[danieltroger]

@mischnic why is TLA so complicated? Parcel wraps all code into a (function(){code})(), all it has to do is wrap it into (async function(){code})() instead, or am I missing something?

[avalanche1]

A pity about TLA.
Although, my initial issue is with .ts code being handled by Babel.

[mischnic]

@danieltroger -> #4028 (comment)

@avalanche1 tsc did run in your case, it's just that Babel also ran after that. I guess that's unexpected?

[avalanche1]

It is. Is that by design? Seems like a redundant iteration (from a user standpoint).

[mischnic]

One thing that the tsc transformer doesn't do is applying the browserslist config (= what babel-preset-env does)

[avalanche1]

1. Can we opt out of running Babel if we dont have browserslist entry in package.json?
2. Parcel 1 doesnt have this issue and runs TS seamlessly out of the box? Can we not have that same seamless experience in V2?

[mischnic]

1. That is already the case
2. TS works out of the box already (with Babel). See Switch to TSC transformer instead of Babel by default #4938 for whether TSC should be used by default

[danieltroger]

Parcel 1 doesnt have this issue and runs TS seamlessly out of the box? Can we not have that same seamless experience in V2?

Can you elaborate why you want tsc? I'm curious lol.

Imo it is buggy and I don't like its philosophy of "you have to configure it with some options you can never guess or it will transpile your code wrong". I switched to parcel 2 nightly in production solely because I wanted to get away from tsc and do not regret it.

So please let's keep the seamless experience of not using tsc.

[avalanche1]

Because, as stated in the official V2 documentation - https://v2.parceljs.org/languages/typescript/:

• Babel doesn't support tsconfig.json
• Babel doesn't support advanced features like top-level await; out of the box, needs its own proper plugins installed.

[danieltroger]

Babel doesn't support tsconfig.json

And it's not possible to configure what you want differently?

Babel doesn't support advanced features like top-level await; out of the box, needs its own proper plugins installed.

Ah yeah that sucks.
I always have to create an async function called main and call it to circumvent that :(

Thanks for the insight!

[avalanche1]

Can we opt out of running Babel if we dont have browserslist entry in package.json?

That is already the case

I can attest to that. I think that is worth noting in the docs.

[avalanche1]

I, no

Can we opt out of running Babel if we dont have browserslist entry in package.json?

That is already the case

I can attest to that. I think that is worth noting in the docs.

Ah, no; that was a false positive. Gotta re-open.
After I've deleted .parcel-cache folder and re-built - I still gotten 🚨 Build failed. @parcel/transformer-babel: 'await' is only allowed within async functions notice.
Removing browserslist entry from package.json doesn't help.

[mischnic]

Without any browserslist config and without any babelrc file, I still get @parcel/transformer-js: Unexpected reserved word 'await' (1:12) (so the Babel transformer indeed didn't run).

But as I've said, all of these workarounds don't change the fact that TLA won't work

I'm afraid TLA isn't support at the moment: #4028

[avalanche1]

Let TLA support simmer in it's own issue.
This issue is about Babel being run after TSC - which is not voluntarily.

[avalanche1]

(so the Babel transformer indeed didn't run).

Hmm.. I do get @parcel/transformer-**babel**: 'await' is only allowed within async functions ; although I dont have neither browserslist config, nor .babelrc file. How can I pin it down?

[mischnic]

You could print the used (/generated) Babel config here:

parcel/packages/transformers/babel/src/BabelTransformer.js

Line 33 in 0d3abd6

if (config?.config) {

[avalanche1]

You could print the used (/generated) Babel config here:

parcel/packages/transformers/babel/src/BabelTransformer.js

Line 33 in 0d3abd6

if (config?.config) {

I didn't understand, what you meant

[github-actions]

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.