Next.js中导入TypeScript常量失败问题求助

问题描述 #

我在库的.ts文件中定义并导出了以下内容：

export type LocationState = "ACTIVE_LOCATION" | "DEFUNCT_LOCATION";

export const LocationStates = {
  ACTIVE: "ACTIVE_LOCATION" as LocationState,
  DEFUNCT: "DEFUNCT_LOCATION" as LocationState,
} as const;

export interface Location {
  title: string;
  postal_address: string;
}

在Next.js应用中，导入Location接口可以正常工作，但导入LocationState或LocationStates时，会触发“Cannot resolve my library”错误：

// 正常工作
import { Location } from "@psankar/test-next-js-lib-library";
    
// 无法工作
import { LocationStates } from "@psankar/test-next-js-lib-library";

该问题仅在访问对应路由时触发，VS Code中无报错提示。

原因分析 #

这类问题通常源于库的打包/导出配置不完整，或者Next.js的模块解析规则未正确识别库中的类型与常量导出：

• 库的编译产物未包含LocationStates常量的导出代码
• 库的package.json中main/types字段指向错误，导致Next.js无法找到对应文件
• Next.js默认不会转译第三方库，若库使用未编译的ES语法或TypeScript特性，会导致解析失败

解决方案 #

1. 检查并修复库的package.json配置 #

确保package.json中包含以下正确字段：

{
  "name": "@psankar/test-next-js-lib-library",
  "main": "dist/index.js", // 指向编译后的JS入口
  "types": "dist/index.d.ts", // 指向生成的类型声明文件
  "module": "dist/index.esm.js", // 可选，ES模块入口
  "files": ["dist"] // 指定发布时包含的文件目录
}

2. 确保库的TypeScript编译配置正确 #

在库的tsconfig.json中开启类型声明生成，并确保编译包含所有导出内容：

{
  "compilerOptions": {
    "declaration": true, // 生成.d.ts类型文件
    "declarationDir": "dist", // 类型文件输出目录
    "outDir": "dist", // JS文件输出目录
    "module": "ESNext",
    "target": "ES6"
  },
  "include": ["src/**/*"], // 确保包含所有源文件
  "exclude": ["node_modules", "dist"]
}

重新执行库的编译命令（如tsc），确认dist目录下生成了完整的JS文件和对应的.d.ts文件。

3. 配置Next.js转译目标库 #

在Next.js项目的next.config.js中添加transpilePackages配置，让Next.js直接转译你的库：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@psankar/test-next-js-lib-library'],
};

module.exports = nextConfig;

4. 验证修复 #

• 重新打包库并更新Next.js项目中的依赖（本地开发可使用npm link或yarn link同步更新）
• 重启Next.js开发服务
• 访问对应路由，检查导入LocationState和LocationStates是否正常

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