reactjs - איך לשלב TypeScript, Vite, React ו-npm link?


כתבתי חבילת TypeScript פשוטה ועוברת (פורסמה ברגיסטרי פרטי) ואני רוצה לייבא אותה באפליקציית React ב-TypeScript שנוצרה עם Vite.

הכל עובד בסדר עד שאני מנסה npm link את שתי החבילות. לאחר קישור, אני עדיין מסוגל לבנות את האפליקציה דרך npm run build (למעשה התוצאה עדיין לא נבדקה), אבל סביבה מקומית לפיתוח שמופעלת דרך npm run dev ממשיכה להיכשל עם השגיאה הבאה.

[vite] שגיאת שרת פנימית: לא ניתן לנתב את הקובץ הראשי של החבילה "my-package". ייתכן שהחבילה כוללת הגדרות שגויות של main/module/exports בקובץ package.json שלה: לא ניתן לנתב את הקובץ הראשי של החבילה "my-package". ייתכן שהחבילה כוללת הגדרות שגויות של main/module/exports בקובץ package.json שלה.

יש רעיון?

קבצים ב-my-package.

index.ts

export class User {
  public email?: string;
  public name?: string;

  constructor(src: Partial<User> = {}) {
    this.email = src.email || "-";
    this.name = src.name || "";
  }

  public isValid(): boolean {
    return this.email !== "-";
  }
}

package.json

{
  "name": "my-package",
  "description": "my-package",
  "license": "UNLICENSED",
  "version": "1.0.3",
  "devDependencies": {
    "@types/node": "16.11.11",
    "ts-node": "10.4.0",
    "typescript": "4.5.2"
  },
  "scripts": {
    "prepack": "tsc"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "esModuleInterop": true,
    "declaration": true,
    "module": "ESNext",
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "ESNext"
  },
  "include": ["*.ts"]
}

קבצים ב-אפליקציית React.

tsconfig.json

{
  "compilerOptions": {
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": false,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "moduleResolution": "Node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": false,
    "strict": true,
    "target": "ESNext",
    "useDefineForClassFields": true
  },
  "include": ["./src"]
}

vite.config.ts

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

export default defineConfig({
  build:        { outDir: "dist" },
  optimizeDeps: { exclude: ["my-package"] },
  plugins:      [react()],
  resolve:      { dedupe: ["my-package"] },
  server:       { hmr: { overlay: false } }
});