typscript async/await not working

[wedelgaard]

It seems like async/await it not working when using gatsby-plugin-typescript :( The following error is thrown:

{my path}/gatsby-site/src/pages/index.tsx Unexpected token (13:26) You may need an appropriate loader to handle this file type.

this is how the pages/index.tsx looks like. It works without any problems if index.tsx is renamed to index.js (not typescript), but this is not desirable.
`
import * as React from 'react'
import Link from 'gatsby-link'

const asyncFunc = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('done!')
}, 1000)
})
}

const getStuff = async () => {
return await asyncFunc()
}

const IndexPage = (props: any) => {

const test = getStuff()

return (
...something
)
}

export default IndexPage
`

[jquense]

does async/await work normally with typescript? I'm not super familiar with it, perhasp you need to set the right config options?

[wedelgaard]

@jquense should be supported from v. 1.7

https://blogs.msdn.microsoft.com/typescript/2015/11/03/what-about-asyncawait/

I'm using typescript v. 2.6.1

[wedelgaard]

Hmmm it could be related to this?

https://templecoding.com/blog/2016/02/17/async-await-with-es6-babel-and-typescript/

[calcsam]

Can you add an example repo? Assume you are using https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-typescript? Can you try inserting await in https://github.com/gatsbyjs/gatsby/tree/master/examples/using-typescript and seeing if you can repro?

[wedelgaard]

@calcsam here's a repo demonstrating it https://github.com/wedelgaard/gatsby-typescript-starter

[calcsam]

Thanks for the repro! On that repo for me locally gatsby-build fails but gatsby-develop succeeds. Will label this as a bug, someone more familiar than me with TS syntax should probably take a look :)

[farcaller]

Can reproduce here too, same problem as #3356 I believe. TL;DR: TS is set to transpileOnly by default, which means it will check the types and return the source file sans TS semantics. Given that there's no babel pipeline to process it further the other code is effectively dealing with esnext and chokes up on it.

That said, transpileOnly: false is broken.

[mohsen1]

I don't understand why target exnext is forced here?

gatsby/packages/gatsby-plugin-typescript/src/gatsby-node.js

Lines 38 to 42 in ab1d7f5

	// overwrite defaults with custom compiler options
	const copts = Object.assign({}, compilerDefaults, compilerOptions, {
	target: `esnext`,
	module: `es6`,
	})

if the typescript plugin allows specifying target from outside we can resolve this issue by specifying a lower level target like es5 in tsconfig

[farcaller]

I don't understand why target exnext is forced here?

I believe the tagged literals appeared only in es2015, so you can go down at most to es2015. It doesn't make much sense as babel is supposed to handle es2015..esnext difference too, though.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!