[9.0.0+] Adding HyperFormula leads to "TypeError: Converting circular structure to JSON"

[GlennMatthys]

Description

When the HyperFormula instance is added to the settings of a hot-table component, a warning from Vue is emitted about a circular JSON structure:

[Vue warn]: Error in getter for watcher "mergedHotSettings": "TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'DependencyGraph'
    |     property 'lazilyTransformingAstService' -> object with constructor 'LazilyTransformingAstService'
    |     property 'undoRedo' -> object with constructor 'UndoRedo'
    |     property 'operations' -> object with constructor 'Operations'
    --- property 'dependencyGraph' closes the circle"

found in

---> <HotTable>

Steps to reproduce

See jsfiddle

Demo

Clicking "Run" hangs the browser for a while until it errors out. https://jsfiddle.net/z3568ovc/ The problem is the same but the error message is different because Vue is not running with development mode on in jsfiddle.

<a class='gotoLine' href='#"[Vue warn'>"[Vue warn</a>: You may have an infinite update loop in watcher with expression \&quot;settings\&quot;

found in

---&gt; &lt;HotTable&gt; at src/common/HotTable.vue
       &lt;Root&gt;"]

Your environment

• Vue wrapper version: 9.0.2
• Handsontable version: 9.0.2
• Browser Name and version: Google Chrome Version 93.0.4577.82 (Official Build) (64-bit)
• Operating System: Windows 10 Pro Version 2004 (OS Build 19041.1237)

[AMBudnik]

Thank you for the report @GlennMatthys

Can you help me to test it out @aninde ?

[adrianszymanski89]

Thank you for the report @GlennMatthys

Can you help me to test it out @aninde ?

@AMBudnik issue checked and reported as a regression.

[fsnlarson]

We have this issue as well

[sequba]

My investigation

Updating the code example

The provided demo uses the old Vue wrapper (https://cdn.rawgit.com/handsontable/vue-handsontable-official/40abf2c4/dist/ce/vue-handsontable-ce.min.js).

I created a jsfiddle with current versions of handsontable, and @handsontable/vue. It seems to work (displays the table, allows to type formulas and calculates them), but there's still an error in the console:

Cause of the bug

I'm not an expert in Vue, but as far as I can tell:

• Vue has different ways of handling simple values and complex structures.
• hyperformulaInstance is not a simple value. It is a complex object that contains circular references.
• Vue wrapper assumes that settings is a simple value and treats it that way.
• Passing hyperformulaInstance to the hot-table component inside the settings object causes the error.

Recommended solution

The Vue wrapper should be changed to handle settings correctly.

Additional info

Passing hyperformulaInstance as formulas property also causes this bug:

<template>
  <hot-table :settings="hotSettings" :formulas="formulas"></hot-table>
</template>

<script>
//...
export default {
  data: function() {
    return {
      hotSettings: {
        data: Handsontable.helper.createSpreadsheetData(4, 4),
        colHeaders: true,
        licenseKey: 'non-commercial-and-evaluation'
      },
      formulas: {engine: hyperformulaInstance},
    }
  },
  components: {
    HotTable
  }
}
</script>

Passing anything circular inside settings property also causes this bug:

<template>
  <hot-table :root="root" :settings="hotSettings"></hot-table>
</template>

<script>
//...

const circularStructure = {};
circularStructure.circularProp = circularStructure;

export default {
  data: function() {
    return {
      hotSettings: {
        data: Handsontable.helper.createSpreadsheetData(4, 4),
        licenseKey: 'non-commercial-and-evaluation',
        whatever: circularStructure,
      },
    }
  },
  components: {
    HotTable
  }
}
</script>

[AMBudnik]

Thank you for the research, @sequba
I'm changing the labels to VUE.

Inform Zen

[maomaobaibai-cloud]

I'v met the same problem, and i just rewrote the function simpleEqual in node_modules@handsontable\vue\es\vue-handsontable.mjs line 317 with the code below, and the warning has gone, hope that helpful.

function simpleEqual(x, y) {
  if (x === y) {
    return true;
  } else if ((typeof x == "object" && x != null) && (typeof y == "object" && y != null)) {
    if (Object.keys(x).length !== Object.keys(y).length) {
      return false;
    }
    for (var prop in x) {
      if (y.hasOwnProperty(prop)) {  
        if (!simpleEqual(x[prop], y[prop])) return false;
      } else {
        return false;
      }
    }
    return true;
  } else {
    return false;
  }
}

[171h]

+1

[AMBudnik]

Hi @GlennMatthys @171h @maomaobaibai-cloud @fsnlarson

We just merged the pull request that fixes this issue. We'll do our best to push it in the next release.

[magierg]

fix verified with 14.1: https://jsfiddle.net/maciej_handsontable/pjdynz90/1/

[AMBudnik]

Hi @GlennMatthys We're more than happy to announce that we just released the version that fixes this issue.

Here https://handsontable.com/docs/javascript-data-grid/release-notes/#_14-1-0 you can read more about the changes

CC @171h @maomaobaibai-cloud @fsnlarson