Gatsby Config gives error in Javascript file for ?? operator

Question

I am trying to run a Gatsby site but when I do npm run develop, I am getting this error:

> gatsby develop

 ERROR #10123  CONFIG

We encountered an error while trying to load your site's gatsby-config. Please fix the error x try again.



  Error: D:\Coding\web-blog\src\infra\feed.js:28
  description: post.intro ?? post.description,
                           ^

Code:

const item = {
                title: sanitizeTitle(post.title),
                description: post.intro ?? post.description,
                url: `${site.siteMetadata.siteUrl}/${post.slug}`,
                guid: `${site.siteMetadata.siteUrl}/${post.slug}`,
                categories: post.tags,
                author: site.siteMetadata.author,
                date: post.date,
            }

What is ?? operator in Javscript? Is it a new language feature?

_“What is this operator in Javascript?”_ — [The nullish coalescing operator](https://stackoverflow.com/q/476436/4642212); see [What does this symbol mean in JavaScript?](https://stackoverflow.com/q/9549780/4642212) and the documentation on MDN about [expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) and [statements](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements). — Sebastian Simon, Feb 10 '21 at 14:27
As for the error: make sure your environment understands ECMAScript 2020. — Sebastian Simon, Feb 10 '21 at 14:29

Ferran Buireu · Accepted Answer · 2021-02-10T15:12:31.083

The nullish coalescing operator (??) it's a feature from ECMAScript 2020 (see TC39 proposal). You can add it by modifying the babel configuration or by installing the gatsby-plugin-nullish-coalescing-operator plugin.

If you choose the first version, add a .babelrc in the root of your project and populate it with the following:

{
  "plugins": [
    ["@babel/plugin-proposal-nullish-coalescing-operator"]
  ],
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ]
  ]
}

Note: you will need to install the @babel/plugin-proposal-nullish-coalescing-operator dependency.

What is this operator in Javascript?

The nullish coalescing operator (??), uses the right value if left is null or undefined. The main difference between the OR operator (||) is in the falsy values where it can lead to some errors while used in "", 0 or false values (there are more falsy values such as -0, NaN, etc but those are the common). So:

description: post.intro ?? post.description,

You will use post.intro as long as it exists, otherwise (if post.intro is null or undefined), you will use post.description.

Have tried adding `.babelrc` as well as gatsby plugin (via `npm install`) , still facing issue — Ayman Patel, Feb 10 '21 at 15:22
Have you installed `npm install --save-dev babel-preset-gatsby` as the docs points? https://www.gatsbyjs.com/docs/how-to/custom-configuration/babel/ — Ferran Buireu, Feb 10 '21 at 15:27

score 2 · Answer 2 · answered Feb 11 '21 at 02:18

The gatsby-config.js file and any plugin code (or code it requires) isn't compiled by Babel before Gatsby loads it so any syntax you use must be supported by the version of Node.js you have installed. It looks like the ?? operator is supported in Node.js 14+ so check your version of Node by running node --version.

My favorite way of upgrading Node (as I'm guessing you'll need to do) is with https://www.npmjs.com/package/n

score -1 · Answer 3 · edited Mar 25 '21 at 10:35

Add dependencies to use ES2020 features for null coalescing.

npm install --save-dev babel-preset-gatsby
npm i gatsby-plugin-nullish-coalescing-operator @babel/core

Add .babelrc file with the following configurations:

{
    "plugins": [
      ["@babel/plugin-proposal-nullish-coalescing-operator"]
    ],
    "presets": [
      [
        "babel-preset-gatsby",
        {
          "targets": {
            "browsers": [">0.25%", "not dead"]
          }
        }
      ]
    ]
  }

Make sure you are running Node 14.x which supports ES2020 features

Gatsby Config gives error in Javascript file for ?? operator

3 Answers3