Issues with Vercel deployment/building are occurring. The error message states: "Failed to compile. Type error: Unable to locate module ... or its associated type declarations

I'm attempting to launch my initial Next.js application using Vercel.

Even though the app runs smoothly on my local machine (it builds locally with yarn run build and I can develop normally using yarn run dev), I am encountering issues with the build/deployment process on Vercel.

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

Here are the logs from the build that I am receiving:

https://i.sstatic.net/1dSKD.png

The contents of the related files are as follows:

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 be causing this issue?

Answer №1

Well, that was definitely a strange bug.

If you're curious about the issue, check it out here: https://github.com/vercel/next.js/issues/11742#issuecomment-695810009

Here's what caused the problem:

  • Somehow, my git config ignoreCase was set to true, even though it should have been false by default, and I'm not sure how it got changed.
  • At one point, the file ErrorPage.tsx was in a folder named Error with a capital letter at the beginning. I decided to change it to lowercase error.
  • It seems that because of the git config ignoreCase setting, git treated both paths as the same.
  • This setup worked fine on my Windows machine but caused issues on the Vercel build platform.

I realized something was off when I set git config ignoreCase to true and started getting a different error message, like this one:

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.

To solve the problem, I renamed the folder to error-aux/ErrorPage and now the build process is running smoothly.

If you want more information, check out this link:

https://i.sstatic.net/E5Z0k.png

Answer №2

Give this a shot

git rm -r --cached .
git add --all .
git commit -a -m "Adding new files"
git push

this method has proven successful for me.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for implementing dynamic properties in TypeScript modeling

Is there a way to avoid using ts-ignore when using object properties referenced as strings in TypeScript? For example, if I have something like: const myList = ['aaa', 'bbb', 'ccc']; const appContext = {}; for (let i=0; i< ...

The specific property 'splice' cannot be found within type 'T'

As I delve into working with TypeScript, an unexpected error arises: Property 'splice' does not exist on type 'T'. type Item = { name: string, body: string, imgOne: string, imgTwo: string, }[] // Another file contains this func ...

Using Redux with Next.js to implement getStaticPaths

Can someone help me understand how to implement getStaticPaths in conjunction with Redux in Next.js? I'm currently using next-redux-wrapper to manage my content, but I am encountering issues when trying to display the data. Below is a snippet of my ...

What is the best way to showcase an image using Next.js?

I'm having a problem with displaying an image in my main component. The alt attribute is showing up, but the actual image is not appearing on the browser. Can someone please point out what I might be doing wrong? import port from "../public/port. ...

Optimal method for generating paymentIntent and securely storing clientSecret using Stripe

After reviewing the stripe API, I found that it recommends creating a paymentIntent as soon as the total amount is known. My question is, where should I store the clientSecret in order to retrieve this paymentIntent if the customer leaves the checkout page ...

Searching for a way to revalidate post changes using react-query?

I've implemented basic data fetching and updating using react-query in a next.js app. My objective is to update the data after a mutation occurs. Currently, the data only updates when the tab is refreshed. Without user interaction, it remains unchange ...

Encountering a TypeScript error in MUI 5 when attempting to spread values in props

I am encountering an issue with a typescript error related to the MUI sx prop. The problem arises when I attempt to merge or spread multiple sx values into an sx prop, resulting in an error. It seems to work fine if only one item is present in the sx prop, ...

How to align an image in the center of a circular flex container

I'm facing an issue in my Angular project where I have the following code snippet: onChange(event: any) { var reader = new FileReader(); reader.onload = (event: any) => { this.url = event.target.result; }; reader.readAsData ...

The reset function in Angular's template-driven form does not seem to be functioning properly when implemented using a component

Form Template Example <form #contactFormTemplate = "ngForm" (ngSubmit)="submitContactForm()"> <input type="text" class="form-control" name="name" [(ngModel)]="formData.name" ...

What could be causing the need for RxJs TypeScript files to be requested exclusively when my website is hosted on IIS?

When I develop my site using Visual Studio / IIS Express, everything runs smoothly without any unusual requests or 404 errors. However, once I publish the site to IIS and try to run it, I start receiving multiple requests for typescript files (.ts), prima ...

Transforming a string such as "202309101010" into a date entity

Need to convert a string in the format "YYYYMMDDHHMM" (e.g. "202309101010") into a Date object in TypeScript? Check out this code snippet for converting the string: const dateString: string = "202309101010"; const year: number = parseInt(dateString.subst ...

Include module A in module B, even though module A has already included module B's Angular

Currently, I am facing an issue with circular dependencies between two modules - User and Product. The User Module has already imported the Product Module to utilize the ProductListComponent. Now, I need to import/use the UserListComponent from the User Mo ...

In an Angular component, attempt to retrieve the data type of a class property

Discover how to retrieve the type of properties from an object by following this Typescript tutorial link. However, it seems to be behaving like Javascript and returning the value of the property instead of the type: const x = { foo: 10, bar: 'hello! ...

Unlocking the power of global JavaScript variables within an Angular 2 component

Below, you will find a global JavaScript variable that is defined. Note that @Url is an ASP.Net MVC html helper and it will be converted to a string value: <script> var rootVar = '@Url.Action("Index","Home",new { Area = ""}, null)'; Sy ...

Despite attempts to exclude them, types in node_modules continue to be compiled in TypeScript

During my attempt to compile my typescript source code, I've noticed that the compiler is also attempting to compile the types found within my node_modules directory. I am currently utilizing typescript version 2.6.1 and have my tsconfig file set up ...

Angular 2: Utilize the select event to fetch and return the selected item

How can I pass an item on change event? Currently, my code looks like this: <select #sel (change)="select.emit(sel.value.url)"> <option *ngFor="let item of selectlist"> {{item.description}} </option> &l ...

Disabling the scrollbar within angular elements

Trying to remove the two scrollbars from this code, but so far unsuccessful. Attempted using overflow:hidden without success filet.component.html <mat-drawer-container class="example-container" autosize> <button type="button&qu ...

The Next.js link component has an undefined parameter being sent

Is it possible to pass parameters to a component using the Link element? I've tried the following code but it doesn't seem to be working as expected. The value always shows up as undefined in SinglePost. <Link key={2} href={{ pathname: & ...

(TS 2556) I'm puzzled as to why a type error is being thrown for a spread argument that was clearly defined and passed as a rest parameter

function debouncePromise<TParams extends Array<unknown>, TRes>( fn: (a: TParams) => Promise<TRes>, time: number, ) { let timerId: ReturnType<typeof setTimeout> | undefined = undefined; return function debounced(...args: TP ...

The onShown event in ngx-bootstrap's datePicker is fired just before the calendar actually becomes visible

Recently, I've been exploring the capabilities of ngx-bootstrap's rangeDatePicker. My current challenge involves attempting to automatically navigate to the previous month as soon as the user opens the rangeDatePicker. To accomplish this, I have ...