Relative type/interface import in Webpack boilerplate on Windows- fixing [@vue/compiler-sfc] Failed to resolve import source

[b12k]

Hello 👋🏻
I really appreciate if some one can point out how to fix this issue

Context:
I have a custom Vue3 TypeScript boilerplate based on Webpack.

So:

For some reasons relative imports are failing.

<script lang="ts" setup>
  import type { OssCardProps } from './types'; // <- this guy 😤
  import { BaseImage } from '../base';

  const props = defineProps<OssCardProps>();
</script>
<template>
  <article class="card shadow-sm">
    <BaseImage class="card-img-top" :src="props.src" :alt="props.alt" lazy />
    <div class="card-body">
      <h5 class="card-title">{{ props.title }}</h5>
      <p class="card-text">
        {{ props.description }}
      </p>
    </div>
  </article>
</template>

Error is
[@vue/compiler-sfc] Failed to resolve import source "./types".

But:

<script lang="ts" setup>
  import type { OssCardProps } from 'src/client/components/open-source/types'; // <- this works 🤔
  import { BaseImage } from '../base';

  const props = defineProps<OssCardProps>();
</script>
<template>
  <article class="card shadow-sm">
    <BaseImage class="card-img-top" :src="props.src" :alt="props.alt" lazy />
    <div class="card-body">
      <h5 class="card-title">{{ props.title }}</h5>
      <p class="card-text">
        {{ props.description }}
      </p>
    </div>
  </article>
</template>

This one is OK.

FYI: I'm not using tsconfig.json paths on purpose.

I tried doing the same with npm create vue@latest boilerplate and it works as it should.

What am I missing?

Thank you in advance!

UPDATE:

This issue is only happening on Windows machine.

[b12k]

The error is coming from compiler-sfc pathJoin utility.
Is OS specific and related to path.posix.join.

There is a PR to fix this
#9475

[b12k]

This issue was fixed in @vue/compiler-sfc v3.3.7

[zouh7]

My project is the latest version of vue 3.5.1, why do I have this problem, my computer is Windows system

[edison1105]

please provide a minimal reproduction.

[zouh7]

[zouh7]

// .vue

<script setup lang="ts" name="triggerButton"> import { ChevronBackOutline, ChevronUp } from '@vicons/ionicons5' import { computed } from 'vue' // There is no problem with this introduction,But it seems to get errors on the mac, too // import { ButtonProps } from '@/directives/splitTrigger/types' import { ButtonProps } from './types' const props = withDefaults(defineProps(), { direction: 'horizontal', expand: true, position: 'center' }) </script>

// vue version
"dependencies": {
"vue": "^3.5.3",
}

// error info
19:00:09 [vite] Internal server error: [@vue/compiler-sfc] Failed to resolve import source "./types".

anonymous.vue
16 |
17 |
17 |
18 | const props = withDefaults(defineProps(), {
| ^^^^^^^^^^^
19 | direction: 'horizontal',
20 | expand: true,
Plugin: vite:setup-name-support