Search code examples
typescriptnext.jsvercel

Vercel deploy / build fail. "Failed to compile. Type error: Cannot find module ... or its corresponding type declarations

I'm trying to deploy my first Next.js app using Vercel.

Even though my app runs fine on my local machine (I mean, it builds locally with yarn run build and I'm also developing normally when using yarn run dev), my build/deploy on Vercel is failing.

Failed to compile Type error: Cannot find module '../../pages/error/ErrorPage' or its corresponding type declarations.

Here is the build logs I'm getting:

enter image description here

These are the related files' contents:

app/components/async/AsyncContainer.tsx

import React from "react";
import ErrorPage from "../../pages/error/ErrorPage";
import NotFoundPage from "../../pages/not-found/NotFoundPage";
import SpinnerFullPage from "../spinners/SpinnerFullPage";
import { PageStatus } from "types";
import { useInitializing } from "app/hooks/stateHooks";

interface AsyncContainer {
  status: PageStatus,
}

const AsyncContainer: React.FC<AsyncContainer> = (props) => {

  const { status } = props;
  const initializing = useInitializing();
  const ERROR     = status === "ERROR";
  const LOADING   = status === "LOADING";
  const NOT_FOUND = status === "NOT_FOUND";

  return(
    LOADING || initializing ?
      <SpinnerFullPage/>
    : NOT_FOUND ?
      <NotFoundPage/>
    : ERROR ?
      <ErrorPage/>
    : <React.Fragment>
        {props.children}
      </React.Fragment>
  );
};

export default AsyncContainer;

app/pages/error/ErrorPage.tsx

import React from "react";
import styled from "styled-components";
import Image from "next/image";
import RichText from "app/components/text/RichText/RichText";
import { IMAGE_URL } from "app/constants/IMAGE";

// ... A BUNCH OF STYLED COMPONENTS LIKE:
//  const Container_DIV = styled.div``;

interface ErrorPageProps {}

const ErrorPage: React.FC<ErrorPageProps> = (props) => {
  console.log("Rendering ErrorPage...");
  return(
    <Container_DIV>
      <MaxWidth_DIV>
        <Title_H1>
          500
        </Title_H1>
        <Ratio_DIV>
          <Image_DIV>
            <Image
              layout={"fill"}
              objectFit={"cover"}
              src={IMAGE_URL.ERROR}
            />
          </Image_DIV>
        </Ratio_DIV>
      </MaxWidth_DIV>
    </Container_DIV>
  );
};

export default React.memo(ErrorPage);

What could possibly be happening?

Solution

  • try git config core.ignorecase false (since maybe the newly renamed files didn't get committed but are still available locally — that'd cause it to build successfully locally but not remotely)

    Ok, this was a weird bug.

    This issue seems to be related: https://github.com/vercel/next.js/issues/11742#issuecomment-695810009

    The cause:

    • Somehow my git config ignoreCase was set to true. Even though the default is false and I don't remember ever changing it.
    • At some point that ErrorPage.tsx was in a folder named Error with first capital letter. I decided to change it to lowercase error.
    • I guess that because git config ignoreCase was set to true, basically git treated as being the very same path.
    • Somehow this was ok on my Windows local environment, but not ok on Vercel remote build platform.

    I know that becase once I've set git config ignoreCase to true, I began getting a different error. Something like this:

    Type error: Already included file name '/vercel/path0/app/pages/error/ErrorPage.tsx' differs from file name '/vercel/path0/app/pages/Error/ErrorPage.tsx' only in casing.

    So I've renamed the folder to error-aux/ErrorPage and now it's building successfully.

    Reference:

    enter image description here