Hey {subscriber},

When the TypeScript team started work on supporting React, JSX was the big stumbling block. Its syntax doesn't exist in JavaScript, so they had to build it into the compiler.

They came up with the idea for .tsx files, the jsx option in tsconfig.json, and suddenly, JSX was supported. But there was an interesting unanswered question: what type should this function infer as?

React.ReactNode vs JSX.Element

Hey {subscriber},

If you're working with TypeScript and React, you've probably come across this error:

```tsx
const Component = () => {
  // React refers to a UMD global, but the current file is a module.
  // Consider adding an import instead.
  return <div>Hello world</div>
}
```

Let's figure out how to fix it.

## Quick Fix

If you're **not using TypeScript to compile your application**, you should change jsx to preserve in your tsconfig.json. Most modern frameworks won't use TypeScript to compile your application. So if you're not sure, choose this option.

```tsx
{
  "compilerOptions": {
    "jsx": "preserve"
  }
}
```

You should also restart your TS server.

If **you *are* using TypeScript to compile your application**, you should check if you're working with React 17 or later. If you are, you should change `jsx` to `react-jsx` in your `tsconfig.json`.

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

If you're not, then keep `jsx` as `react` in your `tsconfig.json` and add `import React from "react";` to the top of your file.

## Explanation

The error happens when we have `jsx` set to `react` in the `compilerOptions` of our `tsconfig.json`.

The reason is that when TypeScript is set up like this, it assumes that it'll be transforming your JSX into `React.createElement` calls. So the code below:

```tsx
const Component = () => {
  return <div>Hello world</div>
}
```

transforms to:

```tsx
const Component = () => {
  return React.createElement('div', null, 'Hello world')
}
```

And here's the error. We don't have React in scope for this module, so this will cause a runtime error.

But since React 17, we haven't needed to import React to use JSX. So this error feels out of step with how React works today.

### Stopping the Error

The thing this error shows is that you've probably misconfigured your `tsconfig.json`. Most React frameworks don't use TypeScript to handle this transformation. They'll use a tool like [swc](https://swc.rs/) that runs faster, but doesn't do type checking.

TypeScript throws an error here because it assumes that you're using it to transform your JSX. And, you're probably not.

The safest bet is to change jsx to preserve in your `tsconfig.json`. This will tell TypeScript to leave your JSX alone and not throw an error when you forget to import React.

### The Exception to the Rule

The only situation where this error would be helpful is if you're using React 16 or earlier. In that case, you'll need to import React to use JSX. So you should keep `jsx` as `react` in your `tsconfig.json` and add `import React from "react";` to the top of your file.

The `UMD Global` is a red herring - it's not the real problem. The real problem is that you're using JSX without importing React.

— Matt

---

P.S. Tickets are still available for the Advanced React with TypeScript workshop on June 9th from 9AM to 2PM Pacific.

As a thank you for purchasing the Total TypeScript Core Volume, [click here for a deep discount on this live full-day TypeScript workshop](https://ti.to/total-typescript/react-with-typescript-06-16-23/discount/loyal).

Live workshop attendees also get access to the Advanced React with TypeScript self-paced workshop when it is released!

---

[Read this article on TotalTypeScript.com](https://www.totaltypescript.com/react-refers-to-a-umd-global) or [share on Twitter](https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.totaltypescript.com%2Freact-refers-to-a-umd-global&via=mattpocockuk&text=Explained%3A%20%27React%27%20refers%20to%20a%20UMD%20global)

Explained: 'React' refers to a UMD global

Hey {subscriber},

Reading through [the React types from DefinitelyTyped repo](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts) is a great way to gain insight into how to best use TypeScript with the library.

One of the largest types you'll find in the global scope is `JSX.IntrinsicElements`.


Just like how you define the supported props for your component, `JSX.IntrinsicElements` is React's way of defining the props for all of the native HTML elements.

To demonstrate how `IntrinsicElements` works, I've [written an article](https://www.totaltypescript.com/what-is-jsx-intrinsicelements) that follows the pattern of defining an interface on the global namespace.

[![What is JSX.IntrinsicElements?](https://res.cloudinary.com/total-typescript/image/upload/v1686159659/what-is-jsx-intrinsicelements_dnaepl.png)
](https://www.totaltypescript.com/what-is-jsx-intrinsicelements)

[Dive deeper into `IntrinsicElements`](https://www.totaltypescript.com/what-is-jsx-intrinsicelements)

-Matt


