search

robin1liu / vue-mermaid

flowchart of mermaid with vue component
MIT License
124 stars 25 forks source link

Error in mounted hook: NS_ERROR_FAILURE #10

Open useo6 opened 4 years ago

useo6 commented 4 years ago

Hi, I'm getting the following error when using vue-mermaid:

[Vue warn]: Error in mounted hook: "[Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: webpack-internal:///./node_modules/dagre-d3/lib/label/add-label.js :: addLabel :: line 21" data: no]"

found in

---> at /Users/liu/githome/vue-mermaid/src/vue-mermaid.vue

The Exception is the following:

columnNumber: 0 ​ data: null ​ filename: "webpack-internal:///./node_modules/dagre-d3/lib/label/add-label.js" ​ lineNumber: 21 ​ message: "" ​ name: "NS_ERROR_FAILURE" ​ result: 2147500037 ​ stack: "addLabel@webpack-internal:///./node_modules/dagre-d3/lib/label/add-label.js:21:35\ncreateNodes/<@webpack-internal:///./node_modules/dagre-d3/lib/create-nodes.js:32:28\n__webpack_exports__.default@webpack-internal:///./node_modules/d3-selection/src/selection/each.js:6:37\ncreateNodes@webpack-internal:///./node_modules/dagre-d3/lib/create-nodes.js:24:12\nfn@webpack-internal:///./node_modules/dagre-d3/lib/render.js:26:28\ndraw@webpack-internal:///./node_modules/mermaid/dist/mermaid.core.js:3356:9\nrender@webpack-internal:///./node_modules/mermaid/dist/mermaid.core.js:13723:80\n_loop@webpack-internal:///./node_modules/mermaid/dist/mermaid.core.js:13053:57\ninit@webpack-internal:///./node_modules/mermaid/dist/mermaid.core.js:13065:21\nload@webpack-internal:///./node_modules/vue-mermaid/dist/vue-mermaid.js:1:5082\nloadNodes@webpack-internal:///./node_modules/vue-mermaid/dist/vue-mermaid.js:1:4801\nmounted@webpack-internal:///./node_modules/vue-mermaid/dist/vue-mermaid.js:1:2781\ninvokeWithErrorHandling@webpack-internal:///./node_modules/vue/dist/vue.esm.js:1862:57\ncallHook@webpack-internal:///./node_modules/vue/dist/vue.esm.js:4216:30\ninsert@webpack-internal:///./node_modules/vue/dist/vue.esm.js:3145:15\ninvokeInsertHook@webpack-internal:///./node_modules/vue/dist/vue.esm.js:6341:28\npatch@webpack-internal:///./node_modules/vue/dist/vue.esm.js:6560:21\nlifecycleMixin/Vue.prototype._update@webpack-internal:///./node_modules/vue/dist/vue.esm.js:3942:19\nupdateComponent@webpack-internal:///./node_modules/vue/dist/vue.esm.js:4063:10\nget@webpack-internal:///./node_modules/vue/dist/vue.esm.js:4476:25\nWatcher@webpack-internal:///./node_modules/vue/dist/vue.esm.js:4465:12\nmountComponent@webpack-internal:///./node_modules/vue/dist/vue.esm.js:4070:3\nVue.prototype.$mount@webpack-internal:///./node_modules/vue/dist/vue.esm.js:9047:10\nVue.prototype.$mount@webpack-internal:///./node_modules/vue/dist/vue.esm.js:11941:16\n_callee6$@webpack-internal:///./src/main.js:488:20\ntryCatch@webpack-internal:///./node_modules/regenerator-runtime/runtime.js:45:40\ninvoke@webpack-internal:///./node_modules/regenerator-runtime/runtime.js:271:30\ndefineIteratorMethods/</prototype[method]@webpack-internal:///./node_modules/regenerator-runtime/runtime.js:97:21\nasyncGeneratorStep@webpack-internal:///./node_modules/@babel/runtime-corejs2/helpers/esm/asyncToGenerator.js:9:24\n_next@webpack-internal:///./node_modules/@babel/runtime-corejs2/helpers/esm/asyncToGenerator.js:31:27\n"

My package.json contains the following lines:

"vue-mermaid": "0.0.11",
"mermaid": "8.4.4",

Any idea what can cause the problem?

Edit 1: I've only one node in my graph:

nodes: [ { id: "1", text: "A", link: "---", editable: true } ]

Edit 2: I figured out that the problem is that I placed the vue-mermaid tag inside a tab pane. The tab pane is hidden when accessing the page. In this case FireFox throw the NS_ERROR_FAILURE (see https://bugzilla.mozilla.org/show_bug.cgi?id=941146). But unfortunately, Chrome doesn't render the graph, too if I place inside a tab-pane. Both, FireFox and Chrome renders the graph only if the graph isn't hidden when accessing the page.