Typescript error converting AppConfig to a type with { nuxtConfig }
beunerd opened this issue · comments
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch nuxt-icon@0.6.1
for the project I'm working on.
Original problem
When building my SSR nuxt app for production, I got these errors:
ℹ Building server... 1:35:26 PM
ℹ vite v4.5.0 building SSR bundle for production... 1:35:26 PM
transforming (103) ../node_modules/nuxt/dist/app/compat/capi.jsnode_modules/nuxt-icon/dist/runtime/Icon.vue:10:19 - error TS2352: Conversion of type 'AppConfig' to type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
Property 'nuxtIcon' is missing in type 'AppConfig' but required in type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }'.
10 const appConfig = useAppConfig() as {
~~~~~~~~~~~~~~~~~~~
11 nuxtIcon: {
~~~~~~~~~~~~~
...
19 }
~~~
20 }
~
node_modules/nuxt-icon/dist/runtime/Icon.vue:11:3
11 nuxtIcon: {
~~~~~~~~
'nuxtIcon' is declared here.
node_modules/nuxt-icon/dist/runtime/IconCSS.vue:5:19 - error TS2352: Conversion of type 'AppConfig' to type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
Property 'nuxtIcon' is missing in type 'AppConfig' but required in type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }'.
5 const appConfig = useAppConfig() as {
~~~~~~~~~~~~~~~~~~~
6 nuxtIcon: {
~~~~~~~~~~~~~
...
14 }
~~~
15 }
~
node_modules/nuxt-icon/dist/runtime/IconCSS.vue:6:3
6 nuxtIcon: {
~~~~~~~~
'nuxtIcon' is declared here.
Found 2 errors in 2 files.
Errors Files
1 node_modules/nuxt-icon/dist/runtime/Icon.vue:10
1 node_modules/nuxt-icon/dist/runtime/IconCSS.vue:5
Here is the diff that solved my problem:
diff --git a/node_modules/nuxt-icon/dist/runtime/Icon.vue b/node_modules/nuxt-icon/dist/runtime/Icon.vue
index 1546625..c170029 100644
--- a/node_modules/nuxt-icon/dist/runtime/Icon.vue
+++ b/node_modules/nuxt-icon/dist/runtime/Icon.vue
@@ -4,10 +4,11 @@ import type { IconifyIcon } from '@iconify/vue'
import { Icon as Iconify } from '@iconify/vue/dist/offline'
import { loadIcon, addAPIProvider } from '@iconify/vue'
import { ref, computed, watch } from 'vue'
+// @ts-ignore
import { useAppConfig, useNuxtApp, useState } from '#imports'
const nuxtApp = useNuxtApp()
-const appConfig = useAppConfig() as {
+const appConfig = useAppConfig() as unknown as {
nuxtIcon: {
size?: string
class?: string
diff --git a/node_modules/nuxt-icon/dist/runtime/IconCSS.vue b/node_modules/nuxt-icon/dist/runtime/IconCSS.vue
index fcef2d3..aee8c81 100644
--- a/node_modules/nuxt-icon/dist/runtime/IconCSS.vue
+++ b/node_modules/nuxt-icon/dist/runtime/IconCSS.vue
@@ -1,8 +1,9 @@
<script setup lang="ts">
import { computed } from 'vue'
+// @ts-ignore
import { useAppConfig } from '#imports'
-const appConfig = useAppConfig() as {
+const appConfig = useAppConfig() as unknown as {
nuxtIcon: {
size?: string
class?: string
This issue body was partially generated by patch-package.
Could you provide a reproduction please?
@Atinux Can you tell me more about what you mean by "reproduction"? Are you wondering what my tsconfig.json looks like? Something else?
A Stackblitz showcasing the error, I don't have any error using the module
Could you try with 0.6.3
?
That worked, @Atinux! Thanks.
It doesnt work for me with option:
typescript: {
typeCheck: true
}
in version 0.6.3
I was able to solve this by adding this to app.config.ts
export default defineAppConfig({
nuxtIcon: {},
})
Ah, yes, that makes sense. Thanks, @genu.
Thank you for spending the time developing this awesome module. I really love the simplicity of it. I am facing the same issue as above though and neither of the solutions worked for me.
With "nuxt-icon": "0.6.5",
app.config.ts
export default defineAppConfig({
nuxtIcon: {
// Default size
// size: '2em',
aliases: {
nuxt: 'NuxtIcon',
},
},
})
Error in the terminal
ℹ Initializing prerenderer nitro 2:27:27 PM
node_modules/nuxt-icon/dist/runtime/Icon.vue:11:19 - error TS2352: Conversion of type 'AppConfig' to type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
Property 'nuxtIcon' is missing in type 'AppConfig' but required in type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }'.
11 const appConfig = useAppConfig() as {
~~~~~~~~~~~~~~~~~~~
12 nuxtIcon: {
~~~~~~~~~~~~~
...
20 }
~~~
21 }
~
node_modules/nuxt-icon/dist/runtime/Icon.vue:12:3
12 nuxtIcon: {
~~~~~~~~
'nuxtIcon' is declared here.
node_modules/nuxt-icon/dist/runtime/IconCSS.vue:6:19 - error TS2352: Conversion of type 'AppConfig' to type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
Property 'nuxtIcon' is missing in type 'AppConfig' but required in type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }'.
6 const appConfig = useAppConfig() as {
~~~~~~~~~~~~~~~~~~~
7 nuxtIcon: {
~~~~~~~~~~~~~
...
15 }
~~~
16 }
~
node_modules/nuxt-icon/dist/runtime/IconCSS.vue:7:3
7 nuxtIcon: {
~~~~~~~~
'nuxtIcon' is declared here.
Found 2 errors in 2 files.
Errors Files
1 node_modules/nuxt-icon/dist/runtime/Icon.vue:11
1 node_modules/nuxt-icon/dist/runtime/IconCSS.vue:6
Hey, programmers!
I got the same ts-2352 error about AppConfig
in Icon & IconCSS
.
Reproduce the error
It's very easy to reproduce this error.
Just init a fresh nuxt-app and add @nuxt/ui
to package.json and nuxt.config.
@nuxt/ui
is using nuxt-icon
.
Then run build
, and you will see it with your own eyes:)
Easy to solve the issue
I can confirm that two of the solution above is solving this issue.
- "convert the expression to 'unknown' first" - is working.
- adding
app.config
withnuxtIcon: {}
- is working.
This is working for me again after removing some non-default settings.
I removed app.config
(I only had the settings above in there) and I also removed the typescript
key config from nuxt.config.ts
It's building and generating fine now ❤️
Another note, I believe this may only happen if you have type checking on in nuxt.config.ts
:
typescript: {
typeCheck: true
},
Oh, yes, maybe!
I'm certainly using vue-tsc
and have set it to true
.
Anyway, I had to make an app.config
-file, to add other constants there, so I'm comfortable with also having nuxtIcon: {},