My website development process hit a roadblock when I tried integrating Material Tailwind into my project alongside Next.js, Typescript, and Tailwind CSS. The compilation error that popped up seemed unrelated to the changes, leaving me baffled as to what could be causing it. I'm using GitHub Codespaces on my school-issued Chromebook for coding, which has been working well so far.
The specific error message displayed was:
Failed to compile
./app/globals.css:4:0
Module not found: Can't resolve './${i.urlToImage}'
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./app/globals.css
This build error must be fixed before proceeding with further development.
However, ${i.urlToImage} is actually a value fetched from an API, making it puzzling why it's being identified as a "module" and connected to CSS in any way (Import trace points to ./app/globals.css). The API call is functioning correctly, retrieving valid URLs (verified through console.log), but due to this unforeseen obstacle, the website won't compile, halting progress on the competition project.
This is snippets of the code triggering the issue:
"use server"
import "dotenv/config";
async function news () {
const req = await fetch(`https://newsapi.org/v2/everything?q='green energy'&apiKey=${process.env.NEWS_API_KEY}`);
const resp = await req.json();
return resp;
};
export default async function News () {
const data = await news();
return (
....(omitted for brevity)...
);
};
Here's a snippet from globals.css:
...(CSS omitted for brevity)...The problem arose after attempting to implement Material Tailwind within the return part of the code:
<>
...(Card component code omitted for brevity)...
</>
When this integration occurred, the error surfaced. Initially, I suspected asynchronous operations might be interfering, leading me to encapsulate them in a new component, but that didn't resolve the issue. Furthermore, commenting out parts of the code pointed to @tailwind utilities in globals.css as the culprit, even though removing it distorted the styling of other components across the site.
Subsequent attempts, including removing .next and tinkering with tsconfig.json, failed to rectify the situation or eliminate the error. Restarting the server, relaunching the editor, and rolling back to a prior version also proved ineffective. Even setting up a fresh GitHub Codespace instance yielded no positive results.
Considering that ${i.urlToImage} represents a URL string sourced from an external API, the fact that it's perceived as a module remains confusing and raises questions about its impact on CSS. How do I address this discrepancy?