Improve detection of missing dependencies

[aaronadamsCA]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

When a site lists a package in gatsby-config.js, but the package is (recursively) missing from package.json, Gatsby should throw a warning or error during the config validation step, because it can cause very confusing errors that are hard to diagnose.

Reproduction Link

https://github.com/aaronadamsCA/gatsby-issue-theme-plugin-jsx

Steps to Reproduce

Two ways to reproduce within a monorepo:

1. Create a new plugin package that uses JSX in its gatsby-browser.js.
2. Add the plugin to a site's gatsby-config.js, but not its package.json.
3. Run gatsby develop.

The provided reproduction link does this:

1. Create a new theme package with a dependency on gatsby-plugin-image (which uses JSX in its gatsby-browser.js) and/or gatsby-plugin-theme-ui (which uses JSX in its gatsby-browser.js and gatsby-ssr.js).
2. Add the theme to a site's gatsby-config.js, but not its package.json.
3. Run gatsby develop.

Expected Result

When Gatsby validates gatsby-config.js, it should see that a package is configured but no corresponding dependency is defined, and throw an error (or at least a warning) that clearly indicates the problem.

Actual Result

Execution continues, but packages missing from package.json files are not transpiled by Webpack/Babel as they ordinarily would be.

As a result, they throw errors like these:

 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 - 29.509s
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 17:10-80
 @ ./.cache/api-runner-browser.js 4:16-55
 @ ./.cache/app.js 10:0-65 28:87-32:1 36:20-29 49:0-14 113:19-28 142:6-15 28:0-32:2

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (17:2)

File: ../../node_modules/gatsby-plugin-theme-ui/gatsby-ssr.js:17:2

I believe this is the root cause of many reported issues, including #29979, where I believe these monorepos simply haven't defined explicit dependency chains, as well as #19042, #30516, (maybe) #32397, and possibly others.

Given how deeply challenging this is to diagnose, I think if Gatsby continues to depend on package.json parsing when choosing which packages to transpile, then there needs to be a clear error message when a dependency is expected but not found.

Thanks!

Environment

System:
    OS: Linux 4.19 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 16.8.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 7.21.0 - /usr/local/bin/npm
  Languages:
    Python: 3.9.2 - /usr/bin/python

Config Flags

No response