使用 nextjs 构建错误：找到没有 React 组件的页面作为默认导出

Question

我有一个 nextjs 项目，我想在其中预呈现包含服务条款的页面。 有另存为markdown文件在 public/tos/tos-en.md public/tos/tos-pl.md.

在pages/tos/[locale]/index.jsx 内部我创建了以下反应组件：

// import { unified } from 'unified'
// import remarkParse from 'remark-parse'
// import remarkHtml from 'remark-html'
// import fs from 'fs'

import matter from 'gray-matter'
import ReactMarkdown from 'react-markdown'

export default function Index({ content, data: frontMatter }) {
  console.log(content)
  console.log(frontMatter)
  return (
    <div className="p-8">
      Title: {frontMatter.title}
      <ReactMarkdown className="prose lg:prose-xl mx-auto">
        {content}
      </ReactMarkdown>
      {/* <div
          className="prose lg:prose-xl mx-auto"
          dangerouslySetInnerHTML={{ __html: content }}>
        </div> */}
    </div>
  )
}

// export function getStaticPaths = async () => {
export async function getStaticPaths() {
  return {
    paths: [{ params: { locale: 'en' } }, { params: { locale: 'pl' } }],
    fallback: false,
  }
}

// export function getInitialProps = async ({params}) => {
export async function getStaticProps({ params }) {
  console.log('Current locale: ', params.locale)
  // const fileData = fs.readFileSync(`public/tos/tos-${params.locale}.md`, 'utf8')

  // Import our .md file using the `slug` from the URL
  const markdownFile = await import(
    `../../../public/tos/tos-${params.locale}.md`
  )

  // Parse .md data through `matter`
  let parsedFile = matter(markdownFile.default)

  parsedFile.content = String(parsedFile.content)

  delete parsedFile.orig

  console.log(parsedFile)
  // let content = ''
  // await unified()
  //   .use(remarkParse)
  //   .use(remarkHtml)
  //   .process(fileData)
  //   .then((file) => {
  //   //   console.log(String(file))
  //     content = String(file)
  //   })

  return {
    props: parsedFile,
    // props: { data: {title: 'asda'} },
  }
}

我在运行 npm run dev (next dev) 时工作​​，但是当我尝试通过创建生产构建 npm run build (next build) 进行部署时，我收到以下错误：

> Build error occurred
Error: Build optimization failed: found page without a React Component as default export in 
pages/tos/[locale]

See https://nextjs.org/docs/messages/page-without-valid-component for more info.

这很奇怪，因为组件已导出。我尝试使用单独的导出，但结果是一样的。我尝试将文件从pages/tos/[locale]/index.jsx 移动到pages/tos/[index].jsx，但似乎效果不佳。

public/tos/tos-en.md的内容：

---
title: "test"
date: "2020-10-01"
---

# TERMS OF SERVICE

### OVERVIEW

This website is...

public/tos/tos-pl.md的内容：

---
title: "test"
date: "2020-10-01"
---
# WARUNKI KORZYSTANIA Z USŁUGI


###

package.json 的内容

  "dependencies": {
    "@headlessui/react": "^1.4.0",
    "@hookform/resolvers": "^2.7.1",
    "@popperjs/core": "2.9.1",
    "@reach/portal": "^0.16.0",
    "@tailwindcss/typography": "^0.4.1",
    "aws4": "^1.11.0",
    "clsx": "^1.1.1",
    "dayjs": "^1.10.7",
    "gray-matter": "^4.0.3",
    "imagemin-optipng": "^8.0.0",
    "joi": "^17.4.2",
    "mongoose": "^5.13.8",
    "nanoid": "^3.1.25",
    "next": "^11.0.1",
    "next-i18next": "^8.6.0",
    "next-optimized-images": "^2.6.2",
    "raw-loader": "^4.0.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.12.2",
    "react-icons": "^4.2.0",
    "react-markdown": "^7.0.1",
    "react-modal": "^3.14.3",
    "realm-web": "^1.3.0",
    "remark-html": "^15.0.0",
    "remark-parse": "^10.0.0",
    "sharp": "^0.29.1",
    "styled-jsx": "^4.0.1",
    "swiper": "^6.8.3",
    "swr": "^0.5.6",
    "unified": "^10.1.0",
    "yup": "^0.32.9"
  },

编辑：添加 package.json

Answer 1

查看下一个代码。

is 错误函数要求 err 对象包含名称和消息属性 https://github.com/vercel/next.js/blob/canary/packages/next/lib/is-error.ts

在我的情况下，我得到一个没有这些的错误对象，而是有一个错误数组。这意味着该页面被添加到 invalidPages 列表中，这很好，但 next 给出的原因可能不正确，并且与未将有效组件导出为默认导出无关。