NextJS v13.5.4中用chalk v5.3.0在middleware遇navigator未定义错误求助

Chalk v5+ 会根据运行环境自动切换导入浏览器/Node.js版本，但Next.js中间件运行在Edge Runtime中，Webpack错误地导入了Chalk的浏览器适配版本——该版本依赖浏览器环境的navigator对象，而Edge Runtime不存在这个对象，因此抛出ReferenceError。

方案1：强制Webpack导入Chalk的Node.js版本 #

在next.config.js中配置Webpack别名，让中间件打包时使用Chalk的Node.js适配版本：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    // 针对服务端和中间件环境，替换chalk为node版本
    if (isServer || config.name === 'middleware') {
      config.resolve.alias['chalk'] = require.resolve('chalk/node.js');
    }
    return config;
  },
};

module.exports = nextConfig;

修改后重启开发服务器，Webpack会正确导入不依赖navigator的Chalk版本。

方案2：降级Chalk到v4版本 #

Chalk v4没有区分环境适配版本，在Edge Runtime中可以直接正常运行：

npm uninstall chalk
npm install chalk@4.1.2

降级后无需额外配置，直接保留原有代码即可。

方案3：临时模拟navigator对象（不推荐） #

如果上述方案暂时无法实施，可以在中间件代码最顶部添加临时hack，模拟navigator对象：

// 仅在中间件顶部添加，临时规避错误
if (typeof navigator === 'undefined') {
  globalThis.navigator = {} as unknown as Navigator;
}

注意：这只是临时 workaround，可能引发其他未知问题，不建议长期使用。

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