Bug at render-markdown stage of tutorial: Must use import to load ES Module

[danbarker]

I have been following the Next.js tutorial, and got to this step: https://nextjs.org/learn/basics/dynamic-routes/render-markdown

However, when trying to run the code as given, an error is returned:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/danbarker/Dev/nextjs-blog/node_modules/remark/index.js
require() of ES modules is not supported.
require() of /Users/danbarker/Dev/nextjs-blog/node_modules/remark/index.js from /Users/danbarker/Dev/nextjs-blog/.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 /Users/danbarker/Dev/nextjs-blog/node_modules/remark/index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/danbarker/Dev/nextjs-blog/node_modules/remark/package.json.

    at new NodeError (node:internal/errors:370:5)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:13)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.remark (/Users/danbarker/Dev/nextjs-blog/.next/server/pages/index.js:486:18)
    at __webpack_require__ (/Users/danbarker/Dev/nextjs-blog/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./lib/posts.js:10:64)
    at Object../lib/posts.js (/Users/danbarker/Dev/nextjs-blog/.next/server/pages/index.js:83:1) {
  code: 'ERR_REQUIRE_ESM'

I have been looking around and think that this is perhaps something to do with Next.js not supporting ESM, and remark now apparently being ESM only. Is this right? If so, does anyone have an idea of a way around this? I have seen various other similar issues, e.g.
#21253

Is the intro tutorial really not working, or am I missing something?

[stefanprobst]

remark (and the unified ecosystem more broadly) is currently transitioning to ESM-only, yes. so you could try just using a previous version (remark@13 should work i think) - or you can try if it works with setting:

// next.config.js
const config = {
  experimental: {
    esmExternals: true,
  },
}
module.exports = config

(requires next@canary version)

[BraydenTW]

Ok, which version should I downgrade to?

[leerob]

npm install remark@13 remark-html@13

[BraydenTW]

Oh, sorry I meant to say that I am following the structure you used to create leerob.io and it is giving me the same error with the whole ESM not supported, but instead it is for remark-gfm.

[leerob]

I'm not following - I would recommending following the example in my repo if you do want to use that together. It's correctly working with the flag and latest versions.

[BraydenTW]

Ok, gotcha. I'll let the discussions tab here know if I have other questions along the way. Thanks!

[danbarker]

Thanks all, solved by specifying v13.0.0 of remark in package.json and then running npm update.

As a data point, this is likely to make us use Gatsby for our project instead, as it doesn't inspire a lot of confidence - I can see that this issue has been coming for ~2 years: #9607

[stefanprobst]

to be fair, remark was only updated 2 days ago (see https://github.com/remarkjs/remark/releases/tag/14.0.0)

and ESM support is actively being worked on (see my comment above about the experimental config)

[danbarker]

OK, fair - perhaps Gatsby will have other issues, too. It's just an unfortunate first impression!

[stefanprobst]

@leerob could you please adjust the tutorial here to use pinned remark versions:

- npm install remark remark-html
+ npm install remark@13 remark-html@13

thanks!

[leerob]

This has been fixed, thank you!

[olets]

@leerob confirming the tutorial works with remark 14 if their documentation is followed, i.e. the single remark export is imported. I also see that both those remark docs and the remark-html docs prefer the convention of naming imported plugins remark<Plugin>. A patch with this change would support the latest remark and follow its conventions:

- npm install remark@13 remark-html@13
+ npm install remark remark-html

- import remark from 'remark'
- import html from 'remark-html'
+ import {remark} from 'remark'
+ import remarkHtml from 'remark-html'

  const processedContent = await remark()
-   .use(html)
+   .use(remarkHtml)
    .process(matterResult.content)

[leerob]

Created vercel/next-learn#45, thank you! Open for contributions.