Búsqueda de sitios web

reactjs - ¿Cómo ensamblar TypeScript, Vite, React y npm link?


Escribí un paquete simple y embrionario de TypeScript (publicado en un registro privado) y quiero importarlo en una aplicación de React con TypeScript creada con Vite.

Todo funciona bien hasta que intento npm link los dos paquetes. Una vez vinculados, todavía puedo build la aplicación a través de npm run build (en realidad, el resultado aún no ha sido probado), pero el entorno de desarrollo local iniciado a través de npm run dev sigue fallando con el siguiente error.

[vite] Error interno del servidor: No se pudo resolver la entrada para el paquete "my-package". El paquete puede tener main/module/exports incorrectos especificados en su package.json: No se pudo resolver la entrada para el paquete "my-package". El paquete puede tener main/module/exports incorrectos especificados en su package.json.

¿Alguna idea?

Archivos en mi-paquete.

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

Archivos en la aplicación 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 } }
});