Getting error in next js 13.5.3 Error: ENOENT: no such file or directory, open '(rsc)/./node_modules/prismjs/prism.js'

[shivarajnaidu]

I have the below code in my blog but it is throwing an error saying Error: ENOENT: no such file or directory, open '(rsc)/./node_modules/prismjs/prism.js'

I am using NextJs 13.5 and

    "remark": "^15.0.1",
    "remark-html": "^16.0.1",
    "remark-prism": "^1.3.6",

import { remark } from 'remark'
import html from 'remark-html'
import prism from 'remark-prism';

const markdown = await remark()
            .use(html, { sanitize: false })
            .use(prism)
            .process(post.content || '');

Error

⚠ ./node_modules/remark-prism/src/highlight.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/remark-prism/src/highlight.js
./node_modules/remark-prism/src/index.js
./src/app/blog/[slug]/page.tsx
[
  'angular-13-released.md',
  'async-key-value-storage-for-web.md',
  'how-install-redis-on-ubuntu-20-04.md',
  'how-to-install-mongodb-on-ubuntu-20-04.md'
]
error ===================
Error: ENOENT: no such file or directory, open '(rsc)/./node_modules/prismjs/prism.js'
    at readFileSyncUtf8 (node:internal/fs/read/utf8:20:3)
    at readFileSync (node:fs:466:12)
    at module.exports (webpack-internal:///(rsc)/./node_modules/remark-prism/src/highlight.js:105:22)

[emmgfx]

Same error :(

[rezafikkri]

same error

[ltphuoc]

Same error. Can we have another way to hightlight code block

[firminochangani]

I ended up migrating to https://github.com/mapbox/rehype-prism and my setup now looks like this:

import rehypePrism from "@mapbox/rehype-prism";
import rehypeStringify from "rehype-stringify";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";

import { unified } from "unified";

export async function getContentFromMarkdown(page: string): Promise<string> {
  const content = await unified()
    .use(remarkParse) // Parse markdown content to a syntax tree
    .use(remarkRehype) // Turn markdown syntax tree to HTML syntax tree, ignoring embedded HTML
    .use(rehypePrism as any)
    .use(rehypeStringify) // Serialize HTML syntax tree
    .process(page);

  return content.toString();
}

[DolaminLiu]

Same error :(

[imclint21]

Same, @sergioramos

[rossamurphy]

same error

[abel-castro]

+1

[rollrodrig]

+1 Next.js (14.2.4) with typescript

code sniped

async function markdownToHtml(markdown: string) {
  const file = await unified()
    .use(remarkParse) // Parse Markdown to a syntax tree
    .use(remarkPrism as any) // Add syntax highlighting to code blocks
    .use(remarkRehype) // Transform Markdown syntax tree to HTML syntax tree
    .use(rehypeStringify) // Serialize HTML syntax tree to HTML
    .process(markdown)
  return String(file)
}

removing .use(remarkPrism as any) works

Unhandled Runtime Error
Error: ENOENT: no such file or directory, open '(rsc)/./node_modules/prismjs/prism.js'

Source
readFileSync
node:fs (448:20)
module.exports
node_modules/remark-prism/src/highlight.js (142:1)
eval
node_modules/remark-prism/src/index.js (74:1)
wrapped
node_modules/trough/lib/index.js (160:1)
next
node_modules/trough/lib/index.js (86:1)
Object.run
node_modules/trough/lib/index.js (57:1)
executor
node_modules/unified/lib/index.js (901:1)
Function.run
node_modules/unified/lib/index.js (884:1)
executor
node_modules/unified/lib/index.js (737:1)
new Promise
<anonymous>
Function.process
node_modules/unified/lib/index.js (720:1)
src/app/blog/[slug]/page.tsx (23:6) @ process

  21 |     .use(remarkRehype) // Transform Markdown syntax tree to HTML syntax tree
  22 |     .use(rehypeStringify) // Serialize HTML syntax tree to HTML
> 23 |     .process(markdown)
     |      ^
  24 |   return String(file)
  25 | }
  26 |
Call Stack
markdownToHtml
src/app/blog/[slug]/page.tsx (50:29)
getPostData
src/app/blog/[slug]/page.tsx (70:22)
Next.js
Hide collapsed frames

[adhemukhlis]

I found a solution for the issue by adding remark-prism to the Next.js configuration. This works for Next.js version 14+.

Here's the full configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ['remark-prism']
  },
}

export default nextConfig

This resolved the problem for me. I hope this helps others facing the same issue!

[varun-r-mallya]

same error :(

[imyuanli]

+1