由于“导出在以下路径上遇到错误”，下一个 JS 构建失败答案

【问题标题】：Next JS build failing due to ''Export encountered errors on following paths"由于“导出在以下路径上遇到错误”，下一个 JS 构建失败
【发布时间】：2021-04-02 03:42:53
【问题描述】：

当我将下一个 js 站点部署到 vercel 时遇到此构建错误

15:02:38    > Build error occurred
15:02:38    Error: Export encountered errors on following paths:
15:02:38        /about/undefined
15:02:38        at exportApp (/vercel/workpath0/node_modules/next/dist/export/index.js:30:1103)
15:02:38        at processTicksAndRejections (internal/process/task_queues.js:97:5)
15:02:38        at async /vercel/workpath0/node_modules/next/dist/build/index.js:39:69
15:02:38        at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:1:525

我的网站没有名为 about 的页面，所以我真的不知道这个错误指的是什么。我尽可能多地检查以找到可靠的答案，但找不到。任何帮助表示赞赏！

【问题讨论】：

它是否有一个名为 about 的文件夹？我创建了一个文件夹，但没有在其中放置页面并且遇到了这个问题。如果有一个文件夹pages/about/ 它仍然会尝试渲染它
不，它有一个名为 [category] 的文件夹，其中有 [slug].js
真的不知道从哪里来
你能告诉我你的文件结构吗？
带图片文件。

标签： reactjs next.js vercel

【解决方案1】：

我发现有一个对象没有生成页面所需的属性。一旦我删除它，一切都很好

【讨论】：

能否提供代码示例？

【解决方案2】：

通过输出以下日志解决了问题。所有页面均已记录。

export async function getStaticProps({ params: {slug} }) {
  // ↓add 
  console.log(`Building slug: ${slug}`)
}

【讨论】：

我不会说这解决了我的问题，但它确实显示了更多信息来解决它。

【解决方案3】：

我也遇到了这个错误。我发现我使用的是没有道具的组件。删除它或传递道具将解决问题

【讨论】：

【解决方案4】：

像这样添加后备对我有用：

{fallback: false}

【讨论】：

在哪里添加这个？？？
在getStaticPaths返回的对象中，例如返回`返回{路径：路径|| []，后备：假}`

【解决方案5】：

我有以下错误，因为我错误地声明了我的功能组件。

async functionName() {
...
}
export default functionName

我改成

const FunctionName = () => {
...
}
export default FunctionName

我希望它也适用于面临同样错误的人。

【讨论】：

【解决方案6】：

几天前我遇到了同样的错误。我想澄清几点。

根据浏览器的页面和 URL 进行构建。如果你看到类似的东西

导出在以下路径中遇到错误： /关于

然后你应该复制“/about”并粘贴到当前网址的前面，例如：

http://localhost:3000/about

然后您将看到错误或任何主要警告。解决它，您就可以构建了。

【讨论】：

【解决方案7】：

在我的情况下，我只是通过将其添加到我的脚本"lint": "next lint" 来安装“eslint”，然后我只需输入“npm run lint”来运行脚本，然后我选择“recommended”，安装后我运行脚本再次输入“npm run lint”，这一次它给了我一个错误，说我应该将“eslint”降级到“版本 7”，好在他们已经给出了我应该输入的“npm 命令”来降级版本，只需按照说明进行即可。然后再次运行“eslint”，直到“您在安装中看不到任何错误”。

然后运行“npm run build”，这将为您提供代码中所有错误的明确描述以及“构建过程失败”的原因

基于错误。我修复了以下问题。

我的 pages 文件夹中所有导出的组件应该是这样的：

const Home = () => {
  return()
}
export default Home

不是这个：

const home = () => {
  return()
}
export default home

我有未使用的import { useState } from 'react'，所以我将其删除。

我在 about 页面上有一个从未使用过的道具。

const About = ( { listings } ) => {
  return()
}

我使用getStaticProps() 从pages/api/mydata 调用数据，所以我将其更改为getServerSideProps()

然后我再次尝试“npm run build”，这次它没有给我任何错误并且构建过程成功。

【讨论】：

【解决方案8】：

如果您的后备设置为 true，您需要处理后备状态。

你需要添加

if (router.isFallback) {
    <h1>Data is loading</h1>;
}

您可以在if 语句的主体中放入任何内容，这将像这样进入函数组件中

const PostDetails = ({ post }) => {
  const router = useRouter();

  if (router.isFallback) {
    <h1>Data is loading</h1>;
  }

  return (

)

【讨论】：

【解决方案9】：

在我的情况下，当我重新连接到互联网并再次构建它时，它的互联网连接很弱，它已成功构建。

【讨论】：