Object spread operator not supported?

Hi, I’m having trouble using object spread operators. I’m using gatsby together with typescript. Typescript does not complain. I must be related to gatsby’s build process? (Module build failed: SyntaxError: Unexpected token).

Here’s the actual code it complains about

data.push({ key: doc.id, ...doc.data(), })

Using Object.assign() works… but meeeww… 👎

data.push(Object.assign(doc.data(), { key: doc.id }))

[clarkdave]

@wedelgaard

I’ve figured out why this happens, and have a solution. The gatsby typescript plugin runs the ts-loader on .tsx? files, followed by babel with the extract-graphql plugin to look for and transform graphql literals.

The invocation of the babel-loader here doesn’t explicitly enable any babel plugins, so babel is unable to parse object spread (and presumably decorators too) because tsc passes those through as they are.

Easy fix though! Just make sure you have a .babelrc in your project root with the env preset and the transform-object-rest-spread plugin:

{
  "presets": ["env"],
  "plugins": ["transform-object-rest-spread"]
}

Once this is done, the invocation of babel that runs after TypeScript will be able to parse the spread syntax and, in combination with the env preset, will transpile everything down so it can be safely bundled during a build too. You can configure the env preset with the same options as Gatsby.

Babel 7 supports native parsing of TypeScript, so when that’s released and incorporated into Gatsby it may be easier to use that instead of the current double transpilation approach.

[wedelgaard]

@alampros just managed to figure out what was wrong. Using the optional configuration stated at https://www.gatsbyjs.org/packages/gatsby-plugin-typescript/ seems to do the job just fine.

plugins: [ { resolve: 'gatsby-plugin-typescript', options: { transpileOnly: true, // default compilerOptions: { target: esnext, experimentalDecorators: true, jsx: react, }, // default } }, ]

Instead of using

plugins: [ gatsby-plugin-typescript, ]

Thanks for having a look at this 😉