自定义npm包导出useWindowDimensions后ESLint及运行时报错求助

问题根源分析 #

核心问题在于包的编译产物文件名与package.json配置不匹配，同时Vite打包配置未正确处理导出逻辑，导致实际运行时JS文件未包含useWindowDimensions的导出；而VSCode能识别是因为类型声明文件是正确的。

步骤1：修复包编译产物的文件名不匹配 #

你的包名是@espe/components-front，但package/package.json里main/module/exports指定的产物文件名是ap27333-components-front，两者完全不一致，导致项目无法正确找到导出模块。

操作： #

1. 新建/修改包的vite.config.js，配置build.lib确保输出文件名与包名对应：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: './src/index.ts', // 指向根导出文件
      name: 'EspeComponentsFront', // UMD格式全局变量名
      fileName: (format) => `espe-components-front.${format}.js`, // 统一输出文件名格式
    },
    rollupOptions: {
      // 排除React依赖（通过peerDependencies声明）
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
});

2. 更新package/package.json里的路径配置，与上面的输出文件名一致：

{
  "main": "./dist/espe-components-front.umd.js",
  "module": "./dist/espe-components-front.es.js",
  "exports": {
    ".": {
      "import": "./dist/espe-components-front.es.js",
      "require": "./dist/espe-components-front.umd.js"
    },
    "./dist/style.css": "./dist/style.css"
  }
}

步骤2：验证导出链完整性 #

确保三层导出逻辑没有断裂：

• src/index.ts：export * from './hooks';
• src/hooks/index.ts：export * from './useWindowDimensions';
• src/hooks/useWindowDimensions.ts：export const useWindowDimensions = () => { /* 你的逻辑 */ };

步骤3：修复ESLint的import识别问题 #

项目ESLint无法识别导出，是因为eslint-import-resolver-typescript配置缺失：

1. 安装依赖：

npm install eslint-import-resolver-typescript --save-dev

2. 更新项目eslintrc.json的import/resolver配置：

"import/resolver": {
  "node": {
    "paths": ["src"],
    "extensions": [".js", ".jsx", ".ts", ".tsx"]
  },
  "typescript": {
    "alwaysTryTypes": true,
    "project": "./tsconfig.json"
  }
}

步骤4：重新打包并测试 #

1. 在包目录执行npm run build，检查dist目录下的JS文件：
   • 打开espe-components-front.es.js，确认存在export const useWindowDimensions，验证导出已被正确打包。
2. 在项目中重新安装包（本地测试用npm install ../path-to-your-package），启动项目验证错误是否消失。

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