After successfully creating a Single File Component in Vue without any compilation errors, I faced an issue when trying to view the component through its route link. Instead of the expected page, I encountered a stack trace printed in the Chrome browser using the Vue Devtools plugin.
The stack trace output in the Vue Devtools plugin console is as follows:
Vue warn: Error in render:
[HMR] Waiting for update signal from WDS...
Vue warn: Error in render: "TypeError: Converting circular structure to JSON
--> starting at object with constructor 'DockPanel'
| property '_layout' -> object with constructor 'DockLayout'
--- property '_parent' closes the circle"
(found in
---> <Demo> at src/components/Demo.vue
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
Vue._render @ vue.runtime.esm.js?2b0e:3544
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
...
package.json
{
"name": "client",
"version": "0.1.0",
...
}
router.ts
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Demo from './components/Demo.vue';
...
Demo.vue
<template>
<div class="demo">
<h1>{{ title }}</h1>
{{ dpanel }}
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Widget, DockPanel } from '@phosphor/widgets';
...
How can I troubleshoot and resolve this error to correctly render the widgets as intended?