Мобильная версияI'm trying to make a website using Next.js, Typescript, and Tailwind. It was working perfectly until I tried to use Material Tailwind to make cards, after which Next.js began returning a seemingly irrelevant error whilst compiling... I'm unable to figure out exactly what the issue is. I am using GitHub Codespaces as my editor because it works on my school-issued Chromebook.
This is the error being returned:
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 error occurred during the build process and can only be dismissed by fixing the error. However, ${i.urlToImage} is a value returned from an API call, so I am confused as to why it's being referred to as a "module" and what it has to do with CSS (Import trace is ./app/globals.css). The API call does work and return valid URLs (I console.log-ed it). Due to this issue, the website will not compile, so I can't work on the rest of it. It's for a competition, so help would be awesome asap!
This is the code:
"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 ( Latest News {data.articles ? ( data.articles.map((i: { title: string, url: string, urlToImage: string, description: string, publishedAt: string }) => { return (
{i.title} {i.publishedAt}
{i.description}
); })) : (
Loading...
)} ); };
This is globals.css.
@tailwind base; @tailwind components; @tailwind utilities; @layer base { html { @apply bg-black-50; @apply text-white-50; overflow-x: hidden; } h1, h2, h3, p { margin-left: 5%; } } @layer utilities { .stroke-text { font-weight: bold; -webkit-text-stroke: 1px #F6F6F650; font-size: 30vw; -webkit-text-fill-color: transparent; } } The code used to work perfectly until I tried to use Material Tailwind inside the return:
{i.title} {i.publishedAt}
{i.description}
That's when the error began. At first, I thought it might be the async messing around, so I made a component, but that didn't work. I then went to globals.css and started commenting out code (./app/globals.css:4:0 is an empty line). It began to work only after I commented out @tailwind utilities, but that causes the styling for the rest of the website to be awful. After that, I wondered if it was a bug and removed .next, then tsconfig.json to see if automatically building would fix it but that didn't work either. I tried restarting the server, running VSC again, etc, but nothing worked. I finally tried reverting back to an older version of my code, but the error still would not go away, and pulling it up in a new GitHub Codespace instance did not work either.
As far as I know, ${i.urlToImage} isn't a module; it's a URL string returned from an API, so, again, I'm really confused by why the error says Import trace for requested module: ./app/globals.css.
Why is ${i.urlToImage} being considered a module, and why is it affecting CSS? How do I fix this?
Thank you!
