React Native: 'React' refers to a umd global but the current file is a module consider adding an import instead

Question

I was getting this error while adding a View component in .tsx file.

Answer 1

I raised this question and answered myself as I thought it will help others who are facing similar issue.

Please import React in your code import statements:

import * as React from 'react';

Reference:

https://github.com/Microsoft/TypeScript/issues/14118

Answer 2

One don't need to import everything using *

It's just react which is missing and needs to be imported so that JSX can be understood.

So just do following

import React from 'react';

Answer 3

With the introduction of a new JSX transform in React 17, it is no longer necessary to import React in every file that uses JSX. If you are using TypeScript, edit the jsx compiler option in your tsconfig to use "react-jsx".

{
    "compilerOptions": {
        "jsx": "react-jsx"
    }
}

The old default transformation ("jsx": "react"), compiled JSX into calls to React.createElement, so React had to be in scope for it to work. The react-jsx transform, however, uses the _jsx function and automatically inserts the import for it. After this change, unused imports of React can be safely removed.

See also: https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

Answer 4

Try importing in this way

import React, {Component} from 'react';

Answer 5

Use any of the following to remove the error:

declare var React: any;
var React;
import React from "react";
import * as React from "react";