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

【问题标题】：Vercel deploy / build fail. "Failed to compile. Type error: Cannot find module ... or its corresponding type declarationsVercel 部署/构建失败。 “编译失败。类型错误：找不到模块...或其对应的类型声明
【发布时间】：2021-07-28 21:40:17
【问题描述】：

我正在尝试使用 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);

可能会发生什么？

【问题讨论】：

标签： typescript next.js vercel

【解决方案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

【讨论】：