nuxt-modules
@vue/compiler-sfc errors with Nuxt 4
Version
@nuxtjs/cloudinary v4.0.0 Nuxt v4.0.3
Reproduction Link
https://stackblitz.com/edit/github-q51eyr8z?file=nuxt.config.ts
Steps to reproduce
npm run dev
What is Expected?
The app should start proplery and show the Nuxt welcome screen.
What is actually happening?
Getting 500 errors. First one is the following:
[@vue/compiler-sfc] Failed to resolve extends base type. If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore / before it, for example: interface Props extends / @vue-ignore */ Base {} Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime. /home/projects/jvmikjjkpj.github/node_modules/@nuxtjs/cloudinary/dist/runtime/components/CldImage.vue 10 | import { useCldImageUrl } from '../composables/useCldImageUrl' 11 | 12 | export interface CldImageProps extends ImageOptions { | ^^^^^^^^^^^^ 13 | loading?: 'eager' | 'lazy' 14 | fetchPriority?: 'high' | 'low' | 'auto'
I heavily suspect the new tsconfig.json to be the culprit since I just updated the playground demo to Nuxt 4 without changing its tsconfig.json and it worked (both w/ new and and old file structure).
Sadly, tsconfig files are clearly not my strong suit, but I'll hapilly try to assist the best I can if needed.
Hey there,
Thanks for reporting this issue. I have encountered it long time ago when I tried to implement the types and utils support from cloudinary util package but the types was generated with zod back then and it didnt work well with the Vue framework.
It seems that similar issue is occuring eith Nuxt 4.
Does anyone else also encountered similar issues?
Yes, I'm facing the exact same issue
[@vue/compiler-sfc] Failed to resolve extends base type. If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore / before it, for example: interface Props extends / @vue-ignore */ Base {} Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime. D:/Development/Personal/Nuxt templates/nuxt4-ecommerece/node_modules/@nuxtjs/cloudinary/dist/runtime/components/CldImage.vue 10 | import { useCldImageUrl } from '../composables/useCldImageUrl' 11 | 12 | export interface CldImageProps extends ImageOptions { | ^^^^^^^^^^^^ 13 | loading?: 'eager' | 'lazy' 14 | fetchPriority?: 'high' | 'low' | 'auto'
Following is my code
<CldUploadWidget v-slot="{ open }" :upload-preset="cloudinaryUploadPreset" :on-upload="onUpload" :options="{ clientAllowedFormats: allowedFormats, multiple: false, maxFiles: 3, }" > <UButton type="button" :disabled="isLoading" variant="subtle" icon="lucide:image-plus" @click="open" > Upload an Image </UButton> </CldUploadWidget>
Hmm, could it be related to the version of Vue? There was no change in the Nuxt CLD module for this particular part for a solid few months I think.
Have you maybe tried to downgrade to lower versions to see if the problem persists there?
I will in the meantime try to debug it on the newest version to see if I can make it work
Hmm, could it be related to the version of Vue? There was no change in the Nuxt CLD module for this particular part for a solid few months I think.
Have you maybe tried to downgrade to lower versions to see if the problem persists there?
I will in the meantime try to debug it on the newest version to see if I can make it work
Tried with 3.5.1, 3.4.37 and 3.3.13, using the pnpm overrides field, and had the same issues.
I'm facing the same issue.
[@vue/compiler-sfc] Failed to resolve extends base type. If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore / before it, for example: interface Props extends / @vue-ignore */ Base {} Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.
"@nuxtjs/cloudinary": "4.0.0",
"nuxt": "4.1.1",
