From c10f38ac3d6088108cb2d1260f5a07a7d7458c68 Mon Sep 17 00:00:00 2001 From: Zoheb Ahmed <75200954+oneknucklehead@users.noreply.github.com> Date: Mon, 7 Mar 2022 19:21:04 +0530 Subject: [PATCH 1/5] Updated README.md to include babel presets If we don't pass reactRuntime and reactImportSource to babel-preset-gatsby in .babelrc.json, JSX is invalid in gatsby-browser.js. In order to validate these errors, I have added the presets according to the docs. --- packages/babel-preset-gatsby/README.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/babel-preset-gatsby/README.md b/packages/babel-preset-gatsby/README.md index 093d9d10d6d93..a0591ba20cb26 100644 --- a/packages/babel-preset-gatsby/README.md +++ b/packages/babel-preset-gatsby/README.md @@ -27,7 +27,15 @@ npm install --dev babel-preset-gatsby ```json { - "presets": ["babel-preset-gatsby"] + "presets": [ + [ + "babel-preset-gatsby", + { + "reactRuntime": "automatic", + "reactImportSource": "@emotion/react" + } + ] + ] } ``` From ccccbf65c8bbc0221f2e8752f679be3596f5d730 Mon Sep 17 00:00:00 2001 From: Zoheb Ahmed <75200954+oneknucklehead@users.noreply.github.com> Date: Fri, 11 Mar 2022 23:24:53 +0530 Subject: [PATCH 2/5] Updated gatsby-config.md docs to include presets As of Gatsby 4.1 it has become necessary to set jsxruntime and jsxImportSource. Thus, added the said changes to the docs. --- docs/docs/reference/config-files/gatsby-config.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/docs/reference/config-files/gatsby-config.md b/docs/docs/reference/config-files/gatsby-config.md index aa4cc2f182f67..8b5dcccdbc306 100644 --- a/docs/docs/reference/config-files/gatsby-config.md +++ b/docs/docs/reference/config-files/gatsby-config.md @@ -387,3 +387,9 @@ module.exports = { jsxImportSource: "@emotion/react", } ``` +Since Gatsby v4.1, gatsby-config.js has also accepted options jsxRuntime and jsxImportSource: +https://www.gatsbyjs.com/docs/reference/release-notes/v4.1/#jsx-runtime-options-in-gatsby-configjs + +It is currently necessary to set jsxRuntime and jsxImportSource values to successfully opt into the automatic runtime with a custom import source. If you remove either one, gatsby build fails giving the following errors: +JSX is invalid in components. +Until the implementation can be further improved, it is necessary to set these values. From 607858c970f410e0970e7d02d4b8627ec9cd90f1 Mon Sep 17 00:00:00 2001 From: gatsbybot Date: Fri, 1 Apr 2022 07:31:47 +0000 Subject: [PATCH 3/5] chore: format --- docs/docs/reference/config-files/gatsby-config.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/docs/reference/config-files/gatsby-config.md b/docs/docs/reference/config-files/gatsby-config.md index 8b5dcccdbc306..80cd893c5980c 100644 --- a/docs/docs/reference/config-files/gatsby-config.md +++ b/docs/docs/reference/config-files/gatsby-config.md @@ -387,6 +387,7 @@ module.exports = { jsxImportSource: "@emotion/react", } ``` + Since Gatsby v4.1, gatsby-config.js has also accepted options jsxRuntime and jsxImportSource: https://www.gatsbyjs.com/docs/reference/release-notes/v4.1/#jsx-runtime-options-in-gatsby-configjs From ef11ba71e0f2cbe8e7ec5494a11daa441464a56c Mon Sep 17 00:00:00 2001 From: Lennart Date: Fri, 1 Apr 2022 09:42:39 +0200 Subject: [PATCH 4/5] Update README.md --- packages/babel-preset-gatsby/README.md | 32 +++++++++++++++++++------- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/packages/babel-preset-gatsby/README.md b/packages/babel-preset-gatsby/README.md index a0591ba20cb26..5c31d07433bd2 100644 --- a/packages/babel-preset-gatsby/README.md +++ b/packages/babel-preset-gatsby/README.md @@ -25,6 +25,30 @@ Install `babel-preset-gatsby` and add a `.babelrc` file with the following conte npm install --dev babel-preset-gatsby ``` +```json +{ + "presets": ["babel-preset-gatsby"] +} +``` + +## Options + +### `targets` + +`{ [string]: number | string }`, defaults to `{ "browsers": ["last 4 versions", "safari >= 7", "ie >= 9"] }` in production and `{ "browsers": ["last 2 versions", "not ie <= 11", "not android 4.4.3"] }` in development when targeting the browser and `{ "node": 6 }` in production and `{ "node": "current" }` in development when targeting Node.js. + +Use this option to configure [custom target browsers](https://www.gatsbyjs.com/docs/how-to/custom-configuration/babel/). + +### `reactRuntime` + +`'classic' | 'automatic'`, defaults to `'classic'`. Allows the use of JSX without having to import React (learn more in the [official blog post](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)). If you only want to set the runtime to `automatic` without a custom JSX transformer, you can use the [`gatsby-config` option](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/#jsxruntime). + +### `reactImportSource` + +`string`, defaults to `null`. Set which package React should use as underlying JSX transformer. For example you can set it to `@emotion/react` so by default `@emotion/react` is used instead of the react package. In order to use `reactImportSource` you must set `reactRuntime` to automatic. + +Example: + ```json { "presets": [ @@ -38,11 +62,3 @@ npm install --dev babel-preset-gatsby ] } ``` - -## Options - -### `targets` - -`{ [string]: number | string }`, defaults to `{ "browsers": ["last 4 versions", "safari >= 7", "ie >= 9"] }` in production and `{ "browsers": ["last 2 versions", "not ie <= 11", "not android 4.4.3"] }` in development when targeting the browser and `{ "node": 6 }` in production and `{ "node": "current" }` in development when targeting Node.js. - -Use this option to configure [custom target browsers](https://www.gatsbyjs.org/docs/babel/). From c49e286b7ff024eaf472c39c6e768ea418290c44 Mon Sep 17 00:00:00 2001 From: Lennart Date: Fri, 1 Apr 2022 09:46:43 +0200 Subject: [PATCH 5/5] Update gatsby-config.md --- docs/docs/reference/config-files/gatsby-config.md | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/docs/docs/reference/config-files/gatsby-config.md b/docs/docs/reference/config-files/gatsby-config.md index 80cd893c5980c..9193a4ff39526 100644 --- a/docs/docs/reference/config-files/gatsby-config.md +++ b/docs/docs/reference/config-files/gatsby-config.md @@ -370,7 +370,7 @@ See more about [adding develop middleware](/docs/api-proxy/#advanced-proxying). ## jsxRuntime -Setting to "automatic" allows the use of JSX without having to import React. More information can be found on the [Introducing the new JSX Transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) blog post. +Setting to `automatic` allows the use of JSX without having to import React. More information can be found on the [Introducing the new JSX Transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) blog post. ```javascript:title=gatsby-config.js module.exports = { @@ -380,17 +380,13 @@ module.exports = { ## jsxImportSource -With the new jsxRuntime you can set which package React should use as underlying jsx transformer. For example you can set it to "@emotion/react" so by default @emotion/react is used instead of the react package. +When `jsxRuntime` is set you can choose which package React should use as underlying JSX transformer with `jsxImportSource`. For example you can set it to `@emotion/react` so by default `@emotion/react` is used instead of the `react` package. ```javascript:title=gatsby-config.js module.exports = { + jsxRuntime: "automatic", jsxImportSource: "@emotion/react", } ``` -Since Gatsby v4.1, gatsby-config.js has also accepted options jsxRuntime and jsxImportSource: -https://www.gatsbyjs.com/docs/reference/release-notes/v4.1/#jsx-runtime-options-in-gatsby-configjs - -It is currently necessary to set jsxRuntime and jsxImportSource values to successfully opt into the automatic runtime with a custom import source. If you remove either one, gatsby build fails giving the following errors: -JSX is invalid in components. -Until the implementation can be further improved, it is necessary to set these values. +**Please note:** For now you'll also need to set this configuration inside `babel-preset-gatsby`, see [its jsxImportSource documentation](https://github.com/gatsbyjs/gatsby/blob/master/packages/babel-preset-gatsby/README.md#reactImportSource).