为什么 Vercel 无法构建我的 Next.js tsx 应用程序？答案

【问题标题】：Why is Vercel failing to build my Next.js tsx app?为什么 Vercel 无法构建我的 Next.js tsx 应用程序？
【发布时间】：2021-01-21 08:18:35
【问题描述】：

当我在本地机器上运行 npm run build 和 npm start 时，它完美地部署到本地主机，但是当我尝试将相同的代码部署到 Vercel 时，我收到以下错误：

08:28:16    Failed to compile.
08:28:16    ./pages/index.tsx:5:20
08:28:16    Type error: Cannot find module '../components/layout' or its corresponding type declarations.

这似乎是 Layout 组件的问题，我切换了重要的顺序，尝试加载 Layout 组件时总是失败。这是组件的代码：

import Alert from "./alert";
import Footer from "./footer";
import Meta from "./meta";

type Props = {
  preview?: boolean;
  children: React.ReactNode;
};

const Layout = ({ preview, children }: Props) => {
  return (
    <>
      <Meta />
      <div className="min-h-screen">
        <Alert preview={preview} />
        <main>{children}</main>
      </div>
      <Footer />
    </>
  );
};

export default Layout;

index.tsx 第 5 行看起来像 import Layout from "../components/layout";，我已经确认这是 Layout 组件的正确路径。

【问题讨论】：

你确定文件名是 layout.tsx 而不是 Layout.tsx
@Nikhilbhatia 感谢您的建议，我检查了三次，文件名为 layout.tsx
并且您的 index.tsx 在根文件夹中，您的组件文件夹也在根文件夹中吗？你能分享你项目的文件树吗
@Nikhilbhatia 它在pages 文件夹中，而布局在components 文件夹中，两者都在同一个根文件夹中。我在博客中使用了这个来自 Vercel 的模板，结构非常接近：github.com/vercel/next.js/tree/canary/examples/…
为什么我询问大写字母文件，因为我的 macOS 不区分大小写，但 linux 是，所以我的项目在本地工作，但是当我尝试部署时，我遇到了类似的问题

标签： next.js vercel

【解决方案1】：

我也经历过同样的事情。将 layout.tsx 修复为 Layout.tsx 文件名和组件名必须相同。

【讨论】：

【解决方案2】：

你确定文件名是 layout.tsx 而不是 Layout.tsx :-)

【讨论】：