Why is Vercel failing to build my Next.js tsx app?

Question

When I run npm run build and npm start on my local machine it deploys perfectly to localhost but when I try to deploy the very same code to Vercel I get the following error:

08:28:16    Failed to compile.
08:28:16    ./pages/index.tsx:5:20
08:28:16    Type error: Cannot find module '../components/layout' or its corresponding type declarations.

It definitely seems like an issue with the Layout component, I switched around the order of the important and it always fails when trying to load the Layout component. Here's the code for the component:

import Alert from "./alert";
import Footer from "./footer";
import Meta from "./meta";

type Props = {
  preview?: boolean;
  children: React.ReactNode;
};

const Layout = ({ preview, children }: Props) => {
  return (
    <>
      <Meta />
      <div className="min-h-screen">
        <Alert preview={preview} />
        <main>{children}</main>
      </div>
      <Footer />
    </>
  );
};

export default Layout;

index.tsx line 5 looks like this import Layout from "../components/layout"; and I've confirmed that that is the correct path for the Layout component.

Answer 1

are you sure the file name is layout.tsx not Layout.tsx :-)

Answer 2

I went through the same thing. Fix layout.tsx to Layout.tsx The file name and component name must be the same.