NextJs Render Erorrs

Question

I receive the following errors when trying to build my page using "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'

I have tried running yarn upgrade to upgrade all modules, I have also looked through all of my files and nowhere in any pages are there any mentions of pho.md or any of the other listed items. Any idea on what might be causing these errors?

File Structure

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

Full 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,
  }
}

New Errors

> 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'
}

Code as follows

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,
  }
}

I expect it to be a problem with the way you set the relative routes. Can you show the project file structure and the function that generates the routes from files? — Cedomir Rackov
– Cedomir Rackov, Commented Apr 3, 2020 at 16:21
That function is part of Next.js, it automatically makes a route out of all the files in the /pages directory. — giraffesyo
– giraffesyo, Commented Apr 3, 2020 at 16:22
@CedomirRackov I removed the node modules, if you need this let me know and I will upload the full file structure to a gist. File structure is added to original post. — Mac Dev
– Mac Dev, Commented Apr 4, 2020 at 10:33
@MichaelMcQuade How do I fix it then? As it is appearing with that error when I try to deploy the site to Now — Mac Dev
– Mac Dev, Commented Apr 4, 2020 at 10:35
Thanks. Now on the page blog/[slug].js what is in the getInitialProps function? — Cedomir Rackov
– Cedomir Rackov, Commented Apr 4, 2020 at 10:36

Cedomir Rackov · Accepted Answer · 2020-04-04 12:20:22Z

Here is the simplified code. Keep the glob as is, it seems to be working fine. The issue is in how you parse the names from the list.

In this snippet you will see the issue of the blogSlugs from your code and the newBlogSlugs as a solution.

What the newBlogSlugs code does?

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

Replace methods replaces all the path parts except the last one and we get "cupcakes.md". Then we split the string on the dot and use only the first part and get "cupcakes".

// 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);

EDIT: Mentioned that I used path module.

EDIT2: Changed the naming of the variables so they look more like the code in question.

EDIT3: In the original answer i used the path module for getting the slug, changed it to string replace. Remove the path module, it is producing the error.

Apologies, I'm not sure I am understanding this, where are the changes that need to be made? As the const list doesn't exist in my code, apologies I'm still kind of new at this
I have updated the original question with the code I have edited from the answer you gave, I receive different errors now about parse not being a function

Collectives™ on Stack Overflow

NextJs Render Erorrs

1 Answer 1

13 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Related