Skip to content

Commit 29178e5

Browse files
authored
Describe Vue reactivity issue and markRaw function as a solution in the Vue troubleshooting section (#1549)
Mention markRaw function in the Vue troubleshooting section
1 parent 94d563b commit 29178e5

File tree

1 file changed

+25
-0
lines changed

1 file changed

+25
-0
lines changed

docs/guide/integration-with-vue.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,28 @@ This demo uses the [Vue 3](https://v3.vuejs.org/) framework. If you are looking
1717
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
1818
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
1919
</iframe>
20+
21+
## Troubleshooting
22+
23+
### Vue reactivity issues
24+
25+
If you encounter an error like:
26+
27+
```
28+
Uncaught TypeError: Cannot read properties of undefined (reading 'licenseKeyValidityState')
29+
```
30+
31+
This error occurs when Vue's reactivity system tries to deeply observe the HyperFormula instance. To fix this, wrap your HyperFormula instance in Vue's [`markRaw`](https://vuejs.org/api/reactivity-advanced.html#markraw) function:
32+
33+
```javascript
34+
import { markRaw } from 'vue';
35+
import { HyperFormula } from 'hyperformula';
36+
37+
const hfInstance = markRaw(
38+
HyperFormula.buildEmpty({
39+
licenseKey: 'internal-use-in-handsontable',
40+
})
41+
);
42+
```
43+
44+
This function prevents Vue from converting the HyperFormula instance into a reactive proxy, which can cause errors and performance issues.

0 commit comments

Comments
 (0)