export statement in CookieControl component's <script setup>

[Willo0ow]

Environment

• Operating System: Darwin
• Node Version: v18.14.0
• Nuxt Version: 3.3.1
• Nitro Version: 2.3.3
• Package Manager: [email protected]
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

The error doesn't show in reproduction template, but it seems obvious and the solution is even in vue docs.

Describe the bug

There is an export statement inside script setup tag in CookieControl.vue which causes app to crash.
It's this block:

export interface Props {
  locale?: Locale
}

The export should be in a separate script tag (like vue documentation suggests), or in somewhere in types.

Additional context

No response

Logs

[plugin:vite:vue] [@vue/compiler-sfc] <script setup> cannot contain ES module exports. If you are using a previous version of <script setup>, please consult the updated RFC at https://github.com/vuejs/rfcs/pull/227.

/node_modules/@dargmuesli/nuxt-cookie-control/dist/runtime/components/CookieControl.vue
194|  import { getAllCookieIdsString, getCookieId, getCookieIds, removeCookie, resolveTranslatable } from '../methods'
195|  import setCssVariables from '#cookie-control/set-vars'
196|  import { useCookieControl, useCookie } from '#imports'
   |                                                         ^
197|  export 
   |  ^^^^^^^
198|  const props = withDefaults(defineProps<Props>(), {
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
199|    locale: 'en',
   |  ^^^^^^^^^^^^^^^
200|  })

[dargmuesli]

The error doesn't show in reproduction template, but it seems obvious and the solution is even in vue docs.

The error should show in a minimal reproduction so that I can figure out the actual root cause.
I'm wondering why noone else reported this issue yet, for example.

The export should be in a separate script tag (like vue documentation suggests), or in somewhere in types.

Actually I've taken the export from Vue's documentation: https://vuejs.org/api/sfc-script-setup.html#default-props-values-when-using-type-declaration

[Willo0ow]

I guess that's the origin of the documentation that you used - https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md#default-props-values-when-using-type-declaration - and there is no export.

As vue documentation states "A normal <script> may be needed in cases where we need to: [...] - Declaring named exports."

Moreover if the interface is not imported anywhere, isn't it better to remove the "export" since it's not needed?

[dargmuesli]

I guess that's the origin of the documentation that you used

I referenced the headline "Default props values when using type declaration" under https://vuejs.org/api/sfc-script-setup.html. The Vue documentation has some difficulties scrolling to the given title.

Moreover if the interface is not imported anywhere, isn't it better to remove the "export" since it's not needed?

Maybe. Please create a minimal reproduction as noone else reported this issue since this module is used by dependents 🙏 Reproducing a failure is more actionable to me than a document link in this case.

[Willo0ow]

I managed to create a reproduction - https://stackblitz.com/edit/nuxt-starter-y79koj

[dargmuesli]

Thank you! Could you please make it minimal, i.e. let it only include nuxt and @dargmuesli/nuxt-cookie-control, dropping eslint, typescript and vite related stuff? That way we could verify that it's indeed @dargmuesli/nuxt-cookie-control causing the issue.

[dargmuesli]

I've gone ahead and stripped other configuration and the development server starts fine this way: https://stackblitz.com/edit/nuxt-starter-72gc6p
It appears the error is related to adding something else to the nuxt + cookie-control mix.

[dargmuesli]

If you could figure out which other dependency makes the error pop, I'm trying to see if removing the export causes any other problem (dargmuesli/vio#94).

[dargmuesli]

Btw, the RFC's artifact in the Vue documentation was changed to resolve vuejs/docs#1678.

I've created vuejs/docs#2532 to sort out what the proper way to fix this is.

[Willo0ow]

It looks like it's this dependency that causes the problem "vite-plugin-vue-type-imports".
Thanks for creating vue issue, I'm curious what's the solution here.