regeneratorRuntime is not defined in TypeScript run in web

Question

I play a demo with Vue.js + TypeScript + Parcel, and try async/await in index.ts .

index.html

<html>
...
<body>
  <script src="index.ts"></script>
</body>
</html>

index.ts

console.log('Not see me')
(async () => {
  console.log('Did not execute here too.')
})()

Execute parcel index.html and open the http://localhost:1234/. The console throw the error: regeneratorRuntime is not defined

index.a4a28941.js:110 Uncaught ReferenceError: regeneratorRuntime is not defined
    at index.a4a28941.js:110
    at Object.parcelRequire.306 (index.ts:3)
    at newRequire (index.a4a28941.js:48)
    at parcelRequire.306 (index.a4a28941.js:80)
    at index.a4a28941.js:106

It seems the async syntax need the polyfill?

Here is my tsconfig.json:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "jsx": "preserve",
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "esnext.array", "dom", "dom.iterable", "scripthost", "es2015.generator"]
  },
  "parcelTsPluginOptions": {
    // If true type-checking is disabled
    "transpileOnly": false
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}

score 11 · Answer 1 · answered Jul 18 '18 at 15:54

My solution was to set the target to "es5" in the tsconfig.jsonfile:

{
  "compilerOptions": {
    "target": "es5"
  }
}

However it seems like parcel is always using babel to transform javascript and that is causing some clashes with the typescript compiler (see here: https://github.com/parcel-bundler/parcel/issues/954 and here: https://github.com/parcel-bundler/parcel/issues/871). Some guys also solved this problem by requiring babel-polifill in their projects but this seems not to be the best option if you only want to use the typescript compiler and not having babel transforming anything.

regeneratorRuntime is not defined in TypeScript run in web

1 Answers1