JSX in gatsby-browser.js causes error in monorepo

[alexluong]

Description

I use a plugin gatsby-plugin-chakra-ui that has some JSX in gatsby-browser.js. The plugin works fine when it's used inside a normal site.

I'm now building a theme inside a monorepo (yarn workspaces), and I receive an error on gatsby develop:

 ERROR #98123  WEBPACK

Generating SSR bundle failed

Unexpected token (9:2)

File: ../../node_modules/gatsby-plugin-chakra-ui/gatsby-browser.js:9:2

I'm not entirely sure if this is because of JSX, but the location in the file (9:2) is the beginning of the JSX section.

When I move the code inside the plugin inside the theme (from node_modules/gatsby-plugin-chakra-ui/gatsby-browser.js to packages/theme/gatsby-browser.js), it works perfectly fine.

Steps to reproduce

Here is a minimal reproduction. Here is the code for the gatsby-plugin-chakra-ui.

git clone ...
cd ...
yarn
yarn start

Expected result

The site should work.

Actual result

I received an error 👆

Environment

  System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.11.1 - ~/.nvm/versions/node/v12.11.1/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.12.0 - ~/.nvm/versions/node/v12.11.1/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 78.0.3904.70
    Safari: 13.0.2

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[alexlobera]

The problem with this issue isn't in Gatsby but in that particular plugin. I've submitted a PR to fix it. Related to #19234

[sidharthachatterjee]

Nicely done, @alexlbr ❤️

Closing this for now then!

[dustinlacewell]

I think this issue has come back to life:

You can see that gatsby-ssr.js is not transpiled:

node_modules/@chakra-ui/gatsby-plugin/gatsby-ssr.js:

import React from "react"
import { ColorModeScript } from "@chakra-ui/react"
import { WrapRootElement } from "./src/provider"
import theme from "./src/theme"

export const onRenderBody = ({ setPreBodyComponents }) => {
  setPreBodyComponents([
    <ColorModeScript
      initialColorMode={theme.config.initialColorMode}
      key="chakra-ui-no-flash"
    />,
  ])
}

export const wrapRootElement = (props) => {
  return <WrapRootElement {...props} />
}

success run page queries - 0.021s - 3/3 141.23/s

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (8:4)

File: ../../node_modules/@chakra-ui/gatsby-plugin/gatsby-ssr.js:8:4

not finished Building development bundle - 2.205s

Could not start Gatsby Development Server. See errors above.

"gatsby": "3.2.1",
"@chakra-ui/gatsby-plugin": "^2.0.0",

[aaronadamsCA]

@alexluong / @dustinlacewell - did you ever find a long-term solution to this?

Plenty of popular plugins contain raw JSX in gatsby-browser.js or gatsby-ssr.js, including gatsby-plugin-image and gatsby-plugin-theme-ui. I'm having the same issue you were, where I'm using one of these plugins within a theme I'm developing in a monorepo, and it's failing; but when I try to create a minimal reproduction it works just fine.

I'm reasonably confident that JSX in a shipped Gatsby plugin is legal. What I need to find is the unique set of conditions where it starts to fail.

[aaronadamsCA]

I figured it out!

By default, Gatsby appears to use Webpack to simply transpile any dependency with gatsby in its name.

Crucially, though, it appears to arrive at this list of dependencies by parsing package.json files. If a dependency is missing from a package.json, Gatsby will not transpile that dependency, even though it's installed in node_modules/ and Node.js is happy to load it.

In my monorepo, I had not explicitly defined a dependency on the local theme package in the site's package.json.

I'll report this in a new issue, since I've finally narrowed down the cause and it took almost a day to narrow down. It should at least be possible to report a better error message or a warning earlier in the process, since it should be easy enough for Gatsby to identify when a package has configured a plugin, but no corresponding dependency can be found in its recursive dependencies.