Vite构建自定义Hook包时类型导出与导入报错求助

一、问题根源 #

• 类型文件未聚合：dist/index.d.ts未合并useInfiniteScroll的类型声明，反而单独生成useInfiniteScroll.d.ts，导致导入时类型识别失败
• 导出导入不匹配：默认导出与命名导出混淆，webpack将导入对象识别为非函数类型，触发报错

二、一步步修复 #

1. 统一导出逻辑（避免导入混淆） #

选一种导出方式并保持统一，推荐同时做命名导出+默认导出，适配不同项目的导入习惯：

// src/index.ts
import useInfiniteScroll from './useInfiniteScroll';

// 命名导出，支持import { useInfiniteScroll } from '你的包名'
export { useInfiniteScroll };
// 默认导出，支持import useInfiniteScroll from '你的包名'
export default useInfiniteScroll;

注意：项目中导入时必须与导出方式对应，不要混用两种导入语法。

2. 配置Vite和vite-plugin-dts，强制合并类型声明 #

调整vite.config.ts，让dts插件只生成一个聚合后的index.d.ts：

import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import { resolve } from 'path';

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      fileName: (format) => `index.${format}.js`,
      formats: ['es', 'cjs'] // 同时生成ES和CommonJS格式，兼容更多项目
    },
    rollupOptions: {
      // React这类依赖不打包进库，通过peerDependencies声明
      external: ['react'],
      output: {
        globals: { react: 'React' }
      }
    }
  },
  plugins: [
    dts({
      outDir: 'dist',
      include: ['src/index.ts'], // 仅处理入口文件的类型
      exclude: ['src/useInfiniteScroll.ts'], // 排除单独文件，强制合并类型到index
      rollupTypes: true // 开启类型合并功能
    })
  ]
});

3. 修正tsconfig.json的类型生成配置 #

确保TypeScript的声明文件生成规则正确：

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "declaration": true, // 必须开启，生成类型声明文件
    "declarationDir": "dist", // 类型文件输出到dist目录
    "noEmit": true, // 让vite-plugin-dts负责类型生成，避免冲突
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

4. 检查package.json的入口配置 #

必须明确指定类型文件路径及ES/CommonJS入口：

{
  "name": "你的包名",
  "version": "1.0.0",
  "type": "module",
  "main": "./dist/index.cjs.js",
  "module": "./dist/index.es.js",
  "types": "./dist/index.d.ts", // 核心：指向合并后的类型文件
  "exports": {
    ".": {
      "import": "./dist/index.es.js",
      "require": "./dist/index.cjs.js",
      "types": "./dist/index.d.ts"
    }
  },
  "peerDependencies": {
    "react": "^18.0.0"
  }
}

三、验证修复 #

1. 执行npm run build，检查dist目录：应仅生成index.es.js、index.cjs.js、index.d.ts三个文件，打开index.d.ts可看到useInfiniteScroll的完整类型声明
2. 在本地测试项目中安装包：npm install ../你的包目录，导入使用后检查类型提示和控制台，确认无报错

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