Boby•4mo ago

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

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

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.

GitHub

GitHub - Boby900/react-todo

Contribute to Boby900/react-todo development by creating an account on GitHub.

6 Replies

Deno AI Helper•4mo ago

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

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

Boby•4mo ago

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

German_Noob•4mo ago

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

GitHub

GitHub - denoland/nextjs_static_template

Contribute to denoland/nextjs_static_template development by creating an account on GitHub.

Fresh - The simple, approachable, productive web framework.

Fresh features just-in-time edge rendering, island based interactivity, and zero-configuration TypeScript support. Fast to write; fast to run.

Stack Overflow

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

I updated my project to create react app 4.0, and I'm slowing moving over my files to TypeScript. I know with this new version you don't have to repetitively import React from 'react'. However, wit...

Boby•4mo ago

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

German_Noob•4mo ago

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

Types and Type Declarations | Deno Docs

One of the design principles of Deno is no non-standard module resolution. When

Boby•4mo ago

thanks for helping me out @German_Noob , currently I am reading this docs and I will let you know when I will get it working.