React + TypeScript: 'React' refers to a UMD global but the current file is a module. Consider adding an import instead. (Justification)

Question

We are using React and TypeScript in our current project and I come across below behavior.

import React, { Component } from 'react';

I replace the above line with the one below since it seems to be using Component import only.

import { Component } from 'react';

And I was thrown below error

Error: 'React' refers to a UMD global but the current file is a module. Consider adding an import instead.

I tried looking it up on Stack and GitHub, found few articles and discussion but still unclear about why it's happening.

Would be more interested in whether React or Typescript is throwing it and WHY ? Not the ways to fix it.

Also some light around UMD, why it's used here ?

Answer 1

Are you rendering any jsx in the file? If so, you do need to import React, since those jsx tags compile into calls to React.createElement(). Without the import, the references to React are trying to reference a global variable, which then results in that error.

If you're using eslint, i'd recommend using eslint-plugin-react and turning on the rule react-in-jsx-scope, which will catch this case.

Answer 2

The way JSX syntax is transpiled depends on compiler options, jsxFactory option defaults to React.createComponent. This means that <p/> is transpiled to React.createComponent('p'), and React is expected to exist in the scope of a module.

If there's no React import, it's expected that React global should exist.