Next.js中自定义npm包导出无法访问的问题求助

问题诊断 #

• Webpack配置中output.path重复定义，最终打包产物输出到demo目录，但package.json的main字段指向dist/SkopAPI.js，导致Next.js加载的是错误路径的文件
• UMD库的导出配置未正确匹配源码的导出结构，模块无法被正确解析
• 缺少TypeScript类型声明文件（可选影响项），可能干扰Next.js的模块解析逻辑

具体修复步骤 #

1. 修正Webpack打包路径 #

修改Webpack配置中的output.path，只保留与package.json对应的输出目录：

module.exports = {
  // ...其他原有配置
  output: {
      filename: 'SkopAPI.js',
      path: path.resolve(__dirname, 'dist'), // 仅保留dist路径，与package.json的main字段对应
      library:{
          name: 'SkopAPI',
          type: 'umd',
      },
      globalObject: 'this',
  },
};

2. 对齐源码导出与UMD打包逻辑 #

在包的入口文件（TypeScript源码或编译后的JS）中，确保导出方式兼容ES模块与UMD规范：

// src/index.ts
import Doctor from './Doctor';
import Patient from './Patient';

// 命名导出，适配ES模块导入
export { Doctor, Patient };
// 可选：添加默认导出，兼容默认导入场景
export default { Doctor, Patient };

3. 重新打包并更新依赖 #

在npm包目录执行打包命令，确保产物输出到正确路径：

npm run build

在Next.js项目中重新安装包：

# 本地开发场景
npm install ../path/to/skop-api
# 已发布到npm的场景
npm install skop-api@latest

4. 调整Next.js中的导入方式 #

根据修复后的包结构选择对应导入方式：

• 命名导入（推荐，匹配源码的命名导出）：

import { Patient, Doctor } from "skop-api";

• 默认导入（若添加了default导出）：

import SkopAPI from "skop-api";
// 使用方式：SkopAPI.Patient.init(...)

5. 可选：添加TypeScript类型声明 #

为提升兼容性，建议在npm包中补充类型声明：

1. 在src目录创建index.d.ts：

export interface Patient {
  init(key: string, room: number): void;
  // 补充其他方法声明
}

export interface Doctor {
  // 补充Doctor的方法声明
}

export const Patient: Patient;
export const Doctor: Doctor;

2. 在package.json中添加类型字段：

{
  // ...其他配置
  "types": "dist/index.d.ts"
}

3. 修改Webpack配置或使用tsc命令，将类型声明文件同步到dist目录。

验证修复 #

使用复现代码测试：

import { Patient } from "skop-api"

export default function foo(){
  const key = "key123";
  const room = 995;

  Patient.init(key, room); // 此时应能正常调用
}

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