当我尝试使用“ 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,
}
}
答案 0 :(得分：0)
这是简化的代码。保持原样，似乎工作正常。问题在于您如何解析列表中的名称。
在此代码段中，您将从代码中看到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：在原始答案中，我使用路径模块来获取块，将其更改为字符串替换。删除路径模块，它会产生错误。