reactjs - Ako spojiť TypeScript, Vite, React a npm link?
Napísal som jednoduchý embryonálny balík TypeScript (zverejnený v súkromnom registri) a chcem ho importovať do TypeScript React aplikácie vytvorenej pomocou Vite.
Všetko funguje dobre, až kým sa nepokúsim npm link tieto dva balíky. Po prepojení som stále schopný build aplikáciu cez npm run build (vlastne výsledok ešte nie je testovaný), ale lokálne vývojové prostredie spustené cez npm run dev stále zlyháva s nasledujúcou chybou.
[vite] Interná chyba servera: Nepodarilo sa vyriešiť vstupný bod balíka "my-package". Balík môže mať nesprávne uvedené main/module/exports v jeho súbore package.json: Nepodarilo sa vyriešiť vstupný bod balíka "my-package". Balík môže mať nesprávne uvedené main/module/exports v jeho súbore package.json.
Máte nejaký nápad?
Súbory v 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"]
}
Súbory v React aplikácii.
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 } }
});