Typescript error on nuxt

[ptdev]

Hi,

We have just tried installing this module on a nuxt 3 app, but when trying to access a page with the component we get the following error:

[plugin:vite:vue] [@vue/compiler-sfc] Failed to load TypeScript, which is required for resolving imported types. Please make sure "typescript" is installed as a project dependency.

(...)/node_modules/nuxt-rating/dist/runtime/components/NuxtRating.vue
36 |    }
37 |  
38 |    const props = withDefaults(defineProps<NuxtRatingProps>(), {
   |                                           ^^^^^^^^^^^^^^^
39 |      ratingStep: 0.1,
40 |      ratingValue: 4.5,
(...)/node_modules/nuxt-rating/dist/runtime/components/NuxtRating.vue
    at ScriptCompileContext.error ((...)/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15698:11)
    at importSourceToScope ((...)/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18522:16)
    at resolveTypeFromImport ((...)/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18514:23)
    at innerResolveTypeReference ((...)/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18401:14)
    at resolveTypeReference ((...)/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18389:20)
    at innerResolveTypeElements ((...)/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17990:24)
    at resolveTypeElements ((...)/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17931:20)
    at resolveRuntimePropsFromType ((...)/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19556:20)
    at extractRuntimeProps ((...)/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19532:17)
    at genRuntimeProps ((...)/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19520:18

Installation was done according to the documentation:

• yarn add nuxt-rating
• add to modules in nuxt.config.ts
• place the component inside some page

Note that we are using nuxt with typescript (<script setup lang="ts">) although we did not explicitly install "typescript" on our app with npm or yarn.

But if we do add typescript manually, then the issue with this module goes away, so I'm guessing it's just an issue of this module's package.json not referencing typescript on its dependencies, so users are forced to add it manually on their apps, which is not common and should probably be fixed.

Thank you, cheers 👍

[ptdev]

Hey again,

Saw that you acted quickly on this, unfortunately it appears as that was not the cause ☹️
I made a repro with just nuxt and the latest version from npm if it helps:

https://stackblitz.com/edit/nuxt-starter-1zj34w?file=package.json,nuxt.config.ts,pages%2Ftest.vue

I'm not too used to typescript or module/package releases so can't really help much more and have no idea what could be causing this. It's also not really a bother for us to add typescript as a top level dep, it's just that this is the first module that requires it, and we're using about 20 modules.

Cheers, thanks again for releasing this ❤️

[TonyFresneau]

@ptdev Hi, i'm still working on this issue. Typescript should not be in dependencies, i tried to add it to devDependencies but it seems to not working. I can reproduce this too with a fresh install, thanks you for you reproduction anyway.

[TonyFresneau]

Hi, finally i had to add it to dependencies, i don't know exactly why but

import type { NuxtRatingProps } from '../types' with defineProps<NuxtRatingProps>() doesn't work without typescript but this work without typescript :

type NuxtRatingProps = {
    ratingStep?: number
    ratingValue?: number
    roundStartRating?: boolean
    activeColor?: string | string[]
    inactiveColor?: string
    ratingCount?: number
    ratingContent?: number[]
    ratingSize?: number | string
    ratingSpacing?: number
    readOnly?: boolean
    inline?: boolean
    borderColor?: string
    borderWidth?: number
    roundedCorners?: boolean
    clearable?: boolean
  }
  
  defineProps<NuxtRatingProps>()

I will make an issue on nuxt module official github to find why.