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

Question

我正在尝试使用 Vercel 部署我的第一个 Next.js 应用程序。

即使我的应用程序在我的本地机器上运行良好（我的意思是，它是使用 yarn run build 在本地构建的，而且我在使用 yarn run dev 时也能正常开发），我的build/deploy Vercel 失败。

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

这是我得到的构建日志：

这些是相关文件的内容：

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);

可能发生了什么？

Answer 1

好的，这是一个奇怪的错误。

这个问题似乎是相关的：https://github.com/vercel/next.js/issues/11742#issuecomment-695810009

原因：

不知何故我的 git config ignoreCase 被设置为 true。尽管默认值是 false，但我不记得曾经更改过它。
在某些时候，ErrorPage.tsx 位于名为 Error 的文件夹中，首字母大写。我决定把它改成小写 error.
我猜是因为 git config ignoreCase 被设置为 true，基本上 git 被视为完全相同的路径。
这在我的 Windows 本地环境中是可以的，但在 Vercel 远程构建平台上是不行的。

我知道，一旦我将 git config ignoreCase 设置为 true，我就开始遇到不同的错误。像这样：

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.

所以我已将文件夹重命名为 error-aux/ErrorPage，现在它正在成功构建。

参考：

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

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

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

typescript

next.js

vercel