javascript - 'React' refers to a UMD global, but the current file is a module - Stack Overflow

admin管理员组

文章数量:1125933

I updated my project to create react app 4.0, and I'm slowing moving over my files to TypeScript. I know with this new version you don't have to repetitively import React from 'react'. However, within all of my TS files where I'm not importing React I receive this error:

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)`

I know I can fix it by importing React, but I thought this was no longer needed. Also, could someone explain the meaning of this error?

My basic TSX file

const Users = () => {
    return <>Teachers aka Users</>;
};

export default Users;

I updated my project to create react app 4.0, and I'm slowing moving over my files to TypeScript. I know with this new version you don't have to repetitively import React from 'react'. However, within all of my TS files where I'm not importing React I receive this error:

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)`

I know I can fix it by importing React, but I thought this was no longer needed. Also, could someone explain the meaning of this error?

My basic TSX file

const Users = () => {
    return <>Teachers aka Users</>;
};

export default Users;

• javascript
• reactjs
• typescript
• create-react-app

Share Improve this question Follow edited Jun 21, 2022 at 19:51 Liam 29.5k2828 gold badges137137 silver badges200200 bronze badges asked Nov 3, 2020 at 2:37 RafaelRafael 5,03933 gold badges2020 silver badges2929 bronze badges 3

• "I know with this new version you don't have to repetitively import React from 'react'" - could you elaborate on this? I'm not sure where this information can come from. – Cerberus Commented Nov 3, 2020 at 3:36
• 1 In previous versions every file that contained jsx needed an import statement for react. You no longer needed this due to the new jsx transform: github.com/facebook/create-react-app/pull/9645. – Rafael Commented Nov 3, 2020 at 3:55
• Yes, but you must ensure that the new jsx transform is actually used. For the current babel-loader it is available as an opt-in, but not set as the default. – Martin Commented Nov 26, 2021 at 9:47

Add a comment  | 

30 Answers 30

Sorted by: Reset to default 646

Create React App supports the new JSX transformation out of the box in version 4 but if you are using a custom setup, the following is needed to remove the TypeScript error when writing jsx without import React from 'react':

• typescript of at least version 4.1
• react and react-dom of at least version 17
• tsconfig.json must have a jsx compilerOption of react-jsx or react-jsxdev

example:

// tsconfig.json
{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
    ...
  },
}

TypeScript documentation for its support of React 17 JSX Factories can be found here

Adding

import React from 'react'

fixes this issue

This error message comes from TypeScript compiler. The React 17 new jsx transform is not currently supported in Typescript 4.0, and will be supported in 4.1.

TypeScript v4.1 Beta - React 17 JSX Factories

What Dan wrote is correct you can change tsconfig.json:

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

Or just import React inside the file Component that's giving you the error:

import React from 'react'

My issue here was TypeScript-related and similar, but not exactly the same, as those solutions already published herein.

What was wrong

I added nested directories with source code which were not included in my tsconfig.json.

The solution

Here's how I fixed it, simply adding additional .ts and .tsx paths to include, e.g.

// tsconfig.json
{
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/**/*.ts",
    "**/**/*.tsx"
    "<path-to-your-source>.ts",
    "<path-to-your-source>.tsx",
  ],
}

My particular project is a Next.js project. Here's my full tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "lib": [
      "esnext"
    ],
    "esModuleInterop": true,
    "target": "es5",
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/**/*.ts",
    "**/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

The vast majority of the above tsconfig.json was generated via Next.js

For VSCode users, on macOS, simply closing and reopening the project fixed the issue for me.

I fixed it using this:

{
  ...
  "compilerOptions": {
     ...
    "jsx": "react",
    "allowUmdGlobalAccess": true,
  }
}

Check your file tsconfig.json

"compilerOptions": {
    ...
    "baseUrl": "src",
    ...
    "jsx": "react-jsx",
    ...
 },

To reload the typescript server in VS Code:

Press Ctrl+Shift+P (Cmd+Shift+P on macOS) to open the Command Palette and type restart, then select the command "TypeScript: Restart TS server".

In my case, it was unrelated to any of this.

I was using Visual Studio Code, and I opened the folder not at the root which had tsconfig.json file, but at one level inside at src folder.

I was getting the error: Parsing error: Cannot read file :C\MyProject\tsconfig.json.eslint

Which indirectly caused 'React' refers to a UMD global, but the current file is a module

Reopening folder at project level resolved the issue. :\

Ok my issue was with Docker Dev Containers in VSCode.

What I did to fix it:

1. Open up the command pallete with F1

2. Then look for: TypeScript: Select TypeScript Version...

3. And then select the Workspace version:

If you are using VS Code, rather than restarting the entire project, you can usually simply restart the Typescript Server by opening the command palette (⌘+⇧+P on MacOS or ⌃+⇧+P on Windows) and typing "Restart TS Server" + Enter

In VS Code I had to restart the typescript server. I switched between git branches a lot and this error occurred unexpectedly in a file that had no changes. There were no other changes that could trigger this error. After reloading the error disappeared.

To reload the typescript server in VS Code:

Press Ctrl+Shift+P (Cmd+Shift+P on macOS) to open the Command Palette and type restart, then select the command "TypeScript: Restart TS server".

For those who are using vite:

specify

"jsx": "react-jsx"

in tsconfig.node.json

refer to Why does Vite create two TypeScript config files

While this is an incredibly old post at this point, I've noticed multiple comments suggesting to use import React from 'react', including from recent posters. This isn't required. Here are the instructions to get JSX transformation to work in a TS, Webpack, Babel environment and get rid of those pesky UMD global error messages.

