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?

Answer 1

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.