Version 0.0.29 Rollup parser error

[Kobzol]

Short description of the problem:

When I upgraded to version 0.0.29, a weird parser error appears during dev build.
SyntaxError: Unexpected token (74:51) in C:/pg/Programovani/mobile/ionic2/strava5/src/app/app.component.ts at Parser.pp$4.raise (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\@ionic\app-scripts\node_modules\rollup\dist\rollup.js:4070:13) at Parser.pp.unexpected (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\@ionic\app-scripts\node_modules\rollup\dist\rollup.js:2268:8) at Parser.pp.expect (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\@ionic\app-scripts\node_modules\rollup\dist\rollup.js:2262:26) at Parser.pp$1.parseBlock (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\@ionic\app-scripts\node_modules\rollup\dist\rollup.js:2673:8) at Parser.pp$3.parseFunctionBody (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\@ionic\app-scripts\node_modules\rollup\dist\rollup.js:3938:22) at Parser.pp$1.parseFunction (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\@ionic\app-scripts\node_modules\rollup\dist\rollup.js:2764:8) at Parser.pp$3.parseExprAtom (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\@ionic\app-scripts\node_modules\rollup\dist\rollup.js:3610:17) at Parser.pp$3.parseExprSubscripts (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\@ionic\app-scripts\node_modules\rollup\dist\rollup.js:3492:19) at Parser.pp$3.parseMaybeUnary (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\@ionic\app-scripts\node_modules\rollup\dist\rollup.js:3469:17) at Parser.pp$3.parseExprOps (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\@ionic\app-scripts\node_modules\rollup\dist\rollup.js:3411:19) at Parser.pp$3.parseMaybeConditional (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\@ionic\app-scripts\node_modules\rollup\dist\rollup.js:3394:19) at Parser.pp$3.parseMaybeAssign (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\@ionic\app-scripts\node_modules\rollup\dist\rollup.js:3371:19)

The line in the TypeScript file that gives the error contains this:
() => this.session.isActive(),
the error shows location 74:51, but the line doesn't even have 51 columns, I checked it, there's no whitespace, so the error is pretty weird.
I also double checked that this didn't happen in 0.0.28 (I installed x.28, build was fine, then I removed x.28, installed x.29 or x.30 and the build fails with this).

Which @ionic/app-scripts version are you using?
0.0.29/30

[jgw96]

Hello, thanks for opening an issue with us! Would you mind posting a repo i can use to reproduce this issue? Thanks!

[Kobzol]

You can try it here: https://github.com/Kobzol/ionic-parser-tmp.
Running npm install && npm run build --dev should show the error.

[adamdbradley]

So it appears like it has to do with async/await, but not sure why typescript would have an issue with that all of a sudden. We'll dig into it, thanks.

[adamdbradley]

I'm trying to narrow this down and think of where things can be differet. What version of typescript are you using?

It seems like this way rollup/typescript doesn't have an issue with:
https://github.com/Kobzol/ionic-parser-tmp/blob/master/src/pages/orders/orders.ts#L83-L86

But with this way it does have the parse issue:
https://github.com/Kobzol/ionic-parser-tmp/blob/master/src/pages/orders/orders.ts#L89-L99

Do you have any clues why that might be?

[Kobzol]

I'm using Typescript 2.0.3. Maybe the second expression is different/harder to parse because I'm awaiting an attribute of a call expression? Yet it worked without problems in 0.0.28 and before.

[adamdbradley]

In 0.0.28 it spawned a new tsc process to compile, now it calls typescripts transpileModule method: https://github.com/driftyco/ionic-app-scripts/blob/master/src/transpile.ts#L21

But not sure what the difference would be.

[Kobzol]

I'm not sure if it's true for this kind of usage, but I found a comment that states that using this API can hide some errors: microsoft/TypeScript#9017 (comment).

[Kobzol]

I tried adding babel rollup plugin and with it it finally showed me where's the problem:

