'Getting error from Next.js basic example walkthrough

I get this error when running the code from the Next JS starter walkthrough:


    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1174:13)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.remark (C:\*******\***********\.next\server\pages\index.js:3249:18)
    at __webpack_require__ (C:\*******\***********\.next\server\webpack-runtime.js:25:42)
    at Object../lib/posts.js (C:\*******\***********\.next\server\pages\index.js:132:64)
    at __webpack_require__ (C:\*******\***********\.next\server\webpack-runtime.js:25:42)
    at Object../pages/index.js (C:\*******\***********\.next\server\pages\index.js:2933:68) {
  code: 'ERR_REQUIRE_ESM'
}
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\**********\********\node_modules\remark\index.js
require() of ES modules is not supported.
require() of C:\*******\***********\node_modules\remark\index.js from C:\*******\***********\.next\server\pages\index.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 C:\***********\********\node_modules\remark\index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\*******\***********\node_modules\remark\package.json.

Here is the file focused on in that part of the tutorial ([id].js):

import { getAllPostIds, getPostData } from '../../lib/posts'

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id)
  return {
    props: {
      postData
    }
  }
}

export async function getStaticPaths() {
  const paths = getAllPostIds()
  return {
    paths,
    fallback: false
  }
}

export default function Post({ postData }) {
    return (
        <html>
            {postData.title}
            <br />
            {postData.id}
            <br />
            {postData.date}
            <br />
            <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
        </html>
    )
  }

And this is the package.json file:

{
  "name": "abhayrajio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "fs": "0.0.1-security",
    "gray-matter": "^4.0.3",
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "remark": "^14.0.1",
    "remark-html": "^13.0.1"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "11.0.1"
  }
}

I'm new to this and am just trying to understand how the code works. What is going wrong and what should I do to correct it?

This is the walkthrough link: https://nextjs.org/learn/basics/create-nextjs-app

next.js

Solution 1:^[1]

You can use the previous version of remark and remark-html

   "remark": "^13.0.0",
   "remark-html": "^13.0.1"

Solution 2:^[2]

I believe the transpiled code is trying to require() remark which is released as a ES Module which is not entirely supported by Next's webpack config.

It appears to be the same issue raised here https://github.com/vercel/next.js/issues/23725
They recently released a fix on their canary branch, you can try it on your project with npm install next@canary

Solution 3:^[3]

import { remark } from "remark";

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Damin00u
Solution 2	Mokhtar
Solution 3	Jared

'Getting error from Next.js basic example walkthrough

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]