ERROR ReferenceError: Can't find variable: React

[Ashiria7]

Description

I follow the guide and using npx react-native init AwesomeTSProject --template react-native-template-typescript create a project. And I find I should write import React from 'react' in every .tsx file. It's quite troubled. So I find this blog Introducing the New JSX Transform in React website. And I follow this blog. But it's not working. This is the whole error log:

 ERROR  ReferenceError: Can't find variable: React

This error is located at:
    in App (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in ReactNativeDemo(RootComponent) (at renderApplication.js:60)

And this is my package.json and babel.config.js

// package.json
{
  "name": "ReactNativeDemo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.3.2",
    "@react-navigation/native": "^6.0.11",
    "@react-navigation/native-stack": "^6.7.0",
    "react": "18.0.0",
    "react-native": "0.69.3",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.15.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/preset-react": "^7.18.6",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^26.0.23",
    "@types/react-native": "^0.69.3",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.29.0",
    "@typescript-eslint/parser": "^5.29.0",
    "babel-jest": "^26.6.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.70.3",
    "prettier": "^2.7.1",
    "react-test-renderer": "18.0.0",
    "typescript": "^4.4.4"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

// babel.config.js
module.exports = (api) => {
  api.cache.forever();
  return {
    presets: [
      [
        'module:metro-react-native-babel-preset',
        {
          useTransformReactJSXExperimental: true
        }
      ],
      ['@babel/preset-react', { runtime: 'automatic' }]
    ],
    plugins: [
      [
        'module-resolver',
        {
          root: ['./'],
          alias: {
            '^~/(.+)': './js/\\1'
          }
        }
      ]
      // '@babel/plugin-transform-runtime',
      // ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }]
    ]
  };
};

Version

0.69.3

Output of npx react-native info

System: OS: macOS 12.2.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 458.96 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm Watchman: 2022.03.21.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Not Found Android SDK: Not Found IDEs: Android Studio: 2021.2 AI-212.5712.43.2112.8609683 Xcode: /undefined - /usr/bin/xcodebuild Languages: Java: 11.0.16 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.0.0 => 18.0.0 react-native: 0.69.3 => 0.69.3 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

1. Init Project

npx react-native init AwesomeTSProject --template react-native-template-typescript

2. Add @babel/preset-react dependency

yarn add @babel/preset-react
yarn upgrade @babel/core @babel/preset-react

3. Edit babel.config.js see the description

4. Remove the import remove all the import React from 'react'

5. Run yarn android

Snack, code example, screenshot, or link to a repository

https://github.com/AXiLiYa/ReactNativeDemo

This is my demo project. It's has few test page. But they are very simple. So if you need, you can clone it. Thanks.

[przemyslav]

Enable experimentalImportSupport: true,

metro.config.js

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

babel.config.js

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

Should work fine :)

[Ashiria7]

Enable experimentalImportSupport: true,

metro.config.js

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

babel.config.js

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

Should work fine :)

Thanks! It did work. But now I'm thinking this maybe need be added in doc? Or the beginner'll meet this problem with high probability.

[Atalaia]

Enable experimentalImportSupport: true,

metro.config.js

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

babel.config.js

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

Should work fine :)

Thanks a lot, this babel config worked for me as well, now it does not ask me to import React in every component where there is JSX :)

[thraxxdv]

Sorry for bumping this, but how would you use this in an expo project? I can't seem to get it to work.

This is my babel.config.js:

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ["babel-preset-expo"],
        plugins: [],
    };
};

These are two ways I've tried that don't work:

module.exports = function (api) {
    api.cache(true);
    return {
        presets: [
            "babel-preset-expo",
            [
                "module:metro-react-native-babel-preset",
                { useTransformReactJSXExperimental: true },
            ],
        ],
        plugins: [
            [
                "@babel/plugin-transform-react-jsx",
                {
                    runtime: "automatic",
                },
            ],
        ],
    };
};

and

module.exports = function (api) {
    api.cache(true);
    return {
        presets: [
            [
                "module:metro-react-native-babel-preset",
                { useTransformReactJSXExperimental: true },
            ],
        ],
        plugins: [
            [
                "@babel/plugin-transform-react-jsx",
                {
                    runtime: "automatic",
                },
            ],
        ],
    };
};

[majmudargauravam]

I am using react native with expo and having the same error message while using the ImageData constructor. I tried the metro.config.js and babel.config.js configurations mentioned by @przemyslav which seems to be working for react-native projects but does not work for projects using expo. What exactly causes the error and is there a solution?

[Th0mYT]

For me was enough remove the ^ char from the ui-kitten deps into the package.json

[tvuquoc17a]

For me was enough remove the ^ char from the ui-kitten deps into the package.json

Hi, what is "ui-kitten deps" ?