reactjs - Kako spojiti TypeScript, Vite, React i npm link?


Napisao sam jednostavan, embrionalni TypeScript paket (objavljen na privatnom registru) i želim ga uvesti u TypeScript React aplikaciju kreiranu s Viteom.

Sve radi u redu dok ne pokušam npm link ta dva paketa. Nakon povezivanja, još uvijek mogu build aplikaciju putem npm run build (zapravo rezultat još nije testiran), ali lokalno razvojno okruženje pokrenuto putem npm run dev i dalje ne uspijeva s sljedećom greškom.

[vite] Interna serverska greška: Nije uspjelo pronalaženje unosa za paket "my-package". Paket možda ima netočno specificirane main/module/exports u svom package.json: Nije uspjelo pronalaženje unosa za paket "my-package". Paket možda ima netočno specificirane main/module/exports u svom package.json.

Imaš li ideju?

Datoteke u 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"]
}

Datoteke u React aplikaciji.

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 } }
});