feat(gatsby): disable automatic by default

[wardpeet]

Description

Disable automatic react runtime option by default. The ecosystem hasn't adapted yet, projects like theme-ui, mdx, .. haven't adopted it yet. When people us react@17, their site might break

#27468 (comment)

You can test it by adding the following to a page and using react, react-dom

/** @jsx createElement */
import React, { createElement } from "react"

[t2ca]

Emotion will support it very soon. emotion-js/emotion#1970

[frontendphil]

This should have been a major version bump. I've upgrade my whole site already and now need to undo all the configurations again if I want to be able to upgrade gatsby. No way to opt-in.

---

Not just undo actually. Because the new things I've added later never had React imported.

[Bartmr]

@KyleAMathews you can't go around selling that Gatsby has the new JSX Transform and actually having this stated in the React docs and then disable without any warning.

Gatsby is not a personal blog framework. Big companies depend on it

[Bartmr]

@frontendphil add this to your gatsby-node.js and you should be fine

exports.onCreateBabelConfig = ({ actions }) => {
  actions.setBabelPlugin({
    name: '@babel/plugin-transform-react-jsx',
    options: {
      runtime: 'automatic',
    },
  });
};

[armandoborge]

Unfortunately @Bartmr solution doesn't works for me on Gatsby 3

[wardpeet]

create a babelrc file in your gatsby root with the following

{
  "presets": [["babel-preset-gatsby", {
     "reactRuntime": "automatic"
   }]]
}

[bryndyment]

create a babelrc file in your gatsby root with the following

{
  "presets": [["babel-preset-gatsby", {
     "reactRuntime": "automatic"
   }]]
}

This worked for me. I created .babelrc.js with the following single line:

module.exports = { presets: [['babel-preset-gatsby', { reactRuntime: 'automatic' }]] }

[filiptammergard]

module.exports = { presets: [['babel-preset-gatsby', { reactRuntime: 'automatic' }]] }

Not sure why, but this didn't work for me. However, this worked:

module.exports = {
  plugins: [["@babel/plugin-transform-react-jsx", { runtime: "automatic" }]],
}

I.e. exactly like #27615 (comment) but in a babel config file instead of gatsby-node.js.

[angeloashmore]

For anyone coming across this now, you can enable the automatic JSX transform with the jsxRuntime gatsby-config.js option:

// gatsby-config.js
module.exports = {
	jsxRuntime: "automatic",
};