vuejs / core

đź–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.85k stars 8.36k forks source link

TypeError: Cannot read properties of null (reading 'setupContext') at getContext at useAttrs #12228

Open eeee-creator opened 1 month ago

eeee-creator commented 1 month ago

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.

edison1105 commented 1 month ago

a workaround:

const attrs = useAttrs()
const componentProps = computed(() => {
  return mergeProps(
    {
      label: props.label,
    },
    attrs
  );
});