'React' refers to a UMD global, but the current file is a module.

[broken summit]

I am using Deno with the GitHub Actions, and my linting is getting passed but I don't know what is happening when Deno trying to run tests
I am getting an error

Check file:///home/runner/work/react-todo/react-todo/__tests__/page.test.tsx
error: TS2686 [ERROR]: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.
  render(<Home />)
          ~~~~
    at file:///home/runner/work/react-todo/react-todo/__tests__/page.test.tsx:7:11

I tried explictliy adding import _React from 'react'; but that too didn't work out.

https://github.com/Boby900/react-todo

Any help would be greatly admire.

[wanton comet]

I wasn't able to find the answer to your question in the official Deno documentation. However, based on the error message you've provided, it seems like the issue is related to TypeScript's handling of UMD globals when working with ES modules.

The error message suggests that 'React' is being treated as a UMD global, but since your file is a module, you should be importing React explicitly. You mentioned that you tried adding import _React from 'react'; but it didn't work. The underscore before React in your import statement is unconventional and might not be necessary unless you're trying to avoid a naming conflict.

Here's a typical way to import React in a TypeScript file:

import React from 'react';

Make sure that you are importing React like this at the top of your page.test.tsx file. If you're already doing this and still encountering the error, it could be related to your TypeScript configuration or the way your project is set up with Deno.

Please note that this advice is not based on the Deno documentation, and I would advise you to double-check the accuracy of the advice given. Since the issue is occurring in a GitHub Actions environment, you might also want to ensure that the Deno version and configuration there match your local development environment where linting is passing.

Lastly, I noticed a small typo in your message: "explictliy" should be "explicitly," and "admire" should be "appreciated." While these typos are not related to your code issue, correcting them can help in maintaining clarity in your communications.

Helpful Links:
Deno Runtime Quick Start | Deno Docs
Importing & Exporting - Deno by Example
Deno 1.38: HTML doc generator and HMR
Deno 1.20 Release Notes
ECMAScript Modules in Deno | Deno Docs

[broken summit]

import React from 'react'; I tried adding this but then I was getting the linting error

[glacial merlin]

Hi 👋
You are using deno as a drop-in replacement to node for a next.js project with vitest as test runner.
Frameworks like next and test runner like vitest do a lot of stuff under the hood. Configuration of those tools can be incredibly difficult. Even when using the runtime those tools were developed for.

1. Your problem might not be related to deno.
   Make sure the project is configured correctly first. I've seen a bun lock file in your repo. Try running your tests with bun to check if the configuration is correct.

2. Deno is not intended to be a drop-in replacement for node. A lot of work was done to improve the compatibility with existing frameworks and libraries but it is not perfect and probably never will. There is still no guarantee that a node project can be run using deno. Last time I checked, next only worked in SSG Mode https://github.com/denoland/nextjs_static_template/
   I don't know what the current state of deno is regarding next but there are similar projects native to the deno ecosystem that might be a better choice.
   I've seen https://alephjs.org/ pop up several times regarding this. Another popular choice is https://fresh.deno.dev/

3. You can try to debug the problem yourself. There is a 3 year old stack overflow question regarding a similar problem. https://stackoverflow.com/questions/64656055/react-refers-to-a-umd-global-but-the-current-file-is-a-module

Gl

[broken summit]

thanks for your help, I tried doing some changes in tsconfig.json and next.config.mjs but still not have any luck, I also tried looking at the Stack Overflow article that you shared but I was not able to solve this.

should I use another tool with the next.js for doing this check, though I don't need this added abstraction of GH CI/CD I am just trying to play and learn this thing, is there anything that would be more compatible with the Next.js for CI/CD or am I good with Deno and should shift my focus on solving this issue.

🙏

can I make some changes in these lines of code/customize it, if that could fix the problem

- name: Run tests run: deno test -A --unstable-sloppy-imports

[glacial merlin]

You can try using a triple slash directive to tell deno that the react types are in fact present.
https://docs.deno.com/runtime/manual/advanced/typescript/types#using-a-triple-slash-directive

You place those directives at the entry point to your application. For your tests it could be your vitest config.
Gl