Gatsby: Object spread operator not supported?

[wedelgaard]

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 }))

[alampros]

Sounds like you might need to include a polyfill in your webpack entries.

Are you transpiling your typescript with tsc or a webpack loader? If you're using a webpack loader, I don't think it includes any polyfills by default.

[wedelgaard]

I've added Typescript as a Gatsby plugin. https://www.gatsbyjs.org/packages/gatsby-plugin-typescript/

[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 ;)

[wedelgaard]

@alampros sorry, was a bit too quick. It doesn't seem to fix the issue 👎

[alampros]

I'm fairly sure this is a typescript configuration issue, and not a problem with gatsby. I'm using the spread operator in several gatsby sites without TS.

I haven't played with ts recently, but I would start by looking at the compiler options for typescript. The --lib option looks pretty promising at first glance.

[wedelgaard]

@alampros hmm tried various options for lib in the tsconfig file, doesn't seem to help. Weird. Typescript should support this at version 2.1

[wedelgaard]

Haven't been able to solve this yet... tried adding a bunch a different libs to tsconfig.json without any luck :(

[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]

@clarkdave seems to work great! Thx 👍

[sarahannnicholson]

I cant seem to use Object Spreading in a .js file. Maybe I am doing something wrong?
gatsby version = 2.0.0-beta.16
node version = v6.14.2
npm version = 3.10.10

I have a config.js file the looks like this

let baseConfig = {
  commonProp: ""
}

let config = {
    ...baseConfig,
    production: {
      api: {
        url: 'https://example.com',
      },
    },
    development: {
      api: {
        url: 'https://example2.com'
      },
    },
  };

module.exports = config[process.env.NODE_ENV] || {};

(I followed oliverbenns post from here )

in my gatsby-config.js

const config = require("./config")

module.exports = {
  siteMetadata: {
    title: config.commonProp,
  },
plugins: [ /* my plugins list */ ]
}

but upon gatsby develop I get

 Error: /mnt/d/Moncton4/config.js:6
      ...baseConfig,
      ^^^
  SyntaxError: Unexpected token ... 

[KyleAMathews]

Make sure you're in node 8.6+ https://medium.com/@adambrodziak/use-js-object-spread-operator-instead-of-object-assign-pattern-in-node-8-125a4914f6dd