Next Js 渲染错误

Question

我在尝试使用“Yarn Build”构建页面时收到以下错误

Automatically optimizing pages ...
Error occurred prerendering page "/design/des". Read more: https://err.sh/next.js/prerender-error:
Error: Cannot find module './des.md'

Error occurred prerendering page "/blog/po". Read more: https://err.sh/next.js/prerender-error:
Error: Cannot find module './po.md'

Error occurred prerendering page "/photo/pho". Read more: https://err.sh/next.js/prerender-error:
Error: Cannot find module './pho.md'

Error occurred prerendering page "/art/a". Read more: https://err.sh/next.js/prerender-error:
Error: Cannot find module './a.md'

我已经尝试运行 yarn upgrade 来升级所有模块，我还查看了我的所有文件，并且在任何页面中都没有提到 pho.md 或任何其他列出的项目。知道可能导致这些错误的原因吗？

文件结构

package.json
├── README.md
├── src
│   ├── components
│   │   ├── ArtList.js
│   │   ├── BlogList.js
│   │   ├── ContactForm.js
│   │   ├── DesignList.js
│   │   ├── Header.js
│   │   ├── Layout.js
│   │   ├── Meta.js
│   │   ├── PhotoList.js
│   │   ├── Singular.js
│   │   └── Social.js
│   ├── data
│   │   └── config.json
│   ├── markdown
│   │   ├── arts
│   │   │   ├── art1.md
│   │   │   ├── art2.md
│   │   │   └── art3.md
│   │   ├── design
│   │   │   ├── des1.md
│   │   │   ├── des2.md
│   │   │   └── des3.md
│   │   ├── photos
│   │   │   ├── 43qf.md
│   │   │   ├── 5 (copy).md
│   │   │   ├── 5.md
│   │   │   ├── a (copy).md
│   │   │   ├── a.md
│   │   │   ├── a#.md
│   │   │   ├── b (copy).md
│   │   │   ├── b.md
│   │   │   ├── c (copy).md
│   │   │   ├── dsfg (copy).md
│   │   │   ├── dsfg.md
│   │   │   ├── g.md
│   │   │   ├── photo-1 copy (copy).md
│   │   │   ├── photo-1 (copy).md
│   │   │   ├── photo-1 copy.md
│   │   │   ├── photo-1.md
│   │   │   ├── photo-2 copy (copy).md
│   │   │   └── photo-2 copy.md
│   │   └── posts
│   │       ├── cat-ipsum.md
│   │       └── cupkaes.md
│   ├── pages
│   │   ├── about.js
│   │   ├── art
│   │   │   └── [slug].js
│   │   ├── art.js
│   │   ├── blog
│   │   │   └── [slug].js
│   │   ├── blog.js
│   │   ├── contact.js
│   │   ├── design
│   │   │   └── [slug].js
│   │   ├── design.js
│   │   ├── index.js
│   │   ├── music.js
│   │   ├── photo
│   │   │   └── [slug].js
│   │   └── photography.js
│   └── public
│       └── static
│           ├── art
│           │   ├── art1.jpg
│           │   └── art2.png
│           ├── design
│           │   ├── des1.jpg
│           │   └── des2.jpg
│           ├── fonts
│           │   └── photography
│           ├── main
│           │   ├── aboutimg.png
│           │   ├── click.png
│           │   ├── lucy.png
│           │   └── nextjs-black-logo.svg
│           ├── photo
│           │   ├── test2.jpg
│           │   ├── test3.jpg
│           │   ├── test4.jpg
│           │   ├── test.jpeg
│           │   └── test.jpg
│           └── post-img
│               ├── disenchantment.svg
│               └── dough.svg
└── yarn.lock

完整的 getStaticProps

export async function getStaticProps({ ...ctx }) {
  const { slug } = ctx.params
  const content = await import(`../../markdown/posts/${slug}.md`)
  const config = await import(`../../data/config.json`)
  const data = matter(content.default)

  return {
    props: {
      siteTitle: config.title,
      frontmatter: data.data,
      markdownBody: data.content,
    },
  }
}

