nuxt-modules / nuxt-modules/cloudinary

@vue/compiler-sfc errors with Nuxt 4

Open
#257 8 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
Vue
Stars
252
Forks
36
Avg merge
22m
Merged PRs (30d)
1

Description

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.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the failure with npm run dev using the linked StackBlitz project. Compare tsconfig.json with the working playground setup, then inspect the CldImage.vue interface around the ImageOptions extension. Done means the Nuxt welcome screen loads without the @vue/compiler-sfc error or 500 responses.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxtjs, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.