'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
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
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:
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.import React from 'react'; I tried adding this but then I was getting the linting errorHi š
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...
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-importsYou 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
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.