Component cannot be inspected when prop has null in type array

[senritsu]

Version

6.0.0-beta.17

Browser and OS info

Chrome 93 / Windows 10

Steps to reproduce

• Create new vue3 app with typescript
• Create SFC using the script setup syntactic sugar
• Declare props using const props = defineProps<{ modelValue: Foo[] | null }>()
• Open devtools
• Try to inspect component

What is expected?

Component can be inspected

What is actually happening?

Infinite errors in console

An error occurred in hook inspectComponent

TypeError: Cannot read properties of null (reading 'toString')
    at getPropType (backend.js:4420)
    at backend.js:4418
    at Array.map (<anonymous>)
    at getPropType (backend.js:4418)
    at loop (backend.js:4395)
    at processProps (backend.js:4409)
    at getInstanceState (backend.js:4374)
    at Object.getInstanceDetails (backend.js:4368)
    at backend.js:5231
    at DevtoolsHookable.callHandlers (backend.js:727)

Component inspector panel stays empty.

---

Using the "old" syntax to defineProps

import type { PropType } from 'vue'

defineProps({
  modelValue: {
    type: Array as PropType<Foo[] | null>,
    required: true
  }
})
// instead of
defineProps<{ modelValue: Foo[] | null }>()

works like expected, but is considerably more verbose.

[Akryum]

Please provide an actual runnable reproduction.

On main branch following your reproduction steps:

[senritsu]

I managed to reproduce the issue using a fresh vue-cli typescript project, with minimal setup on top.

https://github.com/senritsu/vue-devtools-issue-reproduction-1559

Same behavior as in the original issue report, same OS/Browser/etc.

[Akryum]

This has nothing to to with Typescript, the real issue is inspecting a component with a prop having null in type array:

export default {
  props: {
    foo: {
      type: [Number, null]
    }
  }
}