Gatsby does not use new JSX transform by default

[jwoo0122]

gatsbyjs/gatsby#27615

They reverted the official support because ecosystem is not ready for that feature. If you need to use this new JSX transform feature in lastest Gatsby (in this time 2.28.2) you should manually setup babel.

So this section should be removed, or at least we need to add some notice.

[eps1lon]

As far as I can tell they just changed the default. They still support it but it's now opt-in:

Disable automatic react runtime option by default.

[jwoo0122]

I think the original description maybe confused since it's not enough to use new JSX transform in gatsby by only updating to gatsby@2.24.5 or later but it said gatsby 'uses' the new transform, not 'supports'. If it's not a big problem I can accept it.

[eps1lon]

I agree that the documentation should be updated to reflect the recent change. But you said they removed the support entirely which is not evident from the PR you linked. That PR only said they changed the default. It sounds like it's still supported but opt-in. Is this interpretation correct?

[jwoo0122]

Yes, I misundertood the change on Gatsby. You're right. Thank you for your correction! :) So gatsby 'supports' the transform, but not uses it by 'default' (opt in).

[Bartmr]

For anyone planning on turning on the new JSX Transform on Gatsby anyway, just 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',
    },
  });
};

[igneosaur]

Update for Gatsby 4. To enable, in gatsby-config.js:

module.exports = {
  jsxRuntime: "automatic"
};

https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/#jsxruntime

[SylvainGibert]

@igneosaur doesn't work for me :(