Next.js 13引入shikiji本地运行报module has no exports错误

可能原因 #

这个错误的核心是Next.js在JavaScript项目与TypeScript项目中的模块解析策略存在差异，导致shikiji的ESM模块导出被错误识别：

• JS项目默认的模块解析规则更偏向CommonJS，而shikiji是纯ESM包，解析./core.mjs时，JS项目未正确识别其ESM导出，误判为模块无导出。
• TS项目会自动启用适配ESM的解析配置（如tsconfig.json中的moduleResolution: "bundler"或node16），而JS项目的jsconfig.json默认配置缺少对应规则。

解决方案 #

1. 调整JS项目的模块解析配置 #

在项目根目录创建或修改jsconfig.json，添加ESM兼容的解析规则：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler",
    "target": "ESNext"
  },
  "include": ["src/**/*"]
}

2. 强制Next.js转译shikiji模块 #

在next.config.js中配置transpilePackages，让Next.js正确处理shikiji的ESM模块：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['shikiji'],
}

module.exports = nextConfig

3. 重置依赖安装 #

删除现有依赖文件后重新安装，避免缓存或不完整安装导致的问题：

rm -rf node_modules package-lock.json
npm install

验证 #

修改配置后重启npm run dev，若import { getHighlighter } from "shikiji"可正常加载，说明问题已解决。

内容的提问来源于stack exchange，提问作者Ben