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

[jonit-dev]

Current Behavior

I suddenly started to receive the error below in some of my components.

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

Expected behavior

No errors are displayed.

Suggested solution(s)

A temporary workaround is adding "import React from 'react'" on the top of the file. Changing the VSCode typescript version does not work. Adding jsx: "react-dev" to tsconfig.json breaks tsdx build process.

Your environment

  System:
    OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 7.26 GB / 15.51 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.18 - ~/.yarn/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Firefox: 93.0
  npmPackages:
    tsdx: ^0.14.1 => 0.14.1 
    typescript: ^4.6.2 => 4.7.4 

[avitorio]

@jonit-dev Did you mean "jsx": "react-jsx"?

[jonit-dev]

Yeah, sorry

[ayush-seth]

Facing the same issue

[avitorio]

@jonit-dev @ayush-seth I ended up moving my project to use turborepo with tsup. You can check the examples here: https://github.com/vercel/turborepo/tree/main/examples Turborepo is developed by @jaredpalmer the creator of tsdx.

[ayush-seth]

Thanks @avitorio but turborepo doesn't cover my use case here. I was just looking for a simple way to publish my tailwind component library for React with ts support so I can use it in my other projects

[avitorio]

Hey @ayush-seth, Although not a component library, my package also uses tailwind. This example can propably be used for your use case: https://github.com/vercel/turborepo/tree/main/examples/with-tailwind

[jonit-dev]

Facing the same issue

I solved it by importing React manually in all story files.

Unfortunately... 😞

[priyang12]

You can set the ts version of tsdx to 4.4 or afterwards. hopefully new version will upgrade the ts. for now manually works.

if you are using yarn than you can

"resolutions": {
    "tsdx/typescript": "^4.7.4",
}

or npm

"overrides": {
 "tsdx/typescript": "^4.7.4",
}

[emirhanyagci]

My typescript version is 5.2.2 but still gettin error my project created with vite and tsconfig file is true i don't want import React because it is unnecessary this is my code at UserContext.Provider i get this error

import { createContext, useState } from "react";
const UserContext = createContext({});
export function UserProvider({ children }) {
  const [user, setUser] = useState({ name: "", email: "" });
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

[StefanaMariaF]

overrides

I face the same issue with vite, do we know if there is a solution?

[liv-rong]

Restart vscode

[devgustavosantos]

@ivy-rong fixed it. Thanks!

[vanshavenger]

any resolution for the issue? i don't see any proper one

[ZeeshanAhmadKhalil]

The only solution that worked for me is using "jsx": "react-jsx", in the tscongif.json file but this file overrides every time we restart the nextJS project.

[whatsmenudev05]

A única solução que funcionou para mim foi usar "jsx": "react-jsx", o tscongif.jsonarquivo, mas esse arquivo substitui toda vez que reiniciamos o projeto nextJS.

I'm facing the same problem. I set 'react-jsx' in 'jsx', but when I start the project, it automatically changes to 'preserve'. I'm using Next 14 with these configurations: '@types/react': '18.2.37', '@types/react-dom': '18.2.15', "typescript": "5"

[vanshavenger]

The only solution that worked for me is using "jsx": "react-jsx", in the tscongif.json file but this file overrides every time we restart the nextJS project.

For NExtJs that won;t work