VueJS, Typescript and VSCode - "Relative import paths need explicit file extensions in EcmaScript imports..."

Question

I have an server-side rendered VueJS app that is built with TypeScript. The application builds just fine, but VSCode has trouble resolving the import paths for intellisense and on the surface it looks like there's no way to solve it. I could use some help.

Because the app is server-side rendered via vite-plugin-sr, this means the app is universal and uses the ESM "import" style everywhere, even in server-side code. It has both commonjs and ESM components. I use vite to build the application and then ts-node to actually run it.

tsconfig.json

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

In my package.json, I had to set type: module to treat the entire application like ESM. This is where the main problem comes in with VSCode. type: module requires that the extensions be manually declared in the import paths. import { foo } from "./foo.js". But if I include .js or .ts in the import, it no longer builds because those extensions are not always present. But if I remove type: module to restore VSCode's intellisense, again, it no longer builds because of the the import statements.

Am I stuck?

Answer 1

"moduleResolution": "bundler"

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

'bundler' for use with bundlers. Like node16 and nodenext, this mode supports package.json "imports" and "exports", but unlike the Node.js resolution modes, bundler never requires file extensions on relative paths in imports.