Error: export 'getHighlighterCore' (reexported as 'getHighlighterCore') was not found in './core.mjs' (module has no exports)

[ben519]

Describe the bug

Firstly, thanks for your work on shikiji! It solves a very real pain point with shiki, and I'm excited to see the project continue.

---

I'm developing a project with Next.js 13 (app dir) and I'm running into the following error

error ./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/shikiji/dist/index.mjs
./src/md-utils/index.js
./src/app/post/[postId]/edit/page.jsx

The mere act of importing shikiji causes the error

import { getHighlighter } from 'shikiji'

Note that I installed shikiji with npm install shikiji and it's listed in my package.json file as "shikiji": "^0.6.3"

Reproduction

(Will produce if necessary)

System Info

System:
    OS: macOS 13.5.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.23 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 19.4.0 - ~/.nvm/versions/node/v19.4.0/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v19.4.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.110
    Safari: 16.6

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[antfu]

Would certainly be happy to see a minimal reproduction, it's working fine for me.

[ben519]

Here ya go. Thanks again for your help!

Note that I produced this example by...

1. npx create-next-app@latest shikiji-test
2. Add import { getHighlighter } from "shikiji" to src/app/page.js
3. Remove irrelevant code and files

[antfu]

Seems to working fine on https://stackblitz.com/~/github.com/ben519/shikiji-test

[ben519]

So strange. Here's what I see, locally

[ben519]

I posted about this on StackOverflow in case you're interested in following. One thing that did come up is the difference in node versions. I'm using v19.4.0 locally but it looks like StackBlitz is using v16.20.0.

[antfu]

Any reasons you are not using a LTS version of Node? Did tried with another Node versions?

[ben519]

No particular reason.

I just tried installing and using Node 16 with

nvm install 16
nvm use 16
rm -rf node_modules
npm install
npm run dev

Same error, unfortunately.

[ben519]

Interestingly enough, if I run the create-next-app@latest and select Yes for Typescript, I can import shikiji just fine. Seems to have something to do with importing from a ".js" file.

[antfu]

I guess the issue is probably more on the next side. I am closing it here as it's not clear what we can do on our side. Thanks

[angeloashmore]

For anyone else coming across this issue in the future, it appears that Next.js does not load .mjs files as one might expect. shikiji is exclusively an ESM library that only uses .mjs files.

You can modify Next.js' Webpack configuration to support .mjs files with the following change in next.config.js:

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: function (config) {
    config.module.rules.push({
      test: /\.m?js$/,
      type: "javascript/auto",
      resolve: {
        fullySpecified: false,
      },
    });
    return config;
  },
};

module.exports = nextConfig;

Source: vercel/next.js#17806

The equivalent configuration change in apps using Turbopack is unknown (maybe it's not even needed?).

[qhanw]

When i use shikiji in nextjs，meeting the seemful question too. Now, I have to chang back to shiki.
node: v18.12.0
nextjs: v13.5.4

[BleedingDev]

  webpack: function (config) {
    config.module.rules.push({
      test: /\.m?js$/,
      type: "javascript/auto",
      resolve: {
        fullySpecified: false,
      },
    });
    return config;
  },

This worked, thank you! Had the same problem.

[deadcoder0904]

i got this error in next.js 14 while using jsx-email which uses shikiji as a dependency. but this fixed it :)

[joulev]

For Next.js users: vercel/next.js#58967 has been merged, so from Next.js v14.0.4-canary.33 it's possible to use shikiji without the Webpack hack. The hack was incompatible with Drizzle apparently, so it was blocking me from using shikiji entirely until this canary version, but now it's working fine.

[danharten-sovtech]

I am personally having trouble with the shikiji package too, specifically it being pure ESM and my app being commonjs :( I dont think I can use this package

Edit* I am not using nextjs

[danharten-sovtech]

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/**/Repos/**/packages/emailer/node_modules/shikiji/dist/index.mjs not supported.

[antfu]

You can use import() in CJS to import shikiji as documented. Please do not comment in a closed issue. Create a new one with proper reproduction instead. Thanks.