1. Add @babel/core, @babel/preset-react and babel-loader to the project
2. Add a babel.config.ts with the following code

{
    "presets": [
      ["@babel/preset-react", {
        "runtime": "automatic" // This bit does the transformation
      }]
    ]
  }

3. Add babel loader rule to webpack module.rules, under ts-loader to load that babel config

{
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
     loader: "babel-loader",
   },
},

4. Add the following rule to TSConfig.ts "jsx": "react-jsx",
5. Add this (or variation of pointing to src folder) to TSConfig includes. Make sure you have excludes node_modules too

"include": [
   "./src/**/*.ts",
   "./src/**/*.tsx",
   "./src/**/*.jsx",
   "./src/**/*.js",
],

6. VERY IMPORTANT STEP FOR VSC-ers. Do ctrl+p in visual studio, type > TypeScript. Somewhere will be an option called TypeScript: Select TypeScript Version . Pick the TS version in node_modules, not the shitty out of date inbuilt VSC TS which should be condemned.
7. Restart VSC. You should be able to test JSX transformation is working with the following in a .tsx file.

import { FC } from "react";

const Component: FC = () => {
  return <></>;
};

export default Component;  

If you use another implementation of react i.e preact, you will also need to add the following rule to your TSConfig to get this to work "jsxImportSource": "preact",

Also if using a framework like Next, you don't need to do this as its inbuilt and in use by default.

I ran into this issue and finally realized that changing tsconfig.json doesn't work if you have ts-jest set up. Make sure if you have ts-jest set to:

module.exports = {
  ...
  globals: {
    ...
    "ts-jest": {
      ...
      tsconfig: {
        ...
        jsx: "react-jsx", // *** HERE ***
        ...
      },
    },
  },
  ...
};

Depending on the versions used in the project, this might be the required format:

import * as React from "react"

I was having this error when I mistakenly gave index.ts the component's name .

└── components/
    └── Dialog/
        ├── Dialog.tsx
        └── Dialog.ts // This needs to be index.ts

Changing the name back to index.ts solved it.

I had "'React' refers to a UMD global, but the current file is a module. Consider adding an import instead" all over my code base. I tried everything and so many random blog post on this subject. Adding an empty jsconfig.json was a temporary fix. After more hours than I'd like to admit of sifting through/playing with settings/configs, I had at some point turned this setting on without thinking. Search settings and shut if off or add this to your settings.json.

"js/ts.implicitProjectConfig.checkJs": false

*Just set jsx : "react-native" *

{
   "compilerOptions": {
    "jsx": "react-native",
    ...
}

As pointed out in a comment by ppak10 unter Dan Barclay's answer, try first restarting Visual Studio Code

I was having the same thing but somehow I noticed that
tsconfig.json has jsx as a react, after I removed it than it worked.

{
  ...
  "compilerOptions": {
    "jsx": "react", // this line should be removed
     ...
   }
 }

Please know that i'm using TS for my project.

I've got this error working on the project with storybook. The files under components directory seemed to work fine, and the files under .storybook directory such as preview.tsx only had this issue.

Simply add .storybook/* paths to include, similar solution to Jason.

// tsconfig.json
{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
    ...
  },
  "include": [..., ".storybook/*"], // *** HERE ***
}

Dont forget to add "jsx": "react-jsx" to compilerOptions

I had this happen when the file was in the root of the project instead of the src folder using Create React App.

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)

Simple answer is to, import React.

import React from "react";

If you're new to typescript like me and you're using a props remember to import react I had this code but forgot to import react and this error was generated

const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
 return <div  className="bg-red-400 h-screen w-full" >
{/* <Navbar /> */}
{children}
</div>;

};

To anyone updating an Old app in 2024 to React v17+ with TS:

Check target in your tsconfig.json file, it's probably configured as es5, which is incorrect.

As per TypeScript own docs, when supporting the new Reactor v17 JSX, your target should be "es2015". This is the basic boilerplate for it:

{
    "compilerOptions": {
        "module": "esnext",
        "target": "es2015",
        "jsx": "react-jsx",
        "strict": true
    },
    "include": [
        "./**/*"
    ]
}

For VS Code on linux, just closing and reopening the project fixed the issue for me too.

i just created a vite project using npm create vite@lastest . -- --react and i got this lint error "'React' refers to a UMD global, but the current file is a module" in my jsx files. i didn't feel the need for a tsconfig since i'm not using TS but oh well.

creating a tsconfig.json at the root of my project and adding to the "compilerOptions": { "allowJs": true, // all your other options }

allowJs: true appears to have made the lint warning go away.

my actual tsconfig content `{ "compilerOptions": { "module": "esnext", "target": "esnext", "jsx": "react-jsx", "strict": true, "baseUrl": "./src", "allowJs": true, },

}`

How I simply solved this issue: by changing the tsconfig target to a more recent one. One that would be supported by most browsers and servers today, like ES2021.

--> Changed the target from ES5 to ES2021 - and that fixed it!

{
  "compilerOptions": {
    "target": "es2021",
  },
}

Which would make sense since we are using a newer syntax today

For information: here is how my tsconfig file looked like before fix :

    {
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Notice that I already had the "jsx": "react-jsx" option included in my file - which was (correctly) suggested by Dan, but still not sufficient to fix it

I'm using Next.js. In tsconfig.json,I changed "strict": true to false then errors disappeared.

"strict": false,

本文标签： javascript39React39 refers to a UMD globalbut the current file is a moduleStack Overflow