I'm currently working on a project built with Next.js and styled using Tailwind CSS. Unfortunately, I've run into an issue concerning classNames in my page.js file. I've double-checked my import statements, but the error persists. I'm seeking assistance in identifying the root cause of this problem and finding a solution. Any insights or help would be highly appreciated.
Code Snippet:
import Link from "next/link";
const getSeries = async() => {
try {
const res = await fetch('http://localhost:3000/api', {cache: "no-store"});
if (!res.ok) {
throw new Error("Fetching failed");
};
return res.json();
} catch (error) {
console.error("Series Collection: c%FAILED","color:red",error);
}
}
export default async function Series() {
const {series} = await getSeries();
return (
<main>
{series?.map((serie) => {
return (
<div className="flex flex-col">
<div className="flex justify-between">
<div>
<div className="flex flex-col justify-start">
<h1 className="text-white font-extrabold pt-2 px-2 mt-2 mx-2">{serie.name}</h1>
<div className="flex justify-between pb-2 px-2 mt-2 mx-2">
<p className="text-orange-300 md:star_gradient font-extrabold">{serie.author}</p>
<p className="opacity-80 text-white font-extrabold ">{serie.rate}</p>
</div>
</div>
</div>
<Link href={`@/app/${serie}`} className="rounded opacity-80 bg-blue-500 text-center p-2 m-2 text-white font-extrabold shadow-sm">
See More
</Link>
</div>
<div className="flex carousel">
{serie.episodes?.map((episode) => {
<Link className={`bg-gradient-to-b from-[url("${episode.thumbnail}")] to-black flex align-end justify-end p-2 m-2 h-[300px] w-[640px] rounded shadow-md`} href={`@/app/${serie}/${episode.id}`}>
<h1>{episode?.name}</h1>
</Link>
})}
</div>
</div>
)})}
</main>
)
}
Error Message:
./app/globals.css:4:0
Module not found: Can't resolve './{'
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./app/globals.css
I have a suspicion that the issue is linked to the classNames in the page.js file, despite the correctness of my import statements. Any suggestions on how to troubleshoot and fix this issue would be of great help. Thank you in advance.
Note: The inclusion of the image is crucial as it is an integral part of my UI design.