'addClassToHast' was not found in './core.mjs'

[Tim Hilt]

I'm trying to use rehype-pretty-code in a Next.js 14+ application (app-directory) together with next-mdx-remote/rsc. After adding the plugin, I'm seeing this error:

⨯ ./node_modules/.pnpm/shikiji@0.7.6/node_modules/shikiji/dist/index.mjs
export 'addClassToHast' (reexported as 'addClassToHast') was not found in './core.mjs' (module has no exports)

Import trace for requested module:
./node_modules/.pnpm/shikiji@0.7.6/node_modules/shikiji/dist/index.mjs
./node_modules/.pnpm/rehype-pretty-code@0.12.0_shikiji@0.7.6/node_modules/rehype-pretty-code/dist/rehype-pretty-code.js

Here's a code-snippet from my application:

import { MDXRemote } from "next-mdx-remote/rsc";
import rehypePrettyCode from "rehype-pretty-code";

// ...

        <MDXRemote
          source={markdown}
          options={{
            // @ts-ignore
            mdxOptions: { rehypePlugins: [[rehypePrettyCode, {}]] },
          }}
        />

Is there anything I can do about that? Maybe I'm misusing the plugin?

You can take a look at the code in context here: https://github.com/tim-hilt/website/tree/feat/better-mdx-code-highlighting

[atomiks]

This seems like an error with your bundler or something as that function is exported from node_modules/shikiji/dist/core.mjs.

[Tim Hilt]

Strange.

The error I showed earlier happend while serving with next dev. This is what happens when running next build:

❯ pnpm build

> website@0.1.0 build /Users/timhilt/dev/website
> next build

   ▲ Next.js 14.0.3

Failed to compile.

./node_modules/.pnpm/shikiji@0.7.6/node_modules/shikiji/dist/index.mjs
export 'addClassToHast' (reexported as 'addClassToHast') was not found in './core.mjs' (module has no exports)

Import trace for requested module:
./node_modules/.pnpm/shikiji@0.7.6/node_modules/shikiji/dist/index.mjs
./node_modules/.pnpm/rehype-pretty-code@0.12.0_shikiji@0.7.6/node_modules/rehype-pretty-code/dist/rehype-pretty-code.js
./app/blog/[article]/page.tsx

./node_modules/.pnpm/shikiji@0.7.6/node_modules/shikiji/dist/index.mjs
export 'getHighlighterCore' (reexported as 'getHighlighterCore') was not found in './core.mjs' (module has no exports)

Import trace for requested module:
./node_modules/.pnpm/shikiji@0.7.6/node_modules/shikiji/dist/index.mjs
./node_modules/.pnpm/rehype-pretty-code@0.12.0_shikiji@0.7.6/node_modules/rehype-pretty-code/dist/rehype-pretty-code.js
./app/blog/[article]/page.tsx

./node_modules/.pnpm/shikiji@0.7.6/node_modules/shikiji/dist/index.mjs
export 'getShikiContext' (reexported as 'getShikiContext') was not found in './core.mjs' (module has no exports)

Import trace for requested module:
./node_modules/.pnpm/shikiji@0.7.6/node_modules/shikiji/dist/index.mjs
./node_modules/.pnpm/rehype-pretty-code@0.12.0_shikiji@0.7.6/node_modules/rehype-pretty-code/dist/rehype-pretty-code.js
./app/blog/[article]/page.tsx

./node_modules/.pnpm/shikiji@0.7.6/node_modules/shikiji/dist/index.mjs
export 'isPlaintext' (reexported as 'isPlaintext') was not found in './core.mjs' (module has no exports)

Import trace for requested module:
./node_modules/.pnpm/shikiji@0.7.6/node_modules/shikiji/dist/index.mjs
./node_modules/.pnpm/rehype-pretty-code@0.12.0_shikiji@0.7.6/node_modules/rehype-pretty-code/dist/rehype-pretty-code.js
./app/blog/[article]/page.tsx

./node_modules/.pnpm/shikiji@0.7.6/node_modules/shikiji/dist/index.mjs
export 'isSpecialLang' (reexported as 'isSpecialLang') was not found in './core.mjs' (module has no exports)

Import trace for requested module:
./node_modules/.pnpm/shikiji@0.7.6/node_modules/shikiji/dist/index.mjs
./node_modules/.pnpm/rehype-pretty-code@0.12.0_shikiji@0.7.6/node_modules/rehype-pretty-code/dist/rehype-pretty-code.js
./app/blog/[article]/page.tsx


> Build failed because of webpack errors
   Creating an optimized production build  . ELIFECYCLE  Command failed with exit code 1.

so it seems like it doesn't find any exports at all? Did you ever try building a rehype-pretty-code bundle with pnpm? Or maybe it's because of using it in a server-component?

[NakaiKazuki]

@tim-hilt

Hi!!,
I also encountered the same error, but when I wrote the description below, it worked without any problems.

const nextConfig = {
  webpack: (
    config
  ) => {
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto",
    });
    return config;
  },
};

[Tim Hilt]

@NakaiKazuki works for me too! How did you find that? What exactly does it do? @atomiks is this Next.js-specific or could there be a fix that can be applied to rehype-pretty-code?

[atomiks]

It seems like your webpack setup can't read .mjs files as JavaScript like .js, which that fixes. The default Next.js bundler should work though and does in this repo 🤔

is this Next.js-specific or could there be a fix that can be applied to rehype-pretty-code?

It's a bundler issue and not related to this package. Furthermore, the error originates from shikiji where one possible workaround is using type: "module" + .js dist files instead, but what it's doing is valid and should work, meaning the bundler is the core of the issue. This package can't control either the bundler setup or shiki's dist files.

[NakaiKazuki]

@tim-hilt

Sorry, I don't know much about it either.
I used this link for reference

reference

[Tim Hilt]

Strange stuff :D but thanks for the link and providing the solution! Seems to be an issue with Next/Webpack

[Tim Hilt]

@atomiks before I spam you with a new issue - the website states that every Vs Code theme can be used with rehype-pretty-code. How does this work? I naively tried „github-dark-default“ and it failed

[atomiks]

For plain strings, there is no github-dark-default, only github-dark.

For themes that aren't pre-packaged in shikiji, you need to save the theme's json locally and import it.

Both details documented here: https://rehype-pretty-code.netlify.app/#theme