'react' refers to a UMD global, but the current file is a module
When faced with this TypeScript error, consider switching to a default import for React. This change aligns with React's desire for congruency in its module structure and helps to stave off conflicts with UMD globals present in ES6 modules.
Decoding the problem: TypeScript and JSX
The magic pill: TypeScript 4.1+
The key remedy for dealing with UMD global hiccups in a React TypeScript project lies in ensuring compatibility with the right tools. Equip your project with TypeScript v4.1 or newer, which provides a performance boost and support for the JSX transform introduced in React 17.
Getting tsconfig.json to play nice
Think of your tsconfig.json as a secret map guiding your TypeScript compiler. Setting the jsx compiler option to "react-jsx" or "react-jsxdev" enables the new JSX transform, and primes your project for a journey devoid of error-ridden obstacles.
The Band-Aid fix: importing React
If an upgrade to TypeScript is not on your agenda, importing React in your .tsx files offers a viable alternative. This step alleviates your TypeScript compiler from the confusion and ensures that React transitions from a perceived UMD global to an easily recognizable module.
Possible scenarios and solutions
Checking your React and react-dom versions
Before we plunge into the technicalities, always verify that your React and react-dom dependencies are at least version 17. This precaution ensures compatibility with the new JSX transform and the novel JSX syntax, where importing React is no longer a requirement.
Tailoring tsconfig.json to the project's needs
It's crucial to recognize the significance of the tsconfig.json file in your TypeScript project. Its configuration should reflect the specific structure of your project, consider all necessary paths, and prevent any potential module resolution errors.
Configuring Next.js with TypeScript
Working on a Next.js project with TypeScript? Make sure you've got your tsconfig.json file correctly configured. Precise configuration can dramatically alleviate your workload, especially when dealing with convoluted directory structures.
Remember the exceptions: create-react-app
For those working with projects built using create-react-app v4.0 while still using TypeScript versions pre-4.1, don't forget to import React in your files. This step might seem redundant but is necessary to outmaneuver UMD global errors.
Understanding compiler messages
When the cryptic 'React refers to a UMD global...' message appears, treat it as a hint from the TypeScript compiler. It's simply indicating that the syntax of the code seems to require an import statement for React—something that would be unnecessary if you were using TypeScript 4.1 or newer.
Digging into TypeScript documentation
If you're interested in diving into the nuts and bolts of the subject, the TypeScript 4.1 Beta documentation offers deep insights on React 17 JSX Factories. It's a well of knowledge that every TypeScript developer should drink from.
Was this article helpful?