Next.js报错：Unexpected token 'export' 问题排查求助

先明确：utils目录与pages同级不会导致问题 #

Next.js对项目目录结构没有强制限制，只要导入路径正确，同级目录的utils完全可以正常使用，所以这个不是报错原因。

核心原因：自定义NPM包renette-api的模块格式与Next.js服务器端环境不兼容 #

错误栈显示报错发生在Next.js的服务器端代码（.next/server/pages/index.js）中，Node.js默认以CommonJS模块系统加载代码，而你的renette-api包可能是ESModule格式（使用export/import语法）但未正确配置，导致Node.js无法解析ESModule语法。

排查与解决步骤 #

1. 检查renette-api包的package.json配置

• 查看是否包含"type": "module"字段：
  如果你的包源码是ESModule风格（用export导出），必须在包的package.json中添加"type": "module"，否则Node.js会将其当作CommonJS模块处理，遇到export就会报错。
• 确认main/module字段配置：
  • main字段应指向兼容CommonJS的入口文件（如果有编译后的CJS版本）；
  • module字段指向ESModule入口文件，供Webpack等打包工具识别。
    如果你的包只有ESModule代码，确保main指向正确的ESModule文件，同时添加"type": "module"。

2. 验证renette-api的编译输出

如果你的包用TypeScript或ES6+编写，检查编译配置：

• 对于TS项目，确保tsconfig.json中：
  • "module"设置为"CommonJS"（如果需要输出CJS版本），或"ESNext"配合"type": "module"；
  • "target"设置为"ES6"或更高版本，保证编译后的代码兼容Node.js 18。
• 确认发布到NPM的包包含编译后的代码，而非未编译的源码（比如TS文件直接发布）。

3. 调整Next.js配置，强制转译自定义包

如果无法修改renette-api的配置，可让Next.js在构建时转译该包的代码，适配服务器端环境：
在next.config.js中添加transpilePackages配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['renette-api'],
}
module.exports = nextConfig

注：Next.js 13+内置该功能，旧版本需使用next-transpile-modules插件。

4. 本地单独验证包的兼容性

创建一个简单的Node.js脚本测试renette-api是否能在CommonJS环境下正常加载：

// test.js
const CAPI = require('renette-api')
const api = new CAPI()
console.log('API loaded successfully:', api)

运行node test.js，如果报错，说明包本身的模块格式存在问题，优先修复包的配置，再在Next.js中使用。

5. Docker环境额外检查

• 在.dockerignore中添加node_modules，避免将本地依赖挂载到容器，确保容器内重新安装依赖；
• 确认Docker镜像使用的Node.js版本（node:18-alpine）与本地开发环境一致，避免版本差异导致的模块加载问题。

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