Go-debug-module.js:15 Uncaught Error: Invalid DIV id; could not get element with id: gojs

GoJS
1

in my Main.vue component,

<script setup>

import gojs from '@/vendors/gojs/go-debug-module.js'

const init = () => {

  console.log(this)

  var $ = gojs.GraphObject.make 
  var myDiagram = $(go.Diagram, "gojs", 
    {
      "undoManager.isEnabled": true 
    }
  )

  var myModel = $(go.Model)
  myModel.nodeDataArray = [
    { key: "Ale" },
    { key: "Bob" },
    { key: "Click" }
  ]

  myDiagram.model = myModel

}

init()


</script>

<template>
  <div id="gojs" class="gojs">
    Gojs demo   
  </div>
</template>

<style scoped>

.gojs {
  width: 100%;
  height: 100%;
  background-color: beige;
}

</style>

when I run my gojs demo I get below error:

go-debug-module.js:15 Uncaught Error: Invalid DIV id; could not get element with id: gojs
    at v (go-debug-module.js:15:115)
    at Fi (go-debug-module.js:875:285)
    at Wl (go-debug-module.js:1001:66)
    at init (Main.vue:10:1)
    at setup (Main.vue:27:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js:157:22)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7246:29)
    at setupComponent (runtime-core.esm-bundler.js:7201:11)
    at mountComponent (runtime-core.esm-bundler.js:5524:13)
    at processComponent (runtime-core.esm-bundler.js:5499:17)

even changed the id to gojs111 still not work.

2

Where is the HTMLDivElement that will host the diagram? Is its id “gojs”?

3

@walter You see this div, why cannot find it?

<div id="gojs" class="gojs">Gojs demo</div>
4

I don’t know – it is just calling document.getElementById.
Maybe Vue or components are hiding it.