getCustomRefDetails cannot convert Symbol value to a string

[MikesAtMIT]

Version

6.2.1

Browser and OS info

Chrome 105.0.5195.125 / macOS 10.15.7

Steps to reproduce

1. Using Vue 2.6.14 and Handsontable 11.1.0
2. Create a component, MyComponent
3. Add a ref to the HotTable component so that the handsontable instance can be accessed
4. Open Vue Devtools and try to inspect MyComponent

<!-- MyComponent.vue -->
<template>
  <hot-table ref="hot" :data="hotData"></hot-table>
</template>
<script>
import { HotTable } from '@handsontable/vue'
export default {
  name: 'MyComponent',
  components: {
    HotTable,
  },
  data () {
    return {
      hotData: [['a', 'b'], ['c', 'd']],
    }
  },
}
</script>

What is expected?

I expect to be able to inspect MyComponent

What is actually happening?

Nothing loads for MyComponent in Vue Devtools, and this error appears in the console. The HotTable component itself can be inspected.

An error occurred in hook 'inspectComponent' with payload: {app: Vue, componentInstance: VueComponent, instanceData: null}
TypeError: Cannot convert a Symbol value to a string
    at getCustomRefDetails (backend.js:8701:166)
    at backend.js:4165:123
    at Array.map (<anonymous>)
    at processRefs (backend.js:4165:73)
    at getInstanceState (backend.js:3925:93)
    at getInstanceDetails (backend.js:3910:12)
    at backend.js:5231:60
    at DevtoolsHookable.callHandlers (backend.js:745:17)
    at DevtoolsApi.callHook (backend.js:227:29)
    at DevtoolsApi.inspectComponent (backend.js:315:32)

---

There are methods in handsontable to manipulate the table that require accessing the handsontable instance, which their docs say to use a ref: https://handsontable.com/docs/vue-hot-reference/

This issue has been brought up before as a problem in the main Vue repo, and I think it was resolved by 2.6.14. I am now noticing it's an issue in devtools (or maybe it always has been).

https://forum.handsontable.com/t/vue-typeerror-cannot-convert-a-symbol-value-to-a-string/3768

vuejs/vue#10529

[Akryum]

Please provide a runnable reproduction, thanks.

[MikesAtMIT]

Not sure what the best way to provide a repro is, but here's a small app that demonstrates the bug. npm install or npm ci to install node dependencies. npm run serve to run the dev server. Access on localhost:8080.
handsontable-vue-devtools-bug.tar.gz

[raf-lv]

Hi @MikesAtMIT , I had the same issue and while debugging on devtools I noticed the className attribute was being treated as a Symbol. It's a hack but adding className="something" fixed the issue for me. Please give it a try.

Your component would be like this:

<hot-table ref="hot" :data="hotData" className="something"></hot-table>

[MikesAtMIT]

@omgwhatuser Wow that is super bizarre. You don't even have to provide a value, you can just do class-name="" and the error goes away. Thanks for the tip, though I'm going to leave this open in hopes that it gets fixed eventually without the hack

[JasmineSokko]

@omgwhatuser Your help was very much appreciated

[lardern]

Hi @MikesAtMIT , I had the same issue and while debugging on devtools I noticed the className attribute was being treated as a Symbol. It's a hack but adding className="something" fixed the issue for me. Please give it a try.

Your component would be like this:

<hot-table ref="hot" :data="hotData" className="something"></hot-table>

it work!