Got Cannot read properties of undefined error

[aaronchen2k]

I got error as below, pls help to check, thanks.

<Vue3JsonEditor
v-model="modelData"
mode="code"
@json-change="onJsonChange"
lang="zh"
:show-btns="false"
:expandedOnStart="false"
/>

vue3-json-editor.esm.prod.js?c45b:31 Could not load worker TypeError: Cannot read properties of undefined (reading 'Blob')
at eval (vue3-json-editor.esm.prod.js?c45b:31:1)
at Object.eval (vue3-json-editor.esm.prod.js?c45b:31:1)
at Object.eval (vue3-json-editor.esm.prod.js?c45b:31:1)
at i (vue3-json-editor.esm.prod.js?c45b:31:1)
at new l (vue3-json-editor.esm.prod.js?c45b:31:1)
at h.createWorker (vue3-json-editor.esm.prod.js?c45b:31:1)
at u.ace.define.$startWorker (vue3-json-editor.esm.prod.js?c45b:31:1)
at u.ace.define.$onChangeMode (vue3-json-editor.esm.prod.js?c45b:31:1)
at u.eval (vue3-json-editor.esm.prod.js?c45b:31:1)
at l.ace.define.t.loadModule (vue3-json-editor.esm.prod.js?c45b:31:1)

[joaomede]

please, show your Package.json version of (vue and relative libs)

[joaomede]

你好慢。
@aaronchen2k could you explain to me what this error is causing (in usability), in practice?, I validated the code and it only occurs in ESM, this "get_blobs" method is an internal method of the "Json-Editor" library and only occurs in ESM, however, it looks like some kind of polyfill that is not in use.

[aaronchen2k]

https://www.github.com/aaronchen2k/ztf/tree/main/ui/package.json
Thanks！

[joaomede]

Your project is a vue normal project, not vite, for It, use a normal import, like "import JsonEditor from "vue3-json-editor", not need import "esm.prod" version.

[noeGnh]

I have similar issue with normal import:
import { Vue3JsonEditor } from 'vue3-json-editor'

<Vue3JsonEditor 
    v-model="jsonData"
    :show-btns="false" 
    :lang="$i18n.locale"
    :expandedOnStart="true"
    @json-change="onJSONDataChange"

Error:

`Uncaught (in promise) TypeError: Cannot read properties of null (reading 'expandAll')
    at a (vue3-json-editor.esm.prod.js?c45b:31:1)
    at eval (vue3-json-editor.esm.prod.js?c45b:31:1)
    at tryCatch (runtime.js?96cf:63:1)
    at Generator.invoke [as _invoke] (runtime.js?96cf:294:1)
    at Generator.eval [as next] (runtime.js?96cf:119:1)
    at asyncGeneratorStep (vue3-json-editor.esm.prod.js?c45b:1:1)
    at s (vue3-json-editor.esm.prod.js?c45b:1:1)

My dependencies:

"dependencies": {
    "@ckeditor/ckeditor5-alignment": "^31.0.0",
    "@ckeditor/ckeditor5-basic-styles": "^31.0.0",
    "@ckeditor/ckeditor5-build-classic": "^31.0.0",
    "@ckeditor/ckeditor5-code-block": "^31.0.0",
    "@ckeditor/ckeditor5-dev-utils": "^25.4.5",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^25.4.5",
    "@ckeditor/ckeditor5-editor-classic": "^31.0.0",
    "@ckeditor/ckeditor5-essentials": "^31.0.0",
    "@ckeditor/ckeditor5-find-and-replace": "^31.0.0",
    "@ckeditor/ckeditor5-font": "^31.0.0",
    "@ckeditor/ckeditor5-horizontal-line": "^31.0.0",
    "@ckeditor/ckeditor5-link": "^31.0.0",
    "@ckeditor/ckeditor5-markdown-gfm": "^31.0.0",
    "@ckeditor/ckeditor5-paragraph": "^31.0.0",
    "@ckeditor/ckeditor5-remove-format": "^31.0.0",
    "@ckeditor/ckeditor5-source-editing": "^31.0.0",
    "@ckeditor/ckeditor5-special-characters": "^31.0.0",
    "@ckeditor/ckeditor5-theme-lark": "^31.0.0",
    "@ckeditor/ckeditor5-vue": "^2.0.1",
    "@element-plus/icons": "0.0.11",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/vue-fontawesome": "^3.0.0-5",
    "@kurkle/color": "^0.1.9",
    "@vueuse/core": "^6.9.2",
    "@vueuse/head": "^0.7.5",
    "axios": "^0.23.0",
    "browser-image-compression": "^1.0.17",
    "chart.js": "^3.6.0",
    "chroma-js": "^2.1.2",
    "core-js": "^3.19.1",
    "element-plus": "^1.1.0-beta.17",
    "file-saver": "^2.0.5",
    "i18n-iso-countries": "^7.0.0",
    "jspdf": "github:noeGnh/jsPDF#fix-onclone-issue",
    "jspdf-autotable": "^3.5.23",
    "jspdf-invoice-template": "^1.3.3",
    "jszip": "^3.7.1",
    "lodash": "^4.17.21",
    "memoize-one": "^6.0.0",
    "moment": "^2.29.1",
    "normalize.css": "^8.0.1",
    "path-to-regexp": "^6.2.0",
    "register-service-worker": "^1.7.1",
    "secure-ls": "^1.2.6",
    "string-sanitizer": "^2.0.2",
    "uuid": "^8.3.2",
    "validator": "^13.7.0",
    "vue": "^3.2.30",
    "vue-advanced-cropper": "^2.7.0",
    "vue-axios": "^3.4.0",
    "vue-chart-3": "^0.5.11",
    "vue-clipboard3": "^1.0.1",
    "vue-cookie-next": "^1.3.0",
    "vue-i18n": "^9.1.9",
    "vue-infinite-loading": "github:nvitius/vue-infinite-loading#next",
    "vue-router": "^4.0.12",
    "vue3-count-to": "^1.1.1",
    "vue3-json-editor": "^1.1.5",
    "vue3-smooth-scroll": "^0.8.1",
    "vuex": "^4.0.0-0",
    "vuex-persistedstate": "^4.1.0",
    "xlsx": "^0.18.4"
  }

[noeGnh]

When i set expandedOnStart to false, the error no longer appears but the editor disappears and when I inspect my html I just have this :
<div id="jsoneditor-vue-undefined" class="jsoneditor-vue"></div>

[vhoanglam]

When i set expandedOnStart to false, the error no longer appears but the editor disappears and when I inspect my html I just have this : <div id="jsoneditor-vue-undefined" class="jsoneditor-vue"></div>

i have got the same error

[timeislife]

I got the same erorr, and update on the issue?