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

cbd*_*per 5 typescript next.js vercel

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

尽管我的应用程序在本地计算机上运行良好(我的意思是,它在本地构建,yarn run build并且我在使用时也正常开发yarn run dev),但我在 Vercel 上的构建/部署失败。

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

这是我得到的构建日志:

在此输入图像描述

这些是相关文件的内容:

应用程序/组件/异步/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;
Run Code Online (Sandbox Code Playgroud)

应用程序/页面/错误/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);
Run Code Online (Sandbox Code Playgroud)

可能发生什么情况?

cbd*_*per 8

好吧,这是一个奇怪的错误。

这个问题似乎相关: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 ignoreCasetrue,我就开始收到不同的错误。像这样的东西:

类型错误:已包含的文件名“/vercel/path0/app/pages/error/ErrorPage.tsx”与文件名“/vercel/path0/app/pages/Error/ErrorPage.tsx”仅大小写不同。

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

参考:

在此输入图像描述