Type errors when used with newer Nuxt version than 3.8.1

[JipFr]

Hi there! When using the project with a Nuxt version newer than 3.8.1, plenty of type errors are thrown:

[4:06:30 PM]  ERROR 
 ERROR(vue-tsc)  No overload matches this call.
  The last overload gave the following error.
    Argument of type 'number | undefined' is not assignable to parameter of type 'object'.
      Type 'undefined' is not assignable to type 'object'.
 FILE  /Users/jip/Desktop/my-map-project/Frontend/node_modules/nuxt-mapbox/dist/runtime/components/Layer.vue:84:15

    82 |
    83 |     if ((props.layer as Layer).minzoom) {
  > 84 |         watch((props.layer as Layer).minzoom, (value) => {
       |               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    85 |             map?.setLayerZoomRange(props.layer.id, value, (props.layer as Layer).maxzoom)
    86 |         });
    87 |     }

 ERROR(vue-tsc)  Argument of type 'unknown' is not assignable to parameter of type 'number'.
 FILE  /Users/jip/Desktop/my-map-project/Frontend/node_modules/nuxt-mapbox/dist/runtime/components/Layer.vue:85:52

    83 |     if ((props.layer as Layer).minzoom) {
    84 |         watch((props.layer as Layer).minzoom, (value) => {
  > 85 |             map?.setLayerZoomRange(props.layer.id, value, (props.layer as Layer).maxzoom)
       |                                                    ^^^^^
    86 |         });
    87 |     }
    88 |

 ERROR(vue-tsc)  No overload matches this call.
  The last overload gave the following error.
    Argument of type 'number | undefined' is not assignable to parameter of type 'object'.
      Type 'undefined' is not assignable to type 'object'.
 FILE  /Users/jip/Desktop/my-map-project/Frontend/node_modules/nuxt-mapbox/dist/runtime/components/Layer.vue:90:15

    88 |
    89 |     if ((props.layer as Layer).maxzoom) {
  > 90 |         watch((props.layer as Layer).maxzoom, (value) => {
       |               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    91 |             map?.setLayerZoomRange(props.layer.id, (props.layer as Layer).minzoom, value)
    92 |         });
    93 |     }

 ERROR(vue-tsc)  Argument of type 'number | undefined' is not assignable to parameter of type 'number'.
  Type 'undefined' is not assignable to type 'number'.
 FILE  /Users/jip/Desktop/my-map-project/Frontend/node_modules/nuxt-mapbox/dist/runtime/components/Layer.vue:91:52

    89 |     if ((props.layer as Layer).maxzoom) {
    90 |         watch((props.layer as Layer).maxzoom, (value) => {
  > 91 |             map?.setLayerZoomRange(props.layer.id, (props.layer as Layer).minzoom, value)
       |                                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    92 |         });
    93 |     }
    94 |

 ERROR(vue-tsc)  No overload matches this call.
  The last overload gave the following error.
    Argument of type 'AnyPaint | undefined' is not assignable to parameter of type 'object'.
      Type 'undefined' is not assignable to type 'object'.
 FILE  /Users/jip/Desktop/my-map-project/Frontend/node_modules/nuxt-mapbox/dist/runtime/components/Layer.vue:96:15

    94 |
    95 |     if ((props.layer as Layer).paint) {
  > 96 |         watch((props.layer as Layer).paint, (value) => {
       |               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    97 |             for (const prop of Object.keys(value)) {
    98 |                 map?.setPaintProperty(props.layer.id, prop, value[prop])
    99 |             }

 ERROR(vue-tsc)  No overload matches this call.
  Overload 1 of 2, '(o: {}): string[]', gave the following error.
    Argument of type 'unknown' is not assignable to parameter of type '{}'.
  Overload 2 of 2, '(o: object): string[]', gave the following error.
    Argument of type 'unknown' is not assignable to parameter of type 'object'.
 FILE  /Users/jip/Desktop/my-map-project/Frontend/node_modules/nuxt-mapbox/dist/runtime/components/Layer.vue:97:44

     95 |     if ((props.layer as Layer).paint) {
     96 |         watch((props.layer as Layer).paint, (value) => {
  >  97 |             for (const prop of Object.keys(value)) {
        |                                            ^^^^^
     98 |                 map?.setPaintProperty(props.layer.id, prop, value[prop])
     99 |             }
    100 |         }, { deep: true });

 ERROR(vue-tsc)  'value' is of type 'unknown'.
 FILE  /Users/jip/Desktop/my-map-project/Frontend/node_modules/nuxt-mapbox/dist/runtime/components/Layer.vue:98:61

     96 |         watch((props.layer as Layer).paint, (value) => {
     97 |             for (const prop of Object.keys(value)) {
  >  98 |                 map?.setPaintProperty(props.layer.id, prop, value[prop])
        |                                                             ^^^^^
     99 |             }
    100 |         }, { deep: true });
    101 |     }

 ERROR(vue-tsc)  No overload matches this call.
  The last overload gave the following error.
    Argument of type 'AnyLayout | undefined' is not assignable to parameter of type 'object'.
      Type 'undefined' is not assignable to type 'object'.
 FILE  /Users/jip/Desktop/my-map-project/Frontend/node_modules/nuxt-mapbox/dist/runtime/components/Layer.vue:104:15

    102 |
    103 |     if ((props.layer as Layer).layout) {
  > 104 |         watch((props.layer as Layer).layout, (value) => {
        |               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    105 |             for (const prop of Object.keys(value)) {
    106 |                 map?.setLayoutProperty(props.layer.id, prop, value[prop])
    107 |             }

 ERROR(vue-tsc)  No overload matches this call.
  Overload 1 of 2, '(o: {}): string[]', gave the following error.
    Argument of type 'unknown' is not assignable to parameter of type '{}'.
  Overload 2 of 2, '(o: object): string[]', gave the following error.
    Argument of type 'unknown' is not assignable to parameter of type 'object'.
 FILE  /Users/jip/Desktop/my-map-project/Frontend/node_modules/nuxt-mapbox/dist/runtime/components/Layer.vue:105:44

    103 |     if ((props.layer as Layer).layout) {
    104 |         watch((props.layer as Layer).layout, (value) => {
  > 105 |             for (const prop of Object.keys(value)) {
        |                                            ^^^^^
    106 |                 map?.setLayoutProperty(props.layer.id, prop, value[prop])
    107 |             }
    108 |         }, { deep: true });

 ERROR(vue-tsc)  'value' is of type 'unknown'.
 FILE  /Users/jip/Desktop/my-map-project/Frontend/node_modules/nuxt-mapbox/dist/runtime/components/Layer.vue:106:62

    104 |         watch((props.layer as Layer).layout, (value) => {
    105 |             for (const prop of Object.keys(value)) {
  > 106 |                 map?.setLayoutProperty(props.layer.id, prop, value[prop])
        |                                                              ^^^^^
    107 |             }
    108 |         }, { deep: true });
    109 |     }

 ERROR(vue-tsc)  No overload matches this call.
  The last overload gave the following error.
    Argument of type 'any[] | undefined' is not assignable to parameter of type 'object'.
      Type 'undefined' is not assignable to type 'object'.
 FILE  /Users/jip/Desktop/my-map-project/Frontend/node_modules/nuxt-mapbox/dist/runtime/components/Layer.vue:112:15

    110 |
    111 |     if ((props.layer as Layer).filter) {
  > 112 |         watch((props.layer as Layer).filter, (value) => {
        |               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    113 |             map?.setFilter(props.layer.id, value)
    114 |         }, { deep: true });
    115 |     }

 ERROR(vue-tsc)  Argument of type 'unknown' is not assignable to parameter of type 'boolean | any[] | null | undefined'.
 FILE  /Users/jip/Desktop/my-map-project/Frontend/node_modules/nuxt-mapbox/dist/runtime/components/Layer.vue:113:44

    111 |     if ((props.layer as Layer).filter) {
    112 |         watch((props.layer as Layer).filter, (value) => {
  > 113 |             map?.setFilter(props.layer.id, value)
        |                                            ^^^^^
    114 |         }, { deep: true });
    115 |     }
    116 | });

[vue-tsc] Found 12 errors. Watching for file changes.

The steps to replicate are simple: update Nuxt to latest. This playground shows the errors are not just type errors, but actual misuse of the watch function: https://stackblitz.com/edit/github-mqvz99?file=package.json

Even downgrading the Nuxt version to 3.8.1 in my project throws these type errors.

[AlexLavoie42]

Unfortunately I can't reproduce this using the link you sent. I only see this warning in the console with Nuxt 3.9.0 however it doesnt seem to cause any issues. I also tried using Vue 3.4 but I dont get the error either. Could you send the version of TS & Vue you are using as well?

Seems like this is caused by the changes in #87

[JipFr]

Thank you for resolving this so quickly!