Microbundle: TypeScript - Unexpected token v0.8.3

Created on 4 Dec 2018  路  11Comments  路  Source: developit/microbundle

example file

export class MyClass {
    async foo() {}
}

error

> microbundle build --target node --format cjs,es -o dist

Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

at /index.ts:2:10

1: export class MyClass {
2:     async foo() {}
             ^
3: }

repo: https://github.com/scttcper/microbundleunexpected

Most helpful comment

I think I know why this is happening (still need to find a fix). rollup-plugin-babel has a check in place that checks if the given path of a file/module matches this regex (\.js|\.jsx|\.es6|\.es|\.mjs)$. The regex is created during runtime and not static. Additionally the TS plugin doesn't change the extension from .ts to .js. Because of that the above regex check fails and babel compilation is skipped.

All 11 comments

Just ran into this myself. This is a regression in 0.8. 0.7 works fine.

Thanks for the repo to reproduce it. This helps a lot馃憤 I'll look into it

My issue is slightly different: in 0.8 the output still contains async and await keywords. In 0.7 it doesn't.

The command i'm using is: microbundle -i src/index/index.ts -o dist/index/index.js -f cjs --sourcemap false

@jpzwarte With the same repo linked above?

No, but you can reproduce with an IIFE:

(async function () {
  console.log('foo');
})();

The above code will not cause an error when microbundle runs (if you remove the IIFFE it will cause an error).

Briefly digged into it and it doesn't seem to be related to TS specifically. For the class based code rollup will end up with something like this, which is invalid:

// Source
class Foo {
  async bar() {}
}

// Output
function Foo() {}
Foo.prototype.async bar() {}

Still need to find the source and what is causing this.

I think I know why this is happening (still need to find a fix). rollup-plugin-babel has a check in place that checks if the given path of a file/module matches this regex (\.js|\.jsx|\.es6|\.es|\.mjs)$. The regex is created during runtime and not static. Additionally the TS plugin doesn't change the extension from .ts to .js. Because of that the above regex check fails and babel compilation is skipped.

Fix is basically ready, but I ran into a bug in TypeScript itself when external helpers are used: https://github.com/Microsoft/TypeScript/issues/28849

@marvinhagemeister could we circumvent that by disabling externalHelpers?

@rpetrich Implemented support for non-hoisted var-keywords in his babel plugin. That's cleaner imo than disabling externalHelpers. The next version of that will likely be released soon.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

peter-mouland picture peter-mouland  路  12Comments

omgovich picture omgovich  路  16Comments

smithki picture smithki  路  19Comments

artemtam picture artemtam  路  19Comments

skipjack picture skipjack  路  11Comments