Vercel 部署/构建失败。 “编译失败。类型错误：找不到模块...或其相应的类型声明

Question

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

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

<块引用>

编译失败 类型错误：找不到模块“../../pages/error/ErrorPage”或其相应的类型声明。

这是我得到的构建日志：

这些是相关文件的内容：

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，我开始收到不同的错误。像这样：

<块引用>

类型错误：已包含的文件名 '/vercel/path0/app/pages/error/ErrorPage.tsx' 与文件名 '/vercel/path0/app/pages/Error/ErrorPage.tsx' 仅在大小写上有所不同。

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

参考：

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