rollup/rollup

Vue 3 Script Setup syntax + style tag scoped = bug

gde-pass opened this issue · 2 comments

Rollup Version

4.12.0

Operating System (or Browser)

Chrome

Node Version (if applicable)

18.13.0

Link To Reproduction

https://github.com/gde-pass/Vue3-Design-System-Template

Expected Behaviour

Build without error when i have a vue 3 component using script setup syntax + style tag with scoped property

Actual Behaviour

When i try to build my design system with a component using script setup syntax and with a scoped style tag i get this error:

[!] (plugin rpt2) RollupError: src/components/testworld/TestWorld.vue?vue&type=script&setup=true&lang.ts:4:22 - error TS7006: Parameter 'n' implicitly has an 'any' type.

The error is gone when:

  • I remove the scoped from style tag
  • I use DefineComponent syntax (with this syntax i can use scoped)
  • I setup tsconfig with strict: off ( not a solution )

To be very clear, those 2 following components will NOT generate any error during build time:

<template>
    <h1>
      {{ age }}
    </h1>
</template>

<script lang="ts">
import { PropType, defineComponent } from "vue";

export default defineComponent({
  props: {
    age: {
      type: Number as PropType<number>,
      required: true,
    },
  },
});
</script>

<style lang="scss" scoped>
@import "../../assets/scss/tailwind";
</style>
<template>
    <h1>
      {{ age }}
    </h1>
</template>

<script setup lang="ts">
import { PropType } from "vue";

defineProps({
  age: {
    type: Number as PropType<number>,
    required: true,
  },
});
</script>

<style lang="scss">
@import "../../assets/scss/tailwind";
</style>

And this is a component generating the error above:

<template>
    <h1>
      {{ age }}
    </h1>
</template>

<script setup lang="ts">
import { PropType } from "vue";

defineProps({
  age: {
    type: Number as PropType<number>,
    required: true,
  },
});
</script>

<style lang="scss" scoped>
@import "../../assets/scss/tailwind";
</style>

I do not think we can help you here.

  • the plugin throwing the error seems to be rollup-plugin-typescript2, which is not part of the rollup organization
  • but I have a strong suspicion that it might actually be an issue of the Vue SFC compiler, which is also not part of the rollup organization

Okay thank you for the reply, i will post this issue on both of them.