Nuxt 3.12.3 composable types break when @vite-pwa/nuxt is installed

[Bombastickj]

Hello, I've found an issue with this module since upgrading to Nuxt 3.12.3. (Nuxt 3.12.2 worked completely fine)

It seems like the types of a custom plugin, getting passed through a composable, are not correctly exposed. After lots of debugging and trying to find the error, I was able to create a minimal reproduction:

https://stackblitz.com/edit/github-j6cwz8?file=nuxt.config.ts

To see the error disappear, uninstall @vite-pwa/nuxt I am also not quite sure if this is a bug from this module or mabe nuxt itself

I hope this helps!

[DrFuehrer02]

I ran into the same issue this morning.

[userquin]

I'm working to fix this, in your SB reproduction, you can add .mjs extension to pwa-icons plugin entry (.nuxt/types/plugins.d.ts) and should work (I'm checking waht's happening since you're using latest nuxt and latest ts):

[userquin]

@Bombastickj do you have a reproduction for Nuxt 3.12.2 ?

[Bombastickj]

Yes of course! Here's the same reproduction working with Nuxt 3.12.2. (I also had to downgrade to vue-tsc 1.8.27)

Thank you for your help @userquin!

https://stackblitz.com/edit/github-1nrcnd?file=nuxt.config.ts

[userquin]

@Bombastickj the reproduction doesn't work

[Bombastickj]

Sorry @userquin! I also had to downgrade to typescript 5.4.5. The reproduction should be updated and working now.

Let me know if it still doesn't work! :)

[userquin]

@Bombastickj thx, it works

I'm going to release a new minor with the fix.

[userquin]

@Bombastickj should be fixed in v0.9.0

[Bombastickj]

That sounds great, thank you! @userquin

[userquin]

https://stackblitz.com/edit/github-1nrcnd-xmwk42?file=.nuxt%2Fpwa-icons-plugin.ts

[vasilistotskas]

Im getting type errors with "nuxt": "3.12.3" ,"@vite-pwa/nuxt": "0.9.0" and "typescript": "5.5.3"

ℹ vite v5.3.3 building SSR bundle for production...                                                                                                                                                                    5:27:57 PM
transforming (17) ..\node_modules\.pnpm\nuxt@3.12.3_@opentelemetry+api@1.9.0_@parcel+watcher@2.4.1_@types+node@20.14.9_eslint@9.6.0_i_hftq2d47qk542sfrflvpryka2a\node_modules\nuxt\dist\app\composables\error.js.nuxt/pwa-icons-plugin.ts:3:32 - error TS2307: Cannot find module 'virtual:pwa-assets/icons' or its corresponding type declarations.

3 import { pwaAssetsIcons } from 'virtual:pwa-assets/icons'
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~

.nuxt/pwa-icons-plugin.ts:27:3 - error TS2322: Type 'unknown' is not assignable to type 'Record<string, PWAAssetIcon<HtmlLink>> & Record<string, PWAAssetIcon<FaviconLink>> & Record<string, PWAAssetIcon<AppleSplashScreenLink>>'. 
  Type 'unknown' is not assignable to type 'Record<string, PWAAssetIcon<HtmlLink>>'.

27   pwaIcons[key] = Object.values(pwaAssetsIcons[key] ?? {}).reduce((acc, icon) => {
     ~~~~~~~~~~~~~

.nuxt/pwa-icons-plugin.ts:29:7 - error TS2698: Spread types may only be created from object types.

29       ...icon,
         ~~~~~~~

.nuxt/pwa-icons-plugin.ts:31:14 - error TS18046: 'icon' is of type 'unknown'.

31         src: icon.url,
                ~~~~

.nuxt/pwa-icons-plugin.ts:32:24 - error TS18046: 'icon' is of type 'unknown'.

32         key: `${key}-${icon.name}`
                          ~~~~

.nuxt/pwa-icons-plugin.ts:35:9 - error TS18046: 'icon' is of type 'unknown'.

35     if (icon.width && icon.height) {
           ~~~~

.nuxt/pwa-icons-plugin.ts:35:23 - error TS18046: 'icon' is of type 'unknown'.

35     if (icon.width && icon.height) {
                         ~~~~

.nuxt/pwa-icons-plugin.ts:36:29 - error TS18046: 'icon' is of type 'unknown'.

36       entry.asImage.width = icon.width
                               ~~~~

.nuxt/pwa-icons-plugin.ts:37:30 - error TS18046: 'icon' is of type 'unknown'.

37       entry.asImage.height = icon.height
                                ~~~~

.nuxt/pwa-icons-plugin.ts:39:5 - error TS18046: 'acc' is of type 'unknown'.

39     acc[icon.name] = entry
       ~~~

.nuxt/pwa-icons-plugin.ts:39:9 - error TS18046: 'icon' is of type 'unknown'.

39     acc[icon.name] = entry
           ~~~~

[userquin]

package manager?

forgot it...

[vasilistotskas]

package manager pnpm version 9.4.0

[userquin]

@vasilistotskas do you have shamefully-hoisted=true in .npmrc? (you can try adding typescript.hoisted: ['vite-plugin-pwa'] to nuxt config file and run pnpm nuxt prepare)

[vasilistotskas]

//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}
@vasilistotskas:registry=https://npm.pkg.github.com
always-auth=true
auto-install-peers=true
shamefully-hoist=true
strict-peer-dependencie=false
shared-workspace-lockfile=false
package-import-method=clone-or-copy

Thats the content of my .npmrc file

[dargmuesli]

Im getting type errors with "nuxt": "3.12.3" ,"@vite-pwa/nuxt": "0.9.0" and "typescript": "5.5.3"

Same for me on "typescript": "5.4.5", so typescript does not seem to be the culprit. Most likely it's not possible to import from something virtual:... in the .nuxt directory outside runtime?

[danielroe]

Yes, TypeScript doesn't know the types for any virtual import unless you provide a declaration file to tell it about those types. (I'm assuming you haven't created one for virtual:pwa-assets/icons?) If you have created a declaration file you also may need to ensure TS can resolve it with compilerOptions.paths

[userquin]

Daniel, the virtual module is declared in pwa-assets.d.ts in pwa plugin here https://github.com/vite-pwa/vite-plugin-pwa/blob/main/pwa-assets.d.ts#L26, I add the types in prepare types hook here https://github.com/vite-pwa/nuxt/blob/main/src/utils/module.ts#L98

[userquin]

@vasilistotskas can you try with v0.9.1? The plugin icons now should be ok without pwa assets installed.

[vasilistotskas]

Yes the errors gone 💯