fix(gatsby): add stage to nested babel-preset-gatsby

[pieh]

Description

Our code that ensures stage is added to babel-preset-gatsby options was only working when local babelrc (or other config file) was adding our preset. If user is using custom preset that adds our preset it wasn't working anymore.

This PR will resolve presets other than ours to be able to recursively check for babel-preset-gatsby and add stage to options.

This PR is also making sure that reactRuntime and reactImportSource are passed as well, as we do that for our default -

gatsby/packages/gatsby/src/utils/babel-loader-helpers.js

Lines 122 to 136 in 5a5f5b9

	fallbackPresets.push(
	babel.createConfigItem(
	[
	resolve(`babel-preset-gatsby`),
	{
	stage,
	reactRuntime,
	reactImportSource,
	},
	],
	{
	type: `preset`,
	}
	)
	)

Related Issues

Fixes #35731

[LekoArts]

So does that also fix #35069 (#34518) and we could remove the note?

[pieh]

So does that also fix #35069 (#34518) and we could remove the note?

I will say that I didn't really test jsxRuntime and jsxImportSource addition (I'm really not quite sure how to heh), but it should force passing those along stage. In current shape of PR this will mean that user can no longer set those and only place to set those will be gatsby-config (that seems reasonable?). I can also swap some things around so we default to ones from config, but if user provided their own we will use that (is there a usecase for that?)

So we should be able to remove the note about passing those from packages/babel-preset-gatsby/README.md - at least once that is shipped

[LekoArts]

I will say that I didn't really test jsxRuntime and jsxImportSource addition (I'm really not quite sure how to heh)

If you set jsxRuntime to automatic but then use Emotion so you'll want to have another reactImportSource: https://emotion.sh/docs/css-prop#jsx-pragma

iirc that's how you reproduce that

[LekoArts]

cc @aaronadamsCA

[pieh]

If you set jsxRuntime to automatic but then use Emotion so you'll want to have another reactImportSource: emotion.sh/docs/css-prop#jsx-pragma

Tried it - with gatsby@next and custom .babelrc I do have to do what we have in babel-preset-gatsby note currently (after removing React imports). With this change I don't need to pass anything to babel, as long as I have my those options defined in gatsby-config (and same as stage it also work when babel-preset-gatsby is in nested presets).

The issue with this and the note that we already have is that if user only set those jsxRuntime settings in their custom babel, but not gatsby-config, those will suddenly stop working - so I will make a change that prefer babel preset options if provided by user and fallback to gatsby-config ones so that users using current "workaround" suddenly will have breakages when they upgrade.

After thinking a bit more on it - I do think those options need to stay in babel-preset-gatsby README, because user might be using babel config for other tools ( jest, storybook ) - and this is the only way for them to work correctly. But I would edit the note a little bit - say "from gatsby@x we will automatically inject jsxRuntime options in Gatsby context, but if you use additional tools that use your babel config, you will need to set them in your babel config for them to work .

[pieh]

Added the preference on options provided by babelrc to ensure behaviour won't change for people already passing those. In actual practice it seems like user does need those settings in gatsby-config (the automatic or classic one at least) as otherwise our default eslint would fail webpack (!) due to

gatsby/packages/gatsby/src/utils/eslint-config.ts

Lines 74 to 80 in abc65a6

	// New versions of react use a special jsx runtime that remove the requirement
	// for having react in scope for jsx. Once the jsx runtime is backported to all
	// versions of react we can make this always be `off`.
	// I would also assume that eslint-config-react-app will switch their flag to `off`
	// when jsx runtime is stable in all common versions of React.
	"react/jsx-uses-react": usingAutomaticJsxRuntime ? `off` : `error`,
	"react/react-in-jsx-scope": usingAutomaticJsxRuntime ? `off` : `error`,

So more than likely users already have them duplicated in config and in custom babelrc. This change most likely will only impact users that will try to use those in the future, and not ones that are already using it (as they won't have to add options to custom babelrc unless they use additional 3rd party tools)

[aaronadamsCA]

(Side note, today I wasn't entirely certain how Babel configurations were being consumed, especially in a monorepo, and then I got seriously confused by what turned out to be #35435.)

My two cents: If I specified JSX import source in a Babel config, preferably that would win. IMHO the Gatsby option could even be deprecated; it's not too much to ask a user to create a short Babel config.

If this gets us a step closer to that, great!

[lararthur]

merge please? 😔
@pieh