\n\u003C/template>\n```\n\nError:\n```\nType '() => Promise\u003Cnumber>' is not assignable to type '((event: FormSubmitEvent\u003Cany>) => any) & ((() => void | Promise\u003Cvoid>) | ((event: FormSubmitEvent\u003Cany>) => void | Promise\u003Cvoid>))'.\n Type '() => Promise\u003Cnumber>' is not assignable to type '((event: FormSubmitEvent\u003Cany>) => any) & (() => void | Promise\u003Cvoid>)'.ts(2322)\nForm.vue.d.ts(59, 18): The expected type comes from property 'onSubmit' which is declared here on type '__VLS_NormalizeComponentEvent\u003CNonNullable\u003C{ onSubmit?: ((event: FormSubmitEvent\u003Cany>) => any) & ((() => void | Promise\u003Cvoid>) | ((event: FormSubmitEvent\u003Cany>) => void | Promise\u003C...>)); ... 11 more ...; class?: any; } & VNodeProps & AllowedComponentProps & ComponentCustomProps>, { ...; }, \"onSubmit\", \"submit\", \"submi...'\n---\n(property) onSubmit?: ((event: FormSubmitEvent\u003Cany>) => any) & ((() => void | Promise\u003Cvoid>) | ((event: FormSubmitEvent\u003Cany>) => void | Promise\u003Cvoid>))\n```\n\n### Description\n\n`\u003CUForm>`s `@submit` event handler type require that it does not return any value. This is needlessly constraining.\n\n### Additional context\n\nThis is not required by the implementation, but instead wholly caused by the types of `onSubmit` property:\nhttps://github.com/nuxt/ui/blob/901bf7cac3ea53264b27adf879ee4072fa9ac242/src/runtime/components/Form.vue#L53\n\nResult of the `onSubmit` prop is not used at all:\nhttps://github.com/nuxt/ui/blob/901bf7cac3ea53264b27adf879ee4072fa9ac242/src/runtime/components/Form.vue#L243\n\nReplacing the type of `onSubmit` with this should be enough:\n```typescript\nexport interface FormProps\u003CS extends FormSchema, T extends boolean = true> {\n // ...\n onSubmit?: (event: FormSubmitEvent\u003CFormData\u003CS, T>>) => unknown\n}\n```\nThis should still allow passing event handlers without arguments.\n\n### Logs\n\n```shell-script\n\n```",[3139,3142],{"name":3140,"color":3141},"bug","d73a4a",{"name":3143,"color":3144},"triage","ffffff",4873,"nuxt","ui","open","`UForm` `onSubmit` type is needlessly constrained","2025-09-02T05:54:14Z","https://github.com/nuxt/ui/issues/4873",0.70986533,{"description":3154,"labels":3155,"number":3162,"owner":3146,"repository":3146,"state":3163,"title":3164,"updated_at":3165,"url":3166,"score":3167},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v20.11.0`\r\n- Nuxt Version: `3.9.3`\r\n- CLI Version: `3.10.0`\r\n- Nitro Version: `2.8.1`\r\n- Package Manager: `npm@10.2.4`\r\n- Builder: `-`\r\n- User Config: `extends`, `hooks`, `devServer`, `modules`, `devtools`, `css`, `tailwindcss`, `plugins`, `runtimeConfig`, `i18n`\r\n- Runtime Modules: `@nuxtjs/i18n@8.0.0`, `@nuxtjs/device@3.1.1`, `@nuxt/image@1.3.0`, `@nuxtjs/tailwindcss@6.11.0`, `@pinia/nuxt@0.5.1`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nDuring CSR make call useLazyAsyncData, that will trigger an error, and in watchEffect call `showError` util\n\n### Describe the bug\n\nWhen Im calling showError, in watchEffect, during CSR in error vue reactivity doesn't work at all\r\n\u003Cimg width=\"641\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/58978888/3af19c8a-6785-4589-9869-3d5bd1c61e5d\">\r\nerror.vue\r\n\u003Cimg width=\"677\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/58978888/06b8b293-c0f0-482c-b7bf-b57c37702f72\">\r\n\r\nafter click \"click me\" button test ref doesn`t change, \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3156,3159],{"name":3157,"color":3158},"3.x","29bc7f",{"name":3160,"color":3161},"pending triage","E99695",25619,"closed","Change refs in error.vue","2024-02-05T06:02:36Z","https://github.com/nuxt/nuxt/issues/25619",0.6847048,{"description":3169,"labels":3170,"number":3176,"owner":3146,"repository":3146,"state":3163,"title":3177,"updated_at":3178,"url":3179,"score":3180},"### Environment\n\nNuxt project info: 15:46:56\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.5.2\r\n- Nitro Version: 2.4.1\r\n- Package Manager: npm@7.17.0\r\n- Builder: vite\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\n[reproduction](https://stackblitz.com/github/jbreuil/layout-repro)\r\n\r\nIn this reproduction, the error is triggered when the layout is changed on routing. The error start appearing when adding a ref element in the component. The ref is on a v-for following the [documentation syntax](https://vuejs.org/guide/essentials/template-refs.html#refs-inside-v-for) and [typing](https://vuejs.org/guide/typescript/composition-api.html#typing-template-refs)\n\n### Describe the bug\n\nRelated to #13309, where people have the same error when using Transition.\r\n\r\nHere the error is the same and triggered at the same time (change of layout on routing to another page). In this reproduction, the error is appearing once we add a ref in the v-for of the component.\r\n\r\nFixed if you downgrade to nuxt 3.3.3\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3171,3172,3173],{"name":3157,"color":3158},{"name":3160,"color":3161},{"name":3174,"color":3175},"upstream","E8A36D",21323,"Layout error when using an Element ref on v-for","2023-07-06T15:39:03Z","https://github.com/nuxt/nuxt/issues/21323",0.68611586,{"description":3182,"labels":3183,"number":3198,"owner":3146,"repository":3147,"state":3163,"title":3199,"updated_at":3200,"url":3201,"score":3202},"### Environment\n\n- Operating System - Ubuntu 22\n- Node Version: 22\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Package Manager: pnpm@10.9.0\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.5\n\n### Reproduction\n\n```javascript\nconst fields = ref([\n {\n name: 'code',\n type: 'otp',\n placeholder: 'Enter 6-digit code',\n otp: {\n length: 6,\n placeholder: '●',\n },\n },\n])\n\nconst submitButtonOptions = computed(() => ({\n label: 'Verify Code',\n loading: loading.value,\n}))\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"flex min-h-screen items-center justify-center p-4\">\n \u003CUPageCard class=\"w-full max-w-md\">\n \u003CUAuthForm\n :schema=\"schema\"\n :state=\"credentials\"\n :fields=\"fields\"\n :loading=\"loading\"\n title=\"Multi-Factor Authentication\"\n subtitle=\"Enter the 6-digit code from your authenticator app to continue.\"\n :submit=\"submitButtonOptions\"\n @submit=\"verifyMFA\"\n >\n \u003Ctemplate #header>\n \u003CNuxtImg\n src=\"/thinkrocket-logo.png\"\n alt=\"ThinkRocket Logo\"\n width=\"100\"\n class=\"mx-auto\"\n preset=\"contain\"\n />\n \u003C/template>\n\n \u003Ctemplate #validation>\n \u003CUAlert\n v-if=\"mfaError\"\n color=\"error\"\n icon=\"i-lucide-alert-circle\"\n :title=\"mfaError\"\n class=\"mb-4\"\n />\n \u003C/template>\n\n \u003Ctemplate #footer>\n \u003Cdiv class=\"text-center space-y-2\">\n \u003Cp class=\"text-sm text-gray-600 dark:text-gray-300\">\n Check your authenticator app for the current code.\n \u003C/p>\n \u003CUButton variant=\"ghost\" size=\"sm\" :loading=\"loading\" @click=\"refreshChallenge\">\n \u003CUIcon name=\"i-lucide-refresh-cw\" class=\"h-4 w-4 mr-1\" />\n Get New Code\n \u003C/UButton>\n \u003C/div>\n \u003C/template>\n \u003C/UAuthForm>\n \u003C/UPageCard>\n \u003C/div>\n\u003C/template>\n```\n\n### Description\n\n`:fields` is throwing typescript error. Only an issue with `otp`. Looking in\n\n- `node_modules/.pnpm/@nuxt+ui-pro@3.1.3_@babel+parser@7.27.5_db0@0.3.2_better-sqlite3@11.10.0__embla-carouse_48b559106e80aa1b3007fc5d3af2ab7f/node_modules/@nuxt/ui-pro/dist/runtime/components/AuthForm.vue.d.ts`\n- `node_modules/.pnpm/@nuxt+ui@3.1.3_@babel+parser@7.27.5_db0@0.3.2_better-sqlite3@11.10.0__embla-carousel@8._6f36fdd0332a5dab432a961d27814af8/node_modules/@nuxt/ui/dist/runtime/components/PinInput.vue.d.ts`\n- `node_modules/.pnpm/reka-ui@2.3.1_typescript@5.8.3_vue@3.5.16_typescript@5.8.3_/node_modules/reka-ui/dist/index.d.ts`\n \nI'm not seeing what I'm missing. The [docs](https://ui.nuxt.com/components/auth-form#props) don't give any other details than the example.\n\n```\nVue: Type\n{\n name: string;\n type: string;\n placeholder: string;\n otp: {\n length: number;\n placeholder: string;\n };\n}[]\nis not assignable to type AuthFormField[]\nType\n{\n name: string;\n type: string;\n placeholder: string;\n otp: {\n length: number;\n placeholder: string;\n };\n}\nis not assignable to type AuthFormField\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3184,3185,3188,3191,3194,3195],{"name":3140,"color":3141},{"name":3186,"color":3187},"needs reproduction","CB47CF",{"name":3189,"color":3190},"v3","49DCB8",{"name":3192,"color":3193},"nuxt/ui-pro","00dc82",{"name":3143,"color":3144},{"name":3196,"color":3197},"closed-by-bot","ededed",4317,"UAuthForm otp typescript error","2025-06-18T02:14:57Z","https://github.com/nuxt/ui/issues/4317",0.68861884,{"description":3204,"labels":3205,"number":3209,"owner":3146,"repository":3147,"state":3163,"title":3210,"updated_at":3211,"url":3212,"score":3213},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nI have a form like the following example:\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n \u003Ch1>Training Form\u003C/h1>\n \u003C/div>\n \u003CUForm :state=\"state\" :schema=\"schema\" @submit=\"handleSubmit\">\n \u003CUFormGroup label=\"Name\" name=\"name\">\n \u003CUInput v-model=\"state.name\" />\n \u003C/UFormGroup>\n \u003CUFormGroup label=\"Training Week\" name=\"trainingWeek\">\n \u003Cdiv v-for=\"(day, index) in state.trainingWeek\" :key=\"index\">\n \u003CUFormGroup label=\"Day\" name=\"trainingWeek[' + index + '].day\">\n \u003CUInput v-model=\"day.day\" />\n \u003C/UFormGroup>\n \u003CUFormGroup label=\"Exercises\" name=\"trainingWeek[' + index + '].exercises\">\n \u003Cdiv v-for=\"(exercise, exerciseIndex) in day.exercises\" :key=\"exerciseIndex\">\n \u003CUInput v-model=\"exercise.exerciseName\" />\n \u003C/div>\n \u003C/UFormGroup>\n \u003Cdiv class=\"mt-4 flex justify-end\">\n \u003CUButton @click=\"addExercise(index)\">Add Exercise\u003C/UButton>\n \u003C/div>\n \u003C/div>\n \u003C/UFormGroup>\n \u003Cdiv class=\"mt-4 flex justify-end\">\n \u003CUButton @click=\"addDay\">Add Day\u003C/UButton>\n \u003CUButton type=\"submit\">Submit\u003C/UButton>\n \u003C/div>\n \u003C/UForm>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { z } from \"zod\";\nimport type { FormSubmitEvent } from \"#ui/types\";\nconst state = reactive({\n name: \"\",\n trainingWeek: [\n {\n day: \"\",\n exercises: [\n {\n exerciseName: \"\",\n },\n ],\n },\n ],\n});\n\nconst schema = z.object({\n name: z.string().min(1, \"Required field\"),\n trainingWeek: z.array(\n z.object({\n day: z.string().min(1, \"Required field\"),\n exercises: z.array(\n z.object({\n exerciseName: z.string().min(1, \"Required field\"),\n }),\n ),\n }),\n ),\n});\n\ntype Schema = z.infer\u003Ctypeof schema>;\n\nconst handleSubmit = (event: FormSubmitEvent\u003CSchema>) => {\n console.log(JSON.stringify(event.data, null, 2));\n};\n\nconst addExercise = (index: number) => {\n state.trainingWeek[index].exercises.push({ exerciseName: \"\" });\n};\n\nconst addDay = () => {\n state.trainingWeek.push({ day: \"\", exercises: [{ exerciseName: \"\" }] });\n};\n\u003C/script>\n\n```\n\nI render the form based on state and dynamically add fields.\n\nThe form automatically sets up errors for name ( or any first level fields ) but doesn't set up errors for nested ones like day or exerciseName in the above example\n\nWhat's the proper way to create dynamic forms and avail error setting ? \n\nI'm able to get the following:\n```json\nprofile.vue:68 ZodError: [\n {\n \"code\": \"too_small\",\n \"minimum\": 1,\n \"type\": \"string\",\n \"inclusive\": true,\n \"exact\": false,\n \"message\": \"Required field\",\n \"path\": [\n \"trainingWeek\",\n 0,\n \"day\"\n ]\n },\n {\n \"code\": \"too_small\",\n \"minimum\": 1,\n \"type\": \"string\",\n \"inclusive\": true,\n \"exact\": false,\n \"message\": \"Required field\",\n \"path\": [\n \"trainingWeek\",\n 0,\n \"exercises\",\n 0,\n \"exerciseName\"\n ]\n }\n]\n```\noutput by parsing schema \n```js\nwatchEffect(() => {\n try {\n schema.parse(state);\n } catch (error) {\n console.error(error);\n }\n});\n```\n\n",[3206],{"name":3207,"color":3208},"question","d876e3",2674,"How to ensure UForm and UFormGroup auto assigns errors for nested dynamic form.","2024-11-18T16:59:59Z","https://github.com/nuxt/ui/issues/2674",0.69707584,{"description":3215,"labels":3216,"number":3224,"owner":3146,"repository":3146,"state":3163,"title":3225,"updated_at":3226,"url":3227,"score":3228},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.4.2\r\n- Nitro Version: 2.3.3\r\n- Package Manager: npm@7.17.0\r\n- Builder: vite\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-zeykrs?file=app.vue\n\n### Describe the bug\n\nAccording to the [example-2](https://nuxt.com/docs/getting-started/error-handling#example-2) in the document, errors cannot be cleared directly. You must access `error.value = null`, which can be seem confusing.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3217,3218,3221],{"name":3157,"color":3158},{"name":3219,"color":3220},"dx","C39D69",{"name":3222,"color":3223},"🍰 p2-nice-to-have","0E8A16",20453,"Using `error = null` in template syntax cannot clear errors","2023-04-29T22:32:30Z","https://github.com/nuxt/nuxt/issues/20453",0.70200753,{"description":3230,"labels":3231,"number":3235,"owner":3146,"repository":3147,"state":3163,"title":3236,"updated_at":3237,"url":3238,"score":3239},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.13.1\n- Nuxt Version: 3.17.4\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@10.6.3\n- Builder: -\n- User Config: telemetry, ssr, future, compatibilityDate, modules, hooks, nitro, css, routeRules, devtools, experimental, typescript, imports\n- Runtime Modules: @nuxt/ui-pro@3.1.3, @vueuse/nuxt@13.3.0, @pinia/nuxt@0.11.0, @pinia/colada-nuxt@0.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/suspicious-water-smppjv\n\n### Description\n\nThe docs note that you can access exposed variables from `UForm`. I've found that the following fields are not reactive:\n- dirty \n- dirtyFields\n- blurredFields\n- touchedFields\n\n### Additional context\n\nI see in the [source](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Form.vue) that they're not defined with `ref` or `reactive`.\n\nAdditionally, the `dirty` computed that gets exposed would never get updated since `dirtyFields` is not reactive.\n\n### Logs\n\n```shell-script\n\n```",[3232,3233,3234],{"name":3140,"color":3141},{"name":3189,"color":3190},{"name":3143,"color":3144},4238,"Form exposed dirty, dirtyFields, blurredFields, and touchedFields are not reactive","2025-06-24T15:56:14Z","https://github.com/nuxt/ui/issues/4238",0.7024471,{"labels":3241,"number":3246,"owner":3146,"repository":3146,"state":3163,"title":3247,"updated_at":3248,"url":3249,"score":3250},[3242,3243],{"name":3160,"color":3161},{"name":3244,"color":3245},"2.x","d4c5f9",8066,"NuxtJs: ReferenceError: NuxtError is not defined","2023-01-22T15:36:08Z","https://github.com/nuxt/nuxt/issues/8066",0.7036064,{"description":3252,"labels":3253,"number":3258,"owner":3146,"repository":3146,"state":3163,"title":3259,"updated_at":3260,"url":3261,"score":3262},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v22.11.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: bun@1.2.1\n- Builder: -\n- User Config: modules, css, ssr, devtools, future, typescript, vite, hooks, nitro, compatibilityDate, runtimeConfig\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.12, nuxt-mikro-orm-module@0.4.1, @nuxt/eslint@1.0.1, nuxt-auth-utils@0.5.15, @nuxt/image@1.9.0\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nUse this `app.vue`:\n```\n// app.vue\n\u003Cscript setup lang=\"ts\">\n\n\u003C/script>\n\n\u003Ctemplate>\n \u003C!-- https://github.com/nuxt/nuxt/issues/25214#issuecomment-1894051562 -->\n \u003Cdiv>\n \u003CNuxtLoadingIndicator />\n \u003CNuxtRouteAnnouncer />\n\n \u003CNuxtLayout>\n \u003CUApp>\n \u003CNuxtPage />\n \u003C/UApp>\n \u003C/NuxtLayout>\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle>\nbody {\n @apply antialiased;\n background: var(--ui-bg-muted);\n}\n\n.dark {\n body {\n @apply antialiased;\n background: var(--ui-bg);\n }\n}\n\u003C/style>\n```\n\nGo to any page with layout, wait 10-20 sec then try to navigate to another page.\n\n### Describe the bug\n\nSame problem:\nwhen i use navigateTo cant load the page.\nNavigate using user action(navigation menu mouse click) can't load the page\n\n```\n\"nuxt\": \"^3.15.4\",\n\"vue\": \"^3.5.13\",\n\"vue-router\": \"^4.5.0\",\n\"@nuxt/ui\": \"^3.0.0-alpha.10\",\n```\nI get that warning:\n\n\nThen that error:\n\n\nHere is my `app.vue`:\n```\n\u003Cscript setup lang=\"ts\">\n\n\u003C/script>\n\n\u003Ctemplate>\n \u003C!-- https://github.com/nuxt/nuxt/issues/25214#issuecomment-1894051562 -->\n \u003Cdiv>\n \u003CNuxtLoadingIndicator />\n \u003CNuxtRouteAnnouncer />\n\n \u003CNuxtLayout>\n \u003CUApp>\n \u003CNuxtPage />\n \u003C/UApp>\n \u003C/NuxtLayout>\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle>\nbody {\n @apply antialiased;\n background: var(--ui-bg-muted);\n}\n\n.dark {\n body {\n @apply antialiased;\n background: var(--ui-bg);\n }\n}\n\u003C/style>\n```\n\n@TheAlexLichter \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3254,3255,3257],{"name":3160,"color":3161},{"name":3186,"color":3256},"FBCA04",{"name":3196,"color":3197},31010,"Unhandled error during execution of component update, Uncaught (in promise) TypeError: node is null","2025-02-28T02:01:44Z","https://github.com/nuxt/nuxt/issues/31010",0.7048961,{"description":3264,"labels":3265,"number":3274,"owner":3146,"repository":3146,"state":3163,"title":3275,"updated_at":3276,"url":3277,"score":3278},"### Environment\r\n\r\napp\r\n```\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.6.5`\r\n- Nitro Version: `2.5.2`\r\n- Package Manager: `npm@9.5.1`\r\n- Builder: `vite`\r\n- User Config: `extends`, `typescript`, `devtools`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n```\r\n\r\nlayer\r\n```\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.6.5`\r\n- Nitro Version: `2.5.2`\r\n- Package Manager: `npm@9.5.1`\r\n- Builder: `vite`\r\n- User Config: `typescript`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n```\r\n\r\n### Reproduction\r\n\r\n1. clone repo https://github.com/DawidKopys/nuxt-h3-event-ts-error-repro\r\n2. run `npm i` in nuxt-layer directory\r\n3. run `npm i` in app directory\r\n4. run `npx nuxi typecheck` / `npm run dev` / `npx vue-tsc --noEmit` inside app directory. You should get below error:\r\n\r\n```\r\nNuxi 3.6.5 3:57:55 PM\r\n../nuxt-layer/server/api/foo.ts:7:13 - error TS2345: Argument of type 'H3Event' is not assignable to parameter of type 'H3Event\u003CEventHandlerRequest>'.\r\n\r\n7 setCookie(event, 'someCookieName', 'someCookieValue')\r\n ~~~~~\r\n\r\n../nuxt-layer/server/utils/someUtil.ts:6:13 - error TS2345: Argument of type 'H3Event' is not assignable to parameter of type 'H3Event\u003CEventHandlerRequest>'.\r\n Type 'H3Event' is missing the following properties from type 'H3Event\u003CEventHandlerRequest>': method, headers, toJSON, fetch, $fetch\r\n\r\n6 setCookie(event, 'someCookieName', 'someCookieValue')\r\n ~~~~~\r\n\r\n\r\nFound 2 errors in 2 files.\r\n\r\nErrors Files\r\n 1 ../nuxt-layer/server/api/foo.ts:7\r\n 1 ../nuxt-layer/server/utils/someUtil.ts:6\r\n```\r\n\r\n### Describe the bug\r\n\r\n- `app` has dependency `h3` installed with version `1.8.0`\r\n- `nuxt-layer` has dependency `h3` installed with version `1.7.1` (forced with `overrides` field in layer's `package.json` - for simplicity - the effect would be exactly the same if layer had `1.7.1` version locked with its `package-lock.json`)\r\n\r\nAs a result, I am getting typescript errors if **some** utils are imported manually from `h3` and others are auto-imported. Layer file `server/api/foo.ts` shows simple example of this scenario. In this file, `defineEventHandler` is imported manually, while function `setCookie` is auto imported - we get ts error because of that.\r\n\r\nThere is a simple solution for this exact situation - don't import `defineEventHandler` manually. If done so, there are no ts errors for this file.\r\n\r\nHowever, sometimes we might need to import something manually from our dependency. File `server/utils/someUtil.ts` serves as an example of such case.\r\nHere, we have some utility function, which accepts `event` as its argument. In order to type the parameter we need to import `H3Event` from `h3`. This function also uses `setCookie` function which is auto imported.\r\nAgain, we get ts error as a result.\r\n\r\n**Workaround** \r\nImporting everything manually from our `h3` dependency fixes the problem - we no longer get ts errors.\r\nWe no longer get the benefit of auto imports though.\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3266,3269,3270,3271],{"name":3267,"color":3268},"types","2875C3",{"name":3157,"color":3158},{"name":3219,"color":3220},{"name":3272,"color":3273},"layers","006B75",22726,"TypeScript errors when layer and app have different dependency versions","2024-05-24T09:56:28Z","https://github.com/nuxt/nuxt/issues/22726",0.70529157,["Reactive",3280],{},["Set"],["ShallowReactive",3283],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fqSiLnVSr8tIAoiRp-fT7CbVnQVEe2qzCA6FZ11-RNU0":-1},"/nuxt/ui/4455"]