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)
可能发生什么情况?
好吧,这是一个奇怪的错误。
这个问题似乎相关:https://github.com/vercel/next.js/issues/11742#issuecomment-695810009
原因:
git config ignoreCase被设置为true. 尽管默认是false,但我不记得曾经更改过它。ErrorPage.tsx位于一个Error以第一个大写字母命名的文件夹中。我决定将其更改为小写error。git config ignoreCase设置为true,基本上 git 被视为完全相同的路径。我知道,因为一旦我设置git config ignoreCase为true,我就开始收到不同的错误。像这样的东西:
类型错误:已包含的文件名“/vercel/path0/app/pages/error/ErrorPage.tsx”与文件名“/vercel/path0/app/pages/Error/ErrorPage.tsx”仅大小写不同。
所以我已将该文件夹重命名为error-aux/ErrorPage,现在它已成功构建。
参考:
| 归档时间: |
|
| 查看次数: |
7412 次 |
| 最近记录: |