Webpack does not run on workspaces Gatsby packages

Description

At first, I have faced https://github.com/gatsbyjs/gatsby/discussions/29976. I noticed it fail because webpack cannot handle JSX syntax but it should able to load it.

After I digging through the code, I find the following code

https://github.com/gatsbyjs/gatsby/blob/55778eb11e816ceaf29ad20d6ff05192cdf68f4c/packages/gatsby/src/utils/webpack-utils.ts#L405-L436

https://github.com/gatsbyjs/gatsby/blob/ba8a498c268694999bfa7961d41018b09b523779/packages/gatsby/src/utils/gatsby-dependents.ts#L27-L65

The problem is it only parsed the top package.json. In npm@7, users can use a mono-repository by using workspaces. I am using workspace to create local packages including gatsby-config. My gatsby related dependency is located at packages/gatsby-config/package.json instead of package.json. This leads to the above code causing webpack not including them.

Steps to reproduce

1. Add "workspaces": ["packages/*"], to package.json
2. Create packages/example/package.json
3. Move gatsby-plugin-image from package.json to packages/example/package.json

Expected result

Run successfully like users without using workspace.

Actual result

Webpack does not run through code.

success run page queries - 0.027s - 3/3 111.96/s

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (5:9)

File: node_modules\gatsby-plugin-image\gatsby-browser.js:5:9

failed Building development bundle - 10.627s
ERROR in ./node_modules/gatsby-plugin-image/gatsby-browser.js 5:9
Module parse failed: Unexpected token (5:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See
https://webpack.js.org/concepts#loaders
|
| export function wrapRootElement({ element }) {
>   return <LaterHydrator>{element}</LaterHydrator>
| }
 @ ./.cache/api-runner-browser-plugins.js 5:10-74
 @ ./.cache/api-runner-browser.js 4:16-55
 @ ./.cache/app.js 11:0-65 27:0-70 31:20-29 44:0-14 96:19-28 127:8-17 27:0-70

Environment

  System:
    OS: Windows 10 10.0.17763
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
  Binaries:
    Node: 14.15.5 - ~\AppData\Local\Programs\node\node.EXE
    npm: 7.5.3 - ~\AppData\Local\Programs\node\npm.CMD
  Languages:
    Python: 3.9.1 - /c/Users/myc418/AppData/Local/Programs/Python/Python39/python
  Browsers:
    Chrome: 88.0.4324.190
    Edge: Spartan (44.17763.1.0)
  npmPackages:
    gatsby: ^3.0.1 => 3.0.1

Possible Solution

In gatsby-dependents.ts, it should also step through package.json in workspaces.

Current workaround is to move all gatsby related dependencies to package.json.

[3200pro]

I’m getting this error as well while working with a setup where my sites are part of workspace packages that import other workspaces.

My file structure is:

• Root
  • Sites
    • Site Installs
  • Themes
    • Shopify Workspace
    • Core Workspace (gatsby install with gatsby-plugin-image)

[pieh]

Can you describe how you have workspaces setup?

Is site itself “root” of workspaces and you package pieces of functionality as “sub-packages”? Or site is one of workspace packages and imports other workspace packages?

Ideally - would you be able to create minimal reproduction (or even share site you are working on)? I’m not exactly sure of the setup you are running so trying to reproduce right now will likely be hit&miss.

gatsby/packages/gatsby/src/utils/gatsby-dependents.ts does traverse recursively and visit all declared packages that DO have gatsby in their name (this is heuristic to avoid traversing everything possible in node_modules as that’s really expensive) - so maybe (using your repro steps) - if package was not example but gatsby-example that could help (not really a fix, just trying to narrow down exact problem)