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

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 

[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",
}