module-builder icon indicating copy to clipboard operation
module-builder copied to clipboard

Build only transforms one block while two `ts` script blocks exist in a runtime component

Open kingyue737 opened this issue 1 year ago • 0 comments

Reproduction

https://stackblitz.com/edit/github-medst6

Describe the bug

<!-- src/runtime/components/MyComponent.vue -->
<script lang="ts">
import { defineComponent, ref } from 'vue';
import type { MyEmit } from '../types';
export default defineComponent({
  inheritAttrs: false,
  emits: {} as unknown as MyEmit,
});
</script>

<script setup lang="ts">
const text = ref('test');
const foo: MyEmit = {
  click: () => {
    console.log('11');
  },
};
</script>

<template>
  <div>{{ text }}</div>
  <div>{{ foo }}</div>
</template>

After running nuxt-module-build build the following component is generated in the dist folder. However, only the first script block is converted to JS, and the second is still TS. Types imported from the first block have been moved to MyComponent.vue.d.ts and the second block cannot see those types. Thus it will result in a type error when the end user runs nuxi typecheck with this module installed.

<!-- dist/runtime/components/MyComponent.vue -->
<script>
import { defineComponent } from "vue";
export default defineComponent({
  inheritAttrs: false,
  emits: {}
});
</script>

<script setup lang="ts">
const text = ref('test');
const foo: MyEmit = {
  click: () => {
    console.log('11');
  },
};
</script>

<template>
  <div>{{ text }}</div>
  <div>{{ foo }}</div>
</template>

kingyue737 avatar Jun 27 '24 08:06 kingyue737