'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>
  );
}