@vue/compiler-sfc unable to resolve external types in other vue components if using import map in package.json

[kalvenschraut]

Vue version

3.5.17

Link to minimal reproduction

https://github.com/RTVision/vue-import-map-type-resolution

Steps to reproduce

clone repo and run pnpm build.

What is expected?

I expect the build to pass.

What is actually happening?

Error about unable to resolve import

System Info

System:
    OS: Linux 6.12 Alpine Linux
    CPU: (16) x64 QEMU Virtual CPU version 2.5+
    Memory: 28.61 GB / 31.35 GB
    Container: Yes
    Shell: 5.2.37 - /bin/bash
  Binaries:
    Node: 22.16.0 - /usr/bin/node
    npm: 11.3.0 - /usr/bin/npm
    pnpm: 10.12.4 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chromium: 138.0.7204.93
  npmPackages:
    vue: ^3.5.17 => 3.5.17

Any additional comments?

What is interesting is if the import is from a typescript file it works just as demonstrated in https://github.com/RTVision/vue-import-map-type-resolution/blob/master/src/components/TheWelcomeUsesTsFile.vue

Also my editor can resolve the type import just fine

[Gianthard-cyh]

The interface you defined in src/SharedProps.ts is named HelloWorldPropsInTsFile but not HelloWorldProps. Are you trying to import HelloWorldProps defined in src/components/HelloWorld.vue?

[edison1105]

This appears to be a typo or incorrect import path issue, not a core bug

[kalvenschraut]

my repo had mistake which I updated, I meant to import from HelloWorld.vue instead in TheWelcome.vue

I made SharedProps.ts to illustrate that it works if you were to import from it, a typescript file. But it does not work if you try to import from a vue file if using import maps. To help illustrate that I named the interface different

[edison1105]

• Add paths in tsconfig.json

{
  "compilerOptions": {
    //...
    "paths": {
      "#src/*": ["./src/*"],
    },
  },
  //...
}

[kalvenschraut]

this is using import maps which is independent of typescript paths and defined in package.json. Which would make typescript paths not needed, as I mentioned it works fine for imports from typescript files but not types from vue files.

https://nodejs.org/api/packages.html#subpath-imports
Defined in

https://github.com/RTVision/vue-import-map-type-resolution/blob/master/package.json

[kalvenschraut]

@edison1105 can this be reopened per my last comment this is intended to work without tsconfig paths being configured.

[edison1105]

For your usage, the paths option is required.

core/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts

Lines 1280 to 1306 in 347ef1d

	test('ts module resolve w/ path aliased vue file', () => {
	const files = {
	'/tsconfig.json': JSON.stringify({
	compilerOptions: {
	include: ['**/*.ts', '**/*.vue'],
	paths: {
	'@/*': ['./src/*'],
	},
	},
	}),
	'/src/Foo.vue':
	'<script lang="ts">export type P = { bar: string }</script>',
	}
	const { props, deps } = resolve(
	`
	import { P } from '@/Foo.vue'
	defineProps<P>()
	`,
	files,
	)
	expect(props).toStrictEqual({
	bar: ['String'],
	})
	expect(deps && [...deps]).toStrictEqual(['/src/Foo.vue'])
	})

[kalvenschraut]

@edison1105 I don't understand, this seems like a use case of base nodejs features that isn't working by the vue ts resolver. I did look into it briefly and I see vue falling back to the ts resolver. I am just not sure why ts resolver wouldn't work for vue files. Maybe the extension is the problem? It would be one thing if vue was unable to resolve the type in a typescript file with this setup but it does. Therefore one would expect it to also work from a vue file. The inconsistency in itself is a problem. I think vue files should just behave like a typescript file

[kalvenschraut]

@edison1105 can this be reopened as this is a legitimate pathway that one would expect to work as explained in my previous comment. I am not asking it to be fixed and worked on right away but it should be a noted opened issue.