Switch - `TypeError: Cannot read properties of undefined (reading 'switchRef')`

Libraries versions @headlessui/vue - 1.7.0 nuxt - 3.0.0-rc.9

Reproduction/example: https://codesandbox.io/s/gracious-williamson-tjkrci?file=/pages/index.vue

Vue 3/Nuxt 3

Code:

<template>
  <Switch
      v-model="modelValue" @update:modelValue="$emit(`update:modelValue`, $event)"
      :class="modelValue ? `bg-[#456E4DFF] left 0.15s ease-out` : `bg-[#555762FF]`"
      class="relative inline-flex items-center h-[28px] rounded-full transition-colors w-[52px] border-white border-[1px]"
  >
    <span :class="modelValue ? `translate-x-[26px]` : `translate-x-[4px]`"
          class="inline-block transform h-[20px] w-[20px] rounded-full bg-white transition-transform transform"
    />
  </Switch>
</template>

<script setup>
import { Switch } from "@headlessui/vue"
let { modelValue } = defineProps(["modelValue"])
</script>

Error:

[Vue warn]: Unhandled error during execution of setup function
  at <Switch modelValue=true onUpdate:modelValue= [
  [Function (anonymous)],
  [Function (anonymous)],
  [Function: onUpdate:modelValue]
] class="bg-[#456E4DFF] left 0.15s ease-out relative inline-flex items-center h-[28px] rounded-full transition-colors w-[52px] border-white border-[1px]" >
[nitro] [dev] [unhandledRejection] TypeError: Cannot read properties of undefined (reading 'switchRef')
    at setup (file:///d:/custom-frontend/node_modules/@headlessui/vue/dist/components/switch/switch.js:1:1393)
    at callWithErrorHandling (D:\custom-frontend\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:157:22)
    at setupStatefulComponent (D:\custom-frontend\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7107:29)
    at setupComponent (D:\custom-frontend\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7062:11)
    at renderComponentVNode (D:\custom-frontend\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:172:17)
    at Module.ssrRenderComponent (D:\custom-frontend\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:608:12)    at _sfc_ssrRender (D:/custom-frontend/components/SwitchLR.vu
e:27:31)
    at renderComponentSubTree (D:\custom-frontend\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:253:13)
    at renderComponentVNode (D:\custom-frontend\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:188:16)
    at Module.ssrRenderComponent (D:\custom-frontend\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:608:12)

[thecrypticace]

Hey, appreciate you providing a reproduction for this! We looked into this further and it appears to be not a Headless UI issue.

Looks like the bundler build of the server render doesn’t have this problem but the browser build does. Likely for the same reason that Nuxt has an issue — like @sprattek pointed out. The fix here would be to add Headless UI to your build.transpile array in your config. Nuxt did make changes though to treat Vue as an external. It may be worth reporting this issue here (regardless of if adding it to build.transpile works): https://github.com/nuxt/framework/issues/4084

Ultimately this isn’t a Headless UI issue but either a Vue internals problem or a Nuxt problem or both.

[thecrypticace]

@RobinMalfait I did a bit of poking around:

• This is an SSR only issue
• inject gets called twice to provide the GroupContext (I guess once for SSR and once during hydration?)
• In the first instance currentInstance and currentRenderingInstance are both undefined.
• This causes inject to return undefined instead of null (the default value). This situation would throw a warning in a dev build — but it’s been stripped from the prod build.
• This seems like a Vue bug maybe. It could be we’re doing something weird during SSR that’s causing this too. Maybe it has something to do with microtasks? Not sure.

The code sandbox, for me, never loads. It’s always stuck on “installing packages”. So, I created a SSR-enabled Vue SFC explorer reproduction if that helps.