Build error due to missing @babel/plugin-proposal-nullish-coalescing-operator

[gempain]

Hi !

I tried running:

gatsby new gatsby-gitbook-starter https://github.com/hasura/gatsby-gitbook-starter
cd gatsby-gitbook-starter
npm run build

then got

$ npm run build

> gatsby-gitbook-boilerplate@0.0.1 build /gatsby-gitbook-starter
> gatsby build --prefix-paths

success open and validate gatsby-configs - 0.069s
success load plugins - 0.899s
success onPreInit - 0.009s
success delete html and css files from previous builds - 0.012s
success initialize cache - 0.012s
success copy gatsby files - 0.063s
success onPreBootstrap - 0.010s
success createSchemaCustomization - 0.003s
warn Browserslist: caniuse-lite is outdated. Please run next command `npm update`
success source and transform nodes - 0.906s
success building schema - 0.333s
success createPages - 0.201s
success createPagesStatefully - 0.043s
success onPreExtractQueries - 0.002s
success update schema - 0.034s
success extract queries from components - 0.294s
success write out requires - 0.006s
success write out redirect data - 0.003s

success onPostBootstrap - 0.002s
⠀
info bootstrap finished - 6.182 s
⠀
failed Building production JavaScript and CSS bundles - 20.806s

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

/gatsby-gitbook-starter/src/components/mdxComponents/codeBlock.js: Support for the experimental syntax 'nullishCoalescingOperator' isn't currently enabled (33:95):

  31 |   } else {
  32 |     return (
> 33 |       <Highlight {...defaultProps} code={exampleCode} language={props.className.split("-")[1] ?? "javascript"} theme={prismTheme}>
     |                                                                                               ^
  34 |         {({ className, style, tokens, getLineProps, getTokenProps }) => (
  35 |           <pre className={className + ' pre'} style={style} p={3}>
  36 |             {cleanTokens(tokens).map((line, i) => {

Add @babel/plugin-proposal-nullish-coalescing-operator (https://git.io/vb4Se) to the 'plugins' section of your Babel config to enable transformation.

File: src/components/mdxComponents/codeBlock.js:33:94

not finished run queries - 20.970s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby-gitbook-boilerplate@0.0.1 build: `gatsby build --prefix-paths`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gatsby-gitbook-boilerplate@0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /.npm/_logs/2021-04-09T16_47_08_551Z-debug.log

Seems like the template isn't working out of the box.

[gempain]

Fixed by adding "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8", to package.json and then updating gatsby-node.js from

exports.onCreateBabelConfig = ({ actions }) => {
  actions.setBabelPlugin({
    name: '@babel/plugin-proposal-export-default-from',
  });
};

to

exports.onCreateBabelConfig = ({ actions }) => {
  actions.setBabelPlugin({
    name: '@babel/plugin-proposal-export-default-from',
  });
  actions.setBabelPlugin({
    name: '@babel/plugin-proposal-nullish-coalescing-operator',
  });
};

[shipsywor]

Do this:

npm i gatsby-plugin-nullish-coalescing-operator @babel/core @babel/plugin-proposal-nullish-coalescing-operator

and then

npm update