Cannot create a custom theme based on gatsby-theme-catalyst-core

[aaronamm]

Describe the bug I got the follow error after running gatsby build build the project that has two modules with yarn workspace

• the-company-theme => My custom theme that use gatsby-theme-catalyst-core, gatsby-theme-catalyst-header-top and gatsby-theme-catalyst-footer
• site => The main project that consumes the-company-theme

I tried to learn how to make this custom from gatsby-theme-catalyst-helium but I could not make it successfully.

Here is the error I've got.

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

/home/aaron/projects/meddbtech.github.io2/node_modules/gatsby-theme-catalyst-core/gatsby-browser.js: Support for the experimental syntax 'jsx' isn't currently enabled (9:5):

   7 | export const wrapRootElement = ({ element }) => {
   8 |   return (
>  9 |     <HomeProvider>
     |     ^
  10 |       <NavProvider>
  11 |         <MDXProvider components={{ SEO }}>{element}</MDXProvider>
  12 |       </NavProvider>

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/gatsby-theme-catalyst-core/gatsby-browser.js:9:4

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

/home/aaron/projects/meddbtech.github.io2/node_modules/gatsby-theme-catalyst-core/src/components/layout.js: Support for the experimental syntax 'jsx' isn't currently enabled (27:5):

  25 |   }, []) // eslint-disable-line
  26 |   return (
> 27 |     <Styled.root>
     |     ^
  28 |       <GlobalCSS />
  29 |       <SiteContainer>
  30 |         <SkipNavLink />

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/gatsby-theme-catalyst-core/src/components/layout.js:27:4

To Reproduce Steps to reproduce the behavior:

1. clone this project https://github.com/codesanook/gatsbey-custom-theme
2. cd to the root of project
3. Run yarn install and then yarn workspace site build
4. See error

Expected behavior Build successfully with no error

Screenshots

Desktop (please complete the following information):

• OS: [e.g. Windows 10 WSL2 (Ubuntu 18.04.5 LTS)
• Browser Chrome
• Version Version 88.0.4324.182 (Official Build) (64-bit)

Additional context

• Node.js version v12.20.1

[ehowey]

It looks like this has to do with Webpack/Babel configs which means it likely has to do with Gatsby/Webpack. My most recent builds of Catalyst are all building from what I can see. Not to say it isn't impossible for this to an issue with Catalyst. Sorry you are running into problems!

Can you try the following and let me know what you find:

• Clear your node_modules folder, clear your root yarn.lock file and reinstall all dependencies
• Check that you are on the same Gatsby versions across all your themes and sites, you can sometimes run into issues when you have multiple versions of the same package installed in a monorepo
• Run yarn workspaces info and make sure you don't have any mismatched dependencies
• Copy and paste your root package.json where you have setup the workspaces

[aaronamm]

@ehowey

Thank you for your prompt reply and giving me some useful information. Sorry for my late reply.

Here are what I did from you suggestion:

• [x] Clear your node_modules folder, clear your root yarn.lock file and reinstall all dependencies
• [x] Check that you are on the same Gatsby versions across all your themes and sites, you can sometimes run into issues when you have multiple versions of the same package installed in a monorepo. package.json of the the-company-theme project

  "dependencies": {
    "gatsby-theme-catalyst-core": "^3.1.4",
    "gatsby-theme-catalyst-footer": "^1.2.6",
    "gatsby-theme-catalyst-header-top": "^1.5.9",
    "gatsby": "^2.32.4",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "peerDependencies": {
    "gatsby": "^2.32.4",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }

package.json of site project

  "dependencies": {
    "gatsby": "^2.32.4",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "the-company-theme": "*"
  }

• [x] Run yarn workspaces info and make sure you don't have any mismatched dependencies I use yarn workspaces version 1.22.5 and here is the result.

  {
  "site": {
  "location": "site",
  "workspaceDependencies": [
    "the-company-theme"
  ],
  "mismatchedWorkspaceDependencies": []
  },
  "the-company-theme": {
  "location": "the-company-theme",
  "workspaceDependencies": [],
  "mismatchedWorkspaceDependencies": []
  }
  }

• [x] Copy and paste your root package.json where you have setup the workspaces

{
  "private": true,
  "workspaces": [
    "site",
    "the-company-theme"
  ]
}

---

I still get the error when I ran yarn workspace site develop

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (9:4)

File: ../node_modules/gatsby-theme-catalyst-core/gatsby-ssr.js:9:4

not finished Building development bundle - 2.236s

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Command: /usr/bin/node
Arguments: /usr/share/yarn/lib/cli.js develop
Directory: /home/aaron/projects/gatsbey-custom-theme/site
Output:

info Visit https://yarnpkg.com/en/docs/cli/workspace for documentation about this command.

---

Here is the error after I ran yarn workspace site build

failed Building production JavaScript and CSS bundles - 8.368s

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

/home/aaron/projects/gatsbey-custom-theme/node_modules/gatsby-theme-catalyst-core/gatsby-browser.js: Support for the experimental syntax 'jsx' isn't currently enabled (9:5):

   7 | export const wrapRootElement = ({ element }) => {
   8 |   return (
>  9 |     <HomeProvider>
     |     ^
  10 |       <NavProvider>
  11 |         <MDXProvider components={{ SEO }}>{element}</MDXProvider>
  12 |       </NavProvider>

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/gatsby-theme-catalyst-core/gatsby-browser.js:9:4

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

/home/aaron/projects/gatsbey-custom-theme/node_modules/gatsby-theme-catalyst-core/src/components/layout.js: Support for the experimental syntax 'jsx' isn't currently enabled (27:5):

  25 |   }, []) // eslint-disable-line
  26 |   return (
> 27 |     <Styled.root>
     |     ^
  28 |       <GlobalCSS />
  29 |       <SiteContainer>
  30 |         <SkipNavLink />

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/gatsby-theme-catalyst-core/src/components/layout.js:27:4

not finished Generating image thumbnails - 8.541s

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Command: /usr/bin/node
Arguments: /usr/share/yarn/lib/cli.js build
Directory: /home/aaron/projects/gatsbey-custom-theme/site
Output:

info Visit https://yarnpkg.com/en/docs/cli/workspace for documentation about this command.

FYI here is the link to the repository of this project. https://github.com/codesanook/gatsbey-custom-theme

[ehowey]

Hi @aaronamm,

I will fork what you have and try a few things in the next day or two. I think there is a possibility this has something to do with Theme-UI and React v17.0. Just ran into something similar when working on a NextJS project with Theme-UI.

As a quick test can you pin your react and react-dom versions to v16.13.1 and see what happens if that fixes it?

Here is a bit more detail: https://github.com/system-ui/theme-ui/issues/1160

I might have to do some more digging as this might be a larger version change if downgrading react versions doesn't fix it for you.

[aaronamm]

@ehowey Thank for your prompt reply. I have fixed react and react-dom version 16.13.1 to all project, delete yarn.lock and install again. However, I still get the same error as before.

It would be nice if you can checkout my project and try on your computer. I think this can be a code example for people who want to create a reusable theme based on an existing theme. Most example out there I found only focus create a them from the beginning.

Thanks.

[ehowey]

@aaronamm Okay - this is very odd. I forked your repo and was able to reproduce it. I tried a ton of different fixes tonight and nothing worked.

The weird thing is that a forked copy of gatsby-starter-catalyst-helium builds fine. The main repo builds fine. Other projects I am working on build fine. But your repo is throwing those errors.

On the surface how you have set up you repo looks rights. I couldn't find any glaring errors.

I am going to take another look over the weekend at some point. My apologies you are running into this and thank-you for reporting it.

My next step is probably going to be trying to do what you have done on my own and just see what happens. Something funky is definitely happening but I can;t understand why I can't reproduce in the main repo, or in the starter I tried. Very odd.

[aaronamm]

@ehowey Thank so much for your prompt reply and kindness helping me on this. BTW I have tried gatsby-starter-catalyst-helium before and it was built successfully as well.

FYI, there is no any issue with Catalyst theme when using it directly in a Gatsby website. Here is how I use it. https://github.com/meddbtech/meddbtech.github.io

[ehowey]

@aaronamm I did some more testing tonight and am still baffled. I can't figure out why I can't reproduce it elsewhere but it happens in your repo.

I basically took everything apart down to a super basic package.json and gatsby-config.js and it still was throwing the same error, which really doesn't give a lot of good information on what the error is or what is causing it.

I am going to have to keep looking at. Thank-you for bringing it to my attention and sorry it has limited your use of the themes for now.

[aaronamm]

@ehowey Thank you so much for your help. I appreciate it.

Anyway, I can use your theme as a consumer but I can't extend it which is okay for now.

However, could you please update me when you can fix it?

I think this can be a good example project. Most examples out there only create a new them from an empty project, not extend from an interesting/real world theme.