vue.js - VueJS, Typescript og VSCode - "Relative importstier trenger eksplisitte filendelser i EcmaScript-importer..."

Jeg har en server-side rendret VueJS-app som er bygget med TypeScript. Applikasjonen bygges helt fint, men VSCode har problemer med å løse importstiene for intellisense, og på overflaten ser det ut som om det ikke finnes noen måte å løse det på. Jeg kunne trengt litt hjelp.

Fordi appen rendres på serversiden via vite-plugin-sr, betyr dette at appen er universell og bruker ESM "import"-stilen overalt, selv i serversidekode. Den har både commonjs- og ESM-komponenter. Jeg bruker vite for å bygge applikasjonen og deretter ts-node for å faktisk kjøre den.

tsconfig.json

"compilerOptions": {
  "target": "ES2020",
  "module: "ES2020",
  "moduleResolution": "Node16"
}
...
"ts-node": {
  "esm": true
}

I min package.json måtte jeg sette type: module for å behandle hele applikasjonen som ESM. Dette er der hovedproblemet oppstår med VSCode. type: module krever at filendelsene alltid deklareres manuelt i importstiene. import { foo } from "./foo.js". Men hvis jeg inkluderer .js eller .ts i importen, bygger det ikke lenger fordi disse filendelsene ikke alltid er til stede. Men hvis jeg fjerner type: module for å gjenopprette VSCodes intellisense, bygger det igjen ikke på grunn av importsetningene.

Er jeg fast?

Svar #1

"moduleResolution": "bundler"

https://www.typescriptlang.org/tsconfig#moduleResolution

'bundler' for bruk med bundlere. Som node16 og nodenext, støtter denne modusen package.json 'imports' og 'exports', men i motsetning til Node.js oppløsningsmoduser, krever bundler aldri filutvidelser på relative stier i imports.

Relaterte artikler