How do I add @babel/preset-react to the presets section of babel.config.js

Question

I get this error "React - Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation"

This is the presets section from my babel.config.js:

    presets: [
  isTestEnv && [
    '@babel/preset-env',
    {
      targets: {
        node: 'current'
      }
    }
  ],
  (isProductionEnv || isDevelopmentEnv) && [
    '@babel/preset-env',
    {
      forceAllTransforms: true,
      useBuiltIns: 'entry',
      corejs: 3,
      modules: false,
      exclude: ['transform-typeof-symbol']
    }
  ]
].filter(Boolean),

Answer 1

Try:

],
  (isProductionEnv || isDevelopmentEnv) && [
    '@babel/preset-env',
    {
      forceAllTransforms: true,
      useBuiltIns: 'usage',
      corejs: '3',
      modules: false,
      exclude: ['transform-typeof-symbol']
    }
  ],
  [
    '@babel/preset-react',
    {
      development: isDevelopmentEnv || isTestEnv,
      useBuiltIns: true
    }
  ]
].filter(Boolean)

If I am not mistaken, bundle exec rails webpacker:install:react will add that bit to the babel.config.js

Here is some useful information which helped me a while back to set up webpacker properly: https://github.com/rails/webpacker/blob/v4.3.0/docs/webpack.md