Latest version of Gatsby is throwing error - Support for the experimental syntax 'jsx' isn't currently enabled

Description

Gatsby installed - "gatsby": "^2.24.47", SyntaxError: node_modules\gatsby\cache-dir\gatsby-browser-entry.js: Support for the experimental syntax ‘jsx’ isn’t currently enabled

Steps to reproduce

1. Install Gatsby npm i gatsby
2. npm start

Expected result

It should compile as expected and I can use gatsby

Actual result

Environment

I couldn’t run gatsby info even after installing the cli. I don’t know whats going on., but here are the dependencies in my package.json

"dependencies": {
    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "bootstrap": "^4.5.2",
    "core-util-is": "^1.0.2",
    "font-awesome": "^4.7.0",
    "fontawesome": "^5.6.3",
    "gatsby": "^2.24.47",
    "gatsby-cli": "^2.12.87",
    "gatsby-source-notionso": "^1.1.6",
    "react": "^16.13.1",
    "react-addons-css-transition-group": "^15.6.2",
    "react-dom": "^16.13.1",
    "react-goodreads": "^1.0.8",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.0.1",
    "reactstrap": "^8.5.1" 
}

[chrispytoes]

I’m getting this same error in a Gatsby project of mine right now.

It just started right after updating my NPM version to the latest. That’s all I’ve done, no changes to the project and it was just working before the NPM update.

This is the console log right before the error I get when running gatsby develop:

success onPreExtractQueries - 0.001s
success extract queries from components - 0.782s
success write out requires - 0.040s
success run static queries - 0.440s - 6/6 13.63/s
success run page queries - 0.060s - 44/44 739.18/s
error Generating SSR bundle failed

Unexpected token (26:4)

When doing a production build with gatsby build I get a more descriptive error:

failed Building production JavaScript and CSS bundles - 28.669s
error Generating JavaScript bundles failed

E:\projects\gatsby\k3veterans\node_modules\Gatsby\cache-dir\gatsby-browser-entry.js: Support for the experimental syntax 'jsx' isn't currently enabled (26:5):

  24 | 
  25 |   return (
> 26 |     <React.Fragment>
     |     ^
  27 |       {finalData && render(finalData)}
  28 |       {!finalData && <div>Loading (StaticQuery)</div>}
  29 |     </React.Fragment>

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

Here’s my dependencies:

"dependencies": {
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
  "@fortawesome/react-fontawesome": "^0.1.13",
  "@msigwart/gatsby-source-google-calendar": "^0.2.1",
  "@reach/skip-nav": "^0.11.2",
  "@types/react": "^16.14.2",
  "@types/react-big-calendar": "^0.24.8",
  "@types/react-datepicker": "^3.1.2",
  "@types/react-fontawesome": "^1.6.4",
  "@types/react-helmet": "^6.1.0",
  "@types/react-text-mask": "^5.4.6",
  "axios": "^0.21.0",
  "dotenv": "^8.2.0",
  "formik": "^2.2.6",
  "gatsby": "2.25.3",
  "gatsby-background-image": "^1.3.1",
  "gatsby-image": "^2.7.0",
  "gatsby-plugin-fontawesome-css": "^1.0.0",
  "gatsby-plugin-manifest": "2.4.35",
  "gatsby-plugin-offline": "3.3.3",
  "gatsby-plugin-postcss": "2.3.13",
  "gatsby-plugin-react-helmet": "3.3.14",
  "gatsby-plugin-sharp": "^2.10.1",
  "gatsby-plugin-typescript": "^2.8.0",
  "gatsby-source-wordpress-experimental": "^5.0.1",
  "gatsby-transformer-sharp": "^2.8.0",
  "googleapis": "^65.0.0",
  "moment": "^2.29.1",
  "postcss-import": "^13.0.0",
  "postcss-preset-env": "^6.7.0",
  "prop-types": "15.7.2",
  "react": "16.14.0",
  "react-big-calendar": "^0.28.6",
  "react-datepicker": "^3.3.0",
  "react-dom": "16.14.0",
  "react-helmet": "^6.1.0",
  "react-spring": "^9.0.0-rc.3",
  "react-text-mask": "^5.4.3",
  "react-use": "^15.3.4",
  "slugify": "^1.4.6"
}

"devDependencies": {
  "@tailwindcss/custom-forms": "0.2.1",
  "autoprefixer": "9.8.6",
  "cssnano": "4.1.10",
  "gatsby-plugin-eslint": "^2.0.8",
  "gatsby-source-filesystem": "^2.7.0",
  "prettier": "2.1.2",
  "tailwindcss": "1.9.6"
}

[mertct11]

any solution?