ReferenceError: Property 'React' doesn't exist after upgrade react-native to 0.64.0

Do you want to request a feature or report a bug? Report a bug and suggestion to fix it.

What is the current behavior? I try to upgrade to 0.64.0 from 0.63.4 which include react 17 with the New JSX Transform. After I remove React import from all my component files. I got below error when running the app yarn android with yarn start --reset-cache

ReferenceError: Property 'React' doesn't exist

This error is located at:
    in App (at renderApplication.js:47)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:107)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:134)
    in AppContainer (at renderApplication.js:40), js engine: hermes
ReferenceError: Property 'React' doesn't exist

This error is located at:
    in App (at renderApplication.js:47)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:107)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:134)
    in AppContainer (at renderApplication.js:40), js engine: hermes

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

1. initialize fresh react-native 0.63.4 npx react-native init AwesomeTSProject --template react-native-template-typescript
2. use upgrade-helper to upgrade to react-native 0.64.0
3. remove any import React from 'react'; from component file.
4. error will show ReferenceError: Property 'React' doesn't exist

What is the expected behavior? As from React blog about New JSX Transform, it needs additional config in babel.config.js

// If you're using @babel/plugin-transform-react-jsx
{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "runtime": "automatic"
    }]
  ]
}

• After I add this into my babel.config.js and yarn start --reset-cache and yarn android the error was gone.

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

• metro-react-native-babel-preset 0.64.0
• node 14.16.0
• yarn 1.22.5

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

[moonlight8978]

Because, metro-react-native-babel-preset includes @babel/plugin-transform-react-jsx by default. If you add it to plugins, it would be duplicated. https://github.com/facebook/metro/blob/6cb3ec88f707b1beb78462be11195b5d496e3aad/packages/metro-react-native-babel-preset/src/configs/main.js#L59-L61

But set useTransformReactJSXExperimental: true is not enough. To use new JSX transformation, you have to pass runtime: 'automatic' to @babel/plugin-transform-react-jsx too (runtime is classic by default). https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#manual-babel-setup

So you might want to change your babel.config.js to:

module.exports = {
  presets: [['module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }]],
  plugins: [
    [
      '@babel/plugin-transform-react-jsx',
      {
        runtime: 'automatic',
      },
    ],
  ]
}

[moonlight8978]

@jmfigueroa Your presets is in wrong format. If you want to pass options to a preset, you have to use the array syntax with:

• the first element is the name of the preset
• the second element is the options

presets: [
  [
    'module:metro-react-native-babel-preset',
    {
      'useTransformReactJSXExperimental': true,
    }
  ]
]

not

presets: [
  'module:metro-react-native-babel-preset',
  {
    'useTransformReactJSXExperimental': true,
  },
]

it makes babel think that you are using 2 presets

• module:metro-react-native-babel-preset
• and another one is { 'useTransformReactJSXExperimental': true }