[ERR_REQUIRE_ESM]: require() of ES Module `shiki` when using `14.2.x` about next.js

[arvinxx]

Let me introduce a more easy way to fix it:

// next.config.mjs


const nextConfig = {
  // ... other config

  experimental: {
    optimizePackageImports: [
       // ... other packages
+      'shiki',
    ],

  // ...
}

// ...

[Innei]

Currently this is the only solution, you can only import in async to ignore errors.

I'm looking at this as well.

Edit:

Top level async/await will get a warning. So we can use use hook.

Use it in async component or dynamic import this component.

const codeHighlighterPromise = (async () => {
  if (isServerSide) return
  const [{ getHighlighterCore }, getWasm, { codeHighlighter }] =
    await Promise.all([
      import('shiki/core'),
      import('shiki/wasm').then((m) => m.default),
      import('./core'),
    ])

  const core = await getHighlighterCore({
    themes: [
      import('shiki/themes/github-light.mjs'),
      import('shiki/themes/github-dark.mjs'),
    ],
    langs: [],
    loadWasm: getWasm,
  })

  return {
    codeHighlighter: core,
    fn: (o: { lang: string; attrs: string; code: string }) => {
      return codeHighlighter(core, o)
    },
  }
})()
export const ShikiHighLighter: FC<Props> = (props) => {
  const { lang: language, content: value, attrs } = props
  const codeHighlighter = use(codeHighlighterPromise)
// ...
}

[dev-pi2pie]

https://github.com/dev-pi2pie/next-v14_2-with-rehype-pretty-code-and-shiki-transformer

I've made a repo which reproducing the similar issue which happened on the build stage.
And this repo is a simple editor, which input something like markdown syntax to the text area and get the result back.

And the issue happened in the code:

src/lib/mdsource.ts

I think the issue is from the code:

import {
  transformerNotationDiff,
  transformerNotationWordHighlight,
  transformerNotationHighlight,
} from "@shikijs/transformers";

If I do not use the transformers in the rehype-pretty-code, and the build will be success.

However, good to see @arvinxx mentioned the issue I encountered too.

[dev-pi2pie]

Good, after I got the solution from @Innei provided --> quick link

I tried this solution in the repo, which I made for reproducing this issue before.
I made a new branch, and tried this solution, and it works.
(with dynamic import)

The new branch in the repo for reproducing this issue:
with-dynamic-import

Key diff code in src/app/page.tsx:

import { EditorProvider } from "@/components/editor/editorContext";
- import EditorResult from "@/components/editor/editorResult";
import EditorTextArea from "@/components/editor/editorTextArea";
+ import dynamic from "next/dynamic";

export default function Home() {
+  const EditorResult = dynamic(
+    () => import("@/components/editor/editorResult"),
+    { ssr: false }
+  );
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <EditorProvider>
        <div className="lg:max-w-[1024px] mx-auto flex flex-col gap-5 mt-10 p-2">
          <h1>Editor</h1>
          <EditorTextArea className="text-black" />
          <article className="prose dark:text-white dark:prose-headings:text-white">
            <EditorResult />
          </article>
        </div>
      </EditorProvider>
    </main>
  );
}

Thanks @Innei pointed out the solution

[dev-pi2pie]

Hi @arvinxx, thanks for sharing, really a good solution, nice! 👍

I add this solution to a new branch in the repo which I made for reproducing this issue.

new branch:
with-optimize-package-imports

[hasanshahriar32]

i have also faced similar issue. i was using nextra with app router.

this following package is creating problem from nextra: @theguild/remark-mermaid

[songtanjichuan]

me too

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[himself65]

same error here

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!