I’m facing a really weird issue while developing my applications with Next which is when for example, I want to add custom themes, making any changes to files that would throw an error, either because the property that I created didn’t exist, or because of Next preventing me from making mistakes, instead of when I had deleted the line of code that was causing error and Next working normally, it does the opposite, it keeps throwing an error like it didn’t auto refresh, it is so annoying when we want to build fast and straightforward applications, and I have to make change to one single file that is causing this error, globals.css:
Here is the layout component, as you can see it has default values:
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
I didn’t change anything, only added Tailwind to work along with Next which also I added these 3 parameters into globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
and this is the main error that is thrown to me every single time a new error is caught by Next, regardless of what error of syntax happens, this message is thrown to me and I have either to delete press any keyboard button inside of globals.css or restart entirely Next server and run it again in dev mode:
./src/app/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./src/app/globals.css
ReferenceError: xxxx is not defined
Import trace for requested module:
./src/app/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./src/app/globals.css
./src/app/globals.css
I really don’t know how to solve this problem as I tried starting Next all over again, deleting everything and installing again but this keeps happening.