Fail during build of a Gatsby site based on a theme. Babel error Support for the experimental syntax 'jsx' isn't currently enabled

[ghost]

Description

Hello, i developed a gatsby site then modified it to be a theme. I successfully followed docs and videos on how to set up yarn workspaces for developing it and made all necessary changes in gatsby-config.js and package.json.
Running the demo site (yarn workspace) with: yarn workspace demo build works correctly.
After i published my theme as a npm package (name is blog-theme-lemur, i plan to scope it later when it's working) and used it as a dependency for a new gatsby site, i have this error during build.
Error is related to babel, it can't interpret jsx, i wonder why.

Steps to reproduce

Just start a new gatsby project with
npm init
npm install gatsby@^2.0.0 react react-dom blog-theme-lemur

Expected result

The site should build correctly and without issues, just like with local yarn workspaces build.

Actual result

I got errors related to babel:

Generating JavaScript bundles failed

/home/catta/lemurweb/projects/blog-theme-projects/lemurweb.blog/node_modules/blog-theme-lemur/gatsby-browser.js: Support for the experimental syntax 'jsx' isn't currently enabled
(39:5):

  37 |
  38 |   return (
> 39 |     <ThemeProvider theme={theme}>
     |     ^
  40 |       <GlobalStyles />
  41 |       {element}
  42 |     </ThemeProvider>

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.

File: node_modules/blog-theme-lemur/gatsby-browser.js:39:4

Same error is also on all page and templates files.

Environment

gatsby info --clipboard

  System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.15.4 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.10 - /usr/local/bin/npm
  Browsers:
    Chrome: 89.0.4389.82
  npmPackages:
    gatsby: ^2.32.11 => 2.32.11
  npmGlobalPackages:
    gatsby-cli: 2.19.1

I tried turning the theme back to a standard gatsby site and building it gives no errors, so i think this is related somehow to node_modules and dependencies issues when adding the theme to a site.

[ghost]

Solved it by restarting from scratch. I followed the guide on gatsby tutorial building a theme and then once i set up the workspaces and package.json files, i installed all dependencies of the gatsby site i wanted to become a theme and copied all its files in the newly created theme directory.

[dungle-scrubs]

I have what seems like the exact same problem, except restarting it from scratch didn't work for me. Did you ever come across this again?

I'm also building a theme. Within Yarn Workspaces everything works great. It's only when I use the theme as a plugin (not local) that I start to experience the error.

It's happening for me both using Gatsby v2 and v3.

[ghost]

Yes, that was also my issue, in local workspace everything was working fine.
What i did:

• Start a new theme workspace as per this guide: Docs
• At this point the only dependencies of my theme were peerDependencies: gatsby, react, react-dom.
• With the "original" site project opened in another window aside, i yarn added all other dependencies as per its package.json file. In my case, i added:

"dependencies": {
    "@reach/skip-nav": "^0.13.2",
    "babel-plugin-styled-components": "^1.12.0",
    "emailjs-com": "^2.6.4",
    "gatsby-background-image": "^1.4.1",
    "gatsby-image": "2",
    "gatsby-plugin-google-analytics": "2",
    "gatsby-plugin-google-fonts": "^1.0.1",
    "gatsby-plugin-lodash": "3",
    "gatsby-plugin-lunr": "^1.5.2",
    "gatsby-plugin-manifest": "2",
    "gatsby-plugin-offline": "3",
    "gatsby-plugin-page-progress": "^2.2.0",
    "gatsby-plugin-preact": "4",
    "gatsby-plugin-react-helmet": "3",
    "gatsby-plugin-sass": "3",
    "gatsby-plugin-sharp": "2",
    "gatsby-plugin-sitemap": "2",
    "gatsby-plugin-styled-components": "3",
    "gatsby-source-prismic": "^3.3.4",
    "gatsby-transformer-sharp": "2",
    "lodash": "^4.17.21",
    "node-sass": "^5.0.0",
    "preact": "^10.5.12",
    "preact-render-to-string": "^5.1.16",
    "prismic-dom": "^2.2.5",
    "prismjs": "^1.23.0",
    "prop-types": "^15.7.2",
    "react-headroom": "^3.1.0",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.2.0",
    "react-slick": "^0.28.1",
    "slick-carousel": "^1.8.1",
    "styled-components": "4.4.1"
  }

Important note: one way could be to copy/paste the dependencies from the original package.json to the new, but i preferred to install them from scratch.

• Moved all files/components etc needed in the new theme directory.
• Tested the demo site in the same workspace. Everything worked in both development and production environments.
• Published the theme with scope and public access
• Tested it by creating a new project and adding theme, gatsby, react, react-dom as dependencies.

[dungle-scrubs]

Thanks! I started over like you did and it works now (using Gatsby v3) for me as well.