Code will not compile at Lesson 190. Cannot continue

[gmarshall56]

Hello:

In Lesson 190, once I add the line of code:

const postData = getPostData(slug);

Immediately I'm getting an 'ERR_REQUIRE_ESM' that keeps looping in the terminal. I have copied the code from [slug].js and posts-util.js from your nextjs-course-code on github into my project to make sure I didn't code something wrong and I'm still getting this looping error in the terminal. This is what the error looks like:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\NextJS_Work\nextjs-course-code-full-blog\node_modules\react-markdown\index.js
require() of ES modules is not supported.
require() of C:\NextJS_Work\nextjs-course-code-full-blog\node_modules\react-markdown\index.js from C:\NextJS_Work\nextjs-course-code-full-blog.next\server\pages\posts[slug].js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\NextJS_Work\nextjs-course-code-full-blog\node_modules\react-markdown\package.json.
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.react-markdown (C:\NextJS_Work\nextjs-course-code-full-blog.next\server\pages\posts[slug].js:1157:18)
at webpack_require (C:\NextJS_Work\nextjs-course-code-full-blog.next\server\pages\posts[slug].js:23:31)
at Module../component/posts/post-detail/post-content.js (C:\NextJS_Work\nextjs-course-code-full-blog.next\server\pages\posts[slug].js:140:72)
at webpack_require (C:\NextJS_Work\nextjs-course-code-full-blog.next\server\pages\posts[slug].js:23:31)
at Module../pages/posts/[slug].js (C:\NextJS_Work\nextjs-course-code-full-blog.next\server\pages\posts[slug].js:1020:99)
at webpack_require (C:\NextJS_Work\nextjs-course-code-full-blog.next\server\pages\posts[slug].js:23:31)
at C:\NextJS_Work\nextjs-course-code-full-blog.next\server\pages\posts[slug].js:91:18
at Object. (C:\NextJS_Work\nextjs-course-code-full-blog.next\server\pages\posts[slug].js:94:10)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32) {
code: 'ERR_REQUIRE_ESM'

When I comment out that line of code that calls getPostData(slug) - which I know we do not want to do - the ERR_REQUIRE_ESM looping error stops but then I see this error in the terminal:

error - ./lib/posts-util.js:1:0
Module not found: Can't resolve 'fs'

1 | import fs from "fs";

I am using VS Code version 1.63.2.
I tried and I do not know how to get around this. Can you or somebody please help me with this error? I can no longer continue with this course until I can get around this issue, and I would really like to complete this course.

Thank you

[mrefil]

Hi @gmarshall56 Can you share your code please? Without review your code i dont know what is the problem you faced.

[gmarshall56]

@mrefil, et al:
Thank you for responding. I found the problem. It looks like an issue with the latest version of React Markdown, perhaps.

Your request to share my code prompted me to further compare my code to Max's code. In doing so I discovered that the react-markdown dependency version in my package.json file is:
"react-markdown": "^7.1.2"
where the version in Max's package.json file is:
"react-markdown": "^6.0.0"

I downloaded the entire project from Max's github site, ran "npm install" and then "npm run dev". It ran fine. I then changed the version of "react-markdown" to the 7.1.2 version, completed another npm install and run dev. This time the program threw the same 'ERR_REQUIRE_ESM' errors as my project code was getting.

I then changed the version of react-markdown in my project to the version in Max's code - "^6.0.0" - and did the npm install and npm run dev. This time my code worked fine.

So, in answer to your request to share the code, download Max's code, I recommend to download Max's project, delete the react-markdown dependency from the package.json file and then run run " npm i react-markdown". If you get react-markdown version "^7.1.2" like I did, then run npm run dev and check the terminal for a looping 'ERR_REQUIRE_ESM' error.

I see that in lesson 191 Max mentions the major update that React Markdown received. I think this update has problems as evidenced by this issue.

BTW: I updated my project code to what Max had provided via lesson 191 but that code did not work for me. The nextjs-file-based-routing.png file would not render on the page, and the atomDark theme did not render.

Thank you

[mrefil]

@gmarshall56 you are welcome.