如何排查Vite构建的React组件npm包的无效Hook调用错误？

问题背景 #

我基于Vite库模式开发了可复用React组件npm包「react-sheet-modal」，此前运行完全正常。一周前尝试通过npm symlink启动本地开发服务器添加新功能时，突然触发错误：

Invalid hook call. Hooks can only be called inside of the body of a function component...

项目最初参考Vite库模式构建React组件库的教程完成搭建。

已尝试的解决方案 #

• 核对React与ReactDOM版本（均为19.0.0），确认版本一致；检查组件代码，未发现违反Hook规则的调用场景；排查重复React实例问题，且移除symlink后错误仍存在
• 回滚至早期Git版本，错误依旧出现
• 新建干净Vite项目并安装该npm包，同样触发相同错误
• 参考相关GitHub方案：移除node_modules中的symlink、在package.json添加resolutions字段、将React和ReactDOM移至peerDependencies

排查方向 #

项目核心目录为lib（组件逻辑）、src（Demo页面）、dist（编译后包文件）。通过相对路径在src中直接引用lib组件时无任何问题，因此怀疑错误根源与构建配置及dist目录的输出产物相关。

项目配置文件 #

package.json #

{
  "name": "react-sheet-modal",
  "private": false,
  "version": "1.0.11",
  "description": "An authentic modal sheet for ReactJs - Bringing the ()iOS experience to the web",
  "repository": {
    "url": "git+https://github.com/Colin-Farkas-Personal/React-Sheet-Modal.git"
  },
  "homepage": "https://github.com/Colin-Farkas-Personal/React-Sheet-Modal/blob/main/README.md",
  "keywords": [
    "ReactJs",
    "sheet",
    "modal"
  ],
  "author": {
    "name": "Colin Farkas",
    "email": "colin.farkas@hotmail.se"
  },
  "type": "module",
  "main": "dist/main.js",
  "module": "dist/main.js",
  "types": "dist/main.d.ts",
  "files": [
    "dist"
  ],
  "sideEffects": [
    "**/*.css"
  ],
  "scripts": {
    "dev": "vite",
    "dev:app1": "vite --mode app_1",
    "dev:app2": "vite --mode app_2",
    "build": "tsc -b ./tsconfig.lib.json && vite build",
    "build:watch": "tsc -b ./tsconfig.lib.json && vite build --watch",
    "lint": "eslint .",
    "preview": "vite preview",
    "prepublishOnly": "npm run build"
  },
  "peerDependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/node": "^22.9.3",
    "@types/react": "^18.3.11",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.3",
    "concurrently": "^9.1.0",
    "eslint": "^9.13.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.13",
    "globals": "^15.11.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "sass": "^1.83.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.10.0",
    "vite": "^5.4.9",
    "vite-plugin-dts": "^4.3.0",
    "vite-plugin-lib-inject-css": "^2.1.1",
    "vite-plugin-restart": "^0.4.2",
    "vite-plugin-svgr": "^4.3.0"
  }
}

vite.config.ts #

import { resolve } from 'path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import { libInjectCss } from 'vite-plugin-lib-inject-css';
import ViteRestart from 'vite-plugin-restart';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [
    libInjectCss(),
    dts({
      tsconfigPath: resolve(__dirname, 'tsconfig.lib.json'),
    }),
    ViteRestart({
      restart: ['/lib/**'],
    }),
    svgr({
      svgrOptions: {
        ref: true,
        svgo: false,
        titleProp: true,
      },
      include: '**/*.svg',
    }),
  ],
  build: {
    copyPublicDir: false,
    lib: {
      entry: resolve(__dirname, 'lib/main.ts'),
      formats: ['es'],
    },
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name][extname]',
        entryFileNames: '[name].js',
      },
      external: ['react', 'react-dom'],
    },
  },
  resolve: {
    dedupe: ['react', 'react-dom'],
  },
});

tsconfig.app.json #

{
  "compilerOptions": {
    "target": "ES6",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

    "types": ["vite/client"]
  },
  "include": ["src", "env.ts", "src/vite-env.d.ts"]
}

tsconfig.lib.json #

{
  "extends": "./tsconfig.app.json",
  "include": ["lib"],
  "exclude": ["src"]
}

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