Getting error from Next.js basic example walkthrough

Question

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

Can you post your package.json file?

Tumo Masire
– Tumo Masire

2021-08-03 20:18:09 +00:00
Commented Aug 3, 2021 at 20:18 — Tumo Masire
– Tumo Masire, Commented Aug 3, 2021 at 20:18

Damin00u · Accepted Answer · 2021-08-06 15:48:17Z

9

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

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

answered Aug 6, 2021 at 15:48

Damin00u

1062 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user14550434 Over a year ago

don't forget to restart your next server after doing this!

Renan Le Caro Over a year ago

I also had to replace the import like this : import remark from 'remark'

lord5et Over a year ago

Yup worth to add that following line: import { remark } from 'remark' needs to be replaced with: import remark from 'remark'

Mokhtar · Accepted Answer · 2021-08-03 20:39:35Z

1

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

answered Aug 3, 2021 at 20:39

Mokhtar

362 bronze badges

Comments

Jared · Accepted Answer · 2022-04-24 07:52:19Z

1

import { remark } from "remark";

answered Apr 24, 2022 at 7:52

Jared

111 bronze badge

1 Comment

Tyler2P Over a year ago

Your answer could be improved by adding more information on what the code does and how it helps the OP.

Collectives™ on Stack Overflow

Getting error from Next.js basic example walkthrough

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related