typescript - ES-version för delad kod mellan React och Express


Jag sätter upp ett monorepo för React frontend (Vite) och Express backend i TypeScript. Jag kan inte göra både React och Express nöjda när jag importerar moduler från ett delat paket, eftersom React använder ESNext och Express använder commonjs för "module" i tsconfig.json. Finns det ett sätt att kringgå detta?

För närvarande har jag satt målet för mitt vanliga paket till ESNext och Express kommer att klaga som SyntaxError: Unexpected token 'export'

Om jag tar bort ESNext-målet kommer Express att bli nöjd men React börjar klaga som The requested module '/@fs/Users/kdk/Desktop/saas-template/shared/dist/models/Example.js' does not provide an export named 'default'

Projektstrukturen ser ut så här

root
| package.json
| tsconfig.json
| frontend
    | package.json
    | tsconfig.json
|
| backend
    | package.json
    | tsconfig.json
|
| shared
    | package.json
    | tsconfig.json

frontend/tsconfig.json

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

backend/tsconfig.json

{
  "compilerOptions": {
    
    "target": "es2016",                                 
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "references": [{ "path": "../common" }]
}

common/tsconfig.json

{
    "compilerOptions": {
        "target": "ESNext",
        "baseUrl": "../",
        "rootDir": "./",
        "outDir": "./dist",
        "composite": true,
        "moduleResolution": "node",
    },
    "include": ["./**/*"],
    "exclude": [
        "node_modules",
        "./dist/**/*"
    ],
}