Error transforming C:/pg/Programovani/mobile/ionic2/strava5/src/app/app.component.ts with 'babel' plugin: C:/pg/Programovani/mobile/ionic2/strava5/src/app/app.component.ts: Unexpected token (74:51)
[23:57:06]  SyntaxError: C:/pg/Programovani/mobile/ionic2/strava5/src/app/app.component.ts: Unexpected token (74:51)
  72 |             new MenuEntry("Přihlásit se", function () { return _this.changePage(LoginPage); }, function () { return !_this.session.isActive(); }, "log-in"),
  73 |             new MenuEntry("Objednávky", function () { return _this.changePage(OrdersPage); }, function () { return _this.session.isActive(); }, "pizza"),
> 74 |             new MenuEntry("Informace", function () __awaiter(this, void 0, void 0, function* () {
     |                                                    ^
  75 |                 yield _this.menu.close();
  76 |                 _this.showAccountDetails();
  77 |             }), function () { return _this.session.isActive(); }, "information-circle"),
    at Parser.pp.raise (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\babylon\lib\parser\location.js:22:13)
    at Parser.pp.unexpected (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\babylon\lib\parser\util.js:91:8)
    at Parser.pp.expect (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\babylon\lib\parser\util.js:83:33)
    at Parser.pp.parseBlock (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\babylon\lib\parser\statement.js:494:8)
    at Parser.pp.parseFunctionBody (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\babylon\lib\parser\expression.js:933:22)
    at Parser.pp.parseFunction (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\babylon\lib\parser\statement.js:632:8)
    at Parser.pp.parseFunctionExpression (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\babylon\lib\parser\expression.js:522:17)
    at Parser.pp.parseExprAtom (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\babylon\lib\parser\expression.js:484:19)
    at Parser.pp.parseExprSubscripts (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\babylon\lib\parser\expression.js:270:19)
    at Parser.pp.parseMaybeUnary (C:\pg\Programovani\mobile\ionic2\strava5\node_modules\babylon\lib\parser\expression.js:250:19)
Error running ionic app script "build": SyntaxError: Error transforming C:/pg/Programovani/mobile/ionic2/strava5/src/app/app.component.ts with 'babel' plugin: C:/pg/Programovani/mobile/ionic2/strava5/src/app/app.component.ts: Unexpected token (74:51)

So I guess that TypeScript (when targeting ES6) transforms async to generator functions and Rollup doesn't understand them. That is weird, because rollup uses Acorn >= 4.0.0, which should understand them (it also did understand them in the 0.0.28). It seems to me that transpileModule produces incorrect code for async lambdas.
Babel understands them with the es2015 preset, but it then fails on this error:

Error transforming C:/pg/Programovani/mobile/ionic2/strava5/src/app/app.module.ts with 'babel' plugin: C:/pg/Programovani/mobile/ionic2/strava5/src/app/app.module.ts: "__decorate" is read-only
[00:18:15]  SyntaxError: C:/pg/Programovani/mobile/ionic2/strava5/src/app/app.module.ts: "__decorate" is read-only
  1 | /* ion-compiler */
> 2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    |     ^
  3 |     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  4 |     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  5 |     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;

[Kobzol]

After removing async lambdas, the build works. I tried using a simple async lambda with transpileModule and it works. Isn't it possible that ionic somehow preprocesses the source files and messes up async lambds? Maybe in the typescript-helpers code?

I even managed to get ES6>ES5 with async working on a device, but I had to modify some rollup plugins and the ngc/transpile build step to get it working, so a more official support would be nice.

[Jamby93]

Yeah, I'm also having trouble with async fat arrow functions. There's no way to represent them in other ways, @Kobzol would you mind sharing how did you make it compile?

[Kobzol]

Well it's certainly not an ideal way, but you can simply transform the async lambdas to async functions, so that's what I did.
{ fn: async () => { ... }}
becomes

{ fn: asyncFn }
async function asyncFn()
{
...
}

[Jamby93]

Yeah, but that would break the feature of the fat arrow functions which is to capture the thiscontext, that would force me to check every time if bind is needed.

[Kobzol]

Indeed, that sucks. I only did it as a temporary solution to verify that the async lambdas are causing the problem. I hope that it will get resolved :-)

[Kobzol]

The problem has been solved with 0.33, the development build now correctly parses the async lambdas.