TypeError: Cannot read properties of null (reading 'setupContext') at getContext at useAttrs
Vue version
3.5
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-qzosvt?file=src%2Fcomponents%2FButton.vue
Steps to reproduce
Fragment.vue component, if displayed no root component will appear.
<template>
<slot></slot>
</template>
<script setup>
defineOptions({
inheritAttrs: true,
});
</script>
Button.vue component, depending on a prop i want to show the Fragment.vue (empty root) or a div
<component :is="wrapper">
<button v-bind="componentProps">
{{ label }}
</button>
</component>
</template>
<script setup>
import { computed, ref, useAttrs, mergeProps } from 'vue';
import CFragment from './Fragment.vue';
const props = defineProps({
label: Number,
});
const wrapper = computed(() => CFragment); //DEPENDING ON A PROP I WANT TO SHOW AN EMPTY ROOT OR A DIV
const componentProps = computed(() => {
return mergeProps(
{
label: props.label,
},
useAttrs()
);
});
</script>
App.vue, the "changeProp" button will change the label prop of the Button.vue, the error will popup.
import { ref } from 'vue';
import BButton from './components/Button.vue';
const label = ref(0);
function changeProp() {
label.value = label.value + 1;
}
</script>
<template>
<button @click="changeProp">changeProp</button>
<pre>{{ label }}</pre>
<BButton :label="label" />
</template>
What is expected?
The label const is expected to change without an error.
What is actually happening?
TypeError: Cannot read properties of null (reading 'setupContext') at getContext (vue.js?v=59154800:5362:12) at useAttrs (vue.js?v=59154800:5355:10)
System Info
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.20.3 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
vue: ^3.5.0 => 3.5.12
Any additional comments?
In Vue 3.4, no error occurred, but in Vue 3.5, it does.
a workaround:
const attrs = useAttrs()
const componentProps = computed(() => {
return mergeProps(
{
label: props.label,
},
attrs
);
});
I have observed that this has been fixed in v3.6.0-alpha.1