export async function getStaticPaths() {
  //get all .md files in the posts dir
  const blogs = glob.sync('src/markdown/posts/**/*.md')

  //remove path and extension to leave filename only
  const blogSlugs = blogs.map(file =>
    file
      .split('/')[2]
      .replace(/ /g, '-')
      .slice(0, -3)
      .trim()
  )

  // create paths with `slug` param
  const paths = blogSlugs.map(slug => `/blog/${slug}`)
  return {
    paths,
    fallback: true,
  }
}

新错误

> Build error occurred
TypeError: __webpack_require__(...).parse is not a function
    at /home/mac/Documents/lucy-portfolio/src/.next/server/static/F_8nzvuKI79UB0iqKIVhG/pages/blog/[slug].js:914:67
    at Array.map (<anonymous>)
    at getStaticPaths (/home/mac/Documents/lucy-portfolio/src/.next/server/static/F_8nzvuKI79UB0iqKIVhG/pages/blog/[slug].js:914:27)
    at buildStaticPaths (/home/mac/Documents/lucy-portfolio/node_modules/next/dist/build/utils.js:18:86)
    at Object.isPageStatic (/home/mac/Documents/lucy-portfolio/node_modules/next/dist/build/utils.js:25:548)
    at execFunction (/home/mac/Documents/lucy-portfolio/node_modules/jest-worker/build/workers/processChild.js:155:17)
    at execHelper (/home/mac/Documents/lucy-portfolio/node_modules/jest-worker/build/workers/processChild.js:139:5)
    at execMethod (/home/mac/Documents/lucy-portfolio/node_modules/jest-worker/build/workers/processChild.js:143:5)
    at process.<anonymous> (/home/mac/Documents/lucy-portfolio/node_modules/jest-worker/build/workers/processChild.js:64:7)
    at process.emit (events.js:315:20) {
  type: 'TypeError'
}

代码如下

export async function getStaticPaths() {
  const path = require
  //get all .md files in the posts dir
  const blogs = glob.sync('src/markdown/posts/**/*.md')

  //remove path and extension to leave filename only
  const blogSlugs = blogs.map(file => path.parse(file).name);
  // create paths with `slug` param
  const paths = blogSlugs.map(slug => `/blog/${slug}`)
  return {
    paths,
    fallback: true,
  }
}

Answer 1

这是简化的代码。保持原样，它似乎工作正常。问题在于如何解析列表中的名称。

在这个 sn-p 中，您将从代码中看到 blogSlugs 的问题，并将 newBlogSlugs 作为解决方案。

newBlogSlugs 代码的作用是什么？

file.replace(/^.*[\\\/]/, '').split('.')[0]

替换方法替换除最后一个以外的所有路径部分，我们得到“cupcakes.md”。然后我们在点上拆分字符串，只使用第一部分，得到“纸杯蛋糕”。

// This represent the output of your glob function. You don't nee to copy the list. That is just for clarity on how the blogs array looks.
const blogs = [
  "src/markdown/posts/cupcakes.md",
  "src/markdown/posts/cat-stuff.md"
];

// This is your blogSlugs contstant
const blogSlugs = blogs.map(file =>
  file
    .split('/')[2]
    .replace(/ /g, '-')
    .slice(0, -3)
    .trim()
)

// This is the new solution that you should use instead of your blogSlugs
// !!! UPDATED HERE
const newBlogSlugs = blogs.map(file => file.replace(/^.*[\\\/]/, '').split('.')[0]);

console.log("Original", blogSlugs);
console.log("Fixed", newBlogSlugs);

编辑：提到我使用了路径模块。

EDIT2：更改了变量的命名，使它们看起来更像有问题的代码。

EDIT3：在原始答案中，我使用路径模块来获取 slug，将其更改为字符串替换。删除路径模块，它会产生错误。