Menu
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
870
asked Oct 25 '25 09:10
You can use the previous version of remark and remark-html
"remark": "^13.0.0",
"remark-html": "^13.0.1"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With