"module has no exports" error - works fine on stackblitz but fails locally

Question

I'm trying to get up and running with shikiji (a rewrite of shiki). As such, I've created this minimal example Next.js 13 project. It's the boilerplate project you get with npx create-next-app@latest myproject except I've installed shikiji and added a simple import statement here

// sr/app/page.js

import { getHighlighter } from "shikiji"

export default function Home() {
  return (
    <div>Hello World</div>
  )
}

Now when I npm run dev I get 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)

The weird thing is, the author of shikiji tried to reproduce the error on StackBlitz but could not. There is nothing particularly special or unusual about my setup.

Here's my package.json for reference

{
  "name": "shikiji-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "autoprefixer": "10.4.15",
    "eslint": "8.48.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "postcss": "8.4.29",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "shikiji": "^0.6.3",
    "tailwindcss": "3.3.3"
  }
}

Note: The error does not occur if I run npx create-next-app@latest and use Typescript.

What's going on here?

Answer 1

shikiji is an ESM-focused rewrite of shiki. In order to run esm focused package. Add below webpack configuration in next.config.js file. It worked in my case using the same configuration.

/** @type {import('next').NextConfig} */

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

module.exports = nextConfig;