I’m a novice programmer who just finished a web app using Next.js and wanted to deploy it to a remote source but I’m getting a very weird type error right on my _app.tsx file every time I try. I have no idea what is causing this error. Please help me fix my issue.

Here’s my _app.tsx code:

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import { useRouter } from "next/router";
import { HelmetProvider } from "react-helmet-async";

export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter();
  return (
    <HelmetProvider>
      <div className="flex flex-col min-h-screen">
        {router.pathname.startsWith("/timers") && <Header />}
        <div className="flex-grow flex flex-col">
          {/* takes the space between header and footer */}
          <Component {...pageProps} />
        </div>
        <Footer />
      </div>
    </HelmetProvider>
  );
}

The following is the error I’m getting:

Failed to compile.
./src/pages/_app.tsx:3:20
Type error: Cannot find module '@/components/Footer' or its corresponding type declarations.

  1 | import "@/styles/globals.css";
  2 | import type { AppProps } from "next/app";
> 3 | import Footer from "@/components/Footer";
    |                    ^
  4 | import Header from "@/components/Header";
  5 | import { useRouter } from "next/router";
  6 | import { HelmetProvider } from "react-helmet-async";
Error: Process completed with exit code 1.

I tried deleting my modules folders and running npm install again, I tried changing my @ imports to relative imports and got the same error in the same place. I’m sure the import is for the correct path and my app works properly with npm run dev. I have no issues with npm run dev or running npm run install on my own machine. I can provide more details as asked.

UPDATE: I fixed it. The issue was because I named the folder components and for some reason the build step doesn’t like that? I changed the folder name to something else and now it’s deployed to Github Pages properly. Leaving this up in case it helps somebody.