Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'hast-util-to-html' in v16.0.0

[cippaciong]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

v16.0.0

Link to runnable example

No response

Steps to reproduce

Hello, I'm learning Javascript/React/Next.js and I am following the foundation course from Next.js documentation (a.k.a. I'm a very inexperienced js developer, so it's very likely that the issue in on my side).
I was following this part of the tutorial to render markdown pages to html using remark-htlm, but when I tried, Next.js failed to render the page and I got this error:

 ⨯ Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'hast-util-to-html' imported from /home/cippaciong/git/github.com/cippaciong/nextjs-foundations/nextjs-blog/node_modules/remark-html/lib/index.js
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:780:9)
    at moduleResolve (node:internal/modules/esm/resolve:829:20)
    at defaultResolve (node:internal/modules/esm/resolve:1034:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:375:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:344:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:220:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  code: 'ERR_MODULE_NOT_FOUND',
  page: '/'
}

I checked the package.json for v16.0.0 and it looks likte hast-util-to-html has been moved from dependencies to devDependencies (07cd479). As a matter of fact, I tried to downgrade remark-html to v15.0.2 and the error disappeared.

General Info

node -v
v20.6.1

npm -v
10.1.0

Non-working package.json

{
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "start": "next start"
  },
  "dependencies": {
    "gray-matter": "^4.0.3",
    "next": "latest",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "remark": "^15.0.1",
    "remark-html": "^16.0.0"
  },
  "engines": {
    "node": ">=18"
  }
}

Working package.json

{
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "start": "next start"
  },
  "dependencies": {
    "gray-matter": "^4.0.3",
    "next": "latest",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "remark": "^15.0.1",
    "remark-html": "^15.0.2"
  },
  "engines": {
    "node": ">=18"
  }
}

Expected behavior

Markdown is rendered successfully by remark-html

Actual behavior

remark-html throws an error due to a missing dependency for hast-util-to-html

 ⨯ Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'hast-util-to-html' imported from /home/cippaciong/git/github.com/cippaciong/nextjs-foundations/nextjs-blog/node_modules/remark-html/lib/index.js
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:780:9)
    at moduleResolve (node:internal/modules/esm/resolve:829:20)
    at defaultResolve (node:internal/modules/esm/resolve:1034:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:375:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:344:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:220:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  code: 'ERR_MODULE_NOT_FOUND',
  page: '/'
}

Runtime

Other (please specify in steps to reproduce)

Package manager

Other (please specify in steps to reproduce)

OS

Linux

Build and bundle tools

Next.js

[wooorm]

whoops, looks like I’m missing a dependency

[wooorm]

Added, sorry about that!

[wooorm]

would recommend switching to remark-rehype, rehype-stringify tho!

[cippaciong]

Thanks :)