I recently experimented with Vue.js + TypeScript + Parcel, exploring the usage of async/await in my index.ts file.
index.html
<html>
...
<body>
<script src="index.ts"></script>
</body>
</html>
index.ts
console.log('I am not visible')
(async () => {
console.log('This doesn't get executed either.')
})()
After running parcel index.html and accessing http://localhost:1234/, an error is displayed in the console: 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 like the async syntax requires a polyfill to work correctly?
Below is my configuration in 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"]
}