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

Question

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:

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?

iwasrobbed · Accepted Answer · 2024-08-31 16:13:59Z

11

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:

https://git-scm.com/docs/git-config#Documentation/git-config.txt-coreignoreCase

edited Aug 31, 2024 at 16:13

iwasrobbed

46.8k21 gold badges152 silver badges195 bronze badges

answered May 6, 2021 at 15:28

cbdeveloper

31.9k45 gold badges209 silver badges404 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ce-loco Over a year ago

Thanks! Running git config core.ignorecase false did the trick for me!

Ahsaan shuja · Accepted Answer · 2023-09-11 10:50:13Z

5

Try this

git rm -r --cached .
git add --all .
git commit -a -m "Versioning untracked files"
git push

this works for me

answered Sep 11, 2023 at 10:50

Ahsaan shuja

931 silver badge8 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related