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