when I use vue3-json-editor I got a error TypeError: Cannot read property 'getMode' of null

[jianshe]

Cannot read property 'getMode' of null Please help me to deal with it .

Thank you. joaomede

[joaomede]

please, show your implementation

[juanfriss]

Just importing this got me the same error.

[joaomede]

Guys, @juanfriss, @jianshe, there are example implementations in the repository itself, please test the examples. https://github.com/joaomede/vue3-json-editor/blob/master/src/App.vue

https://github.com/joaomede/vue3-json-editor/blob/master/example_vite/App.vue

[linqinghao]

got the same error

[dylantientcheu]

Hello, i have been having this error too. This is a screenshot of the link to the code that shows up on the error

[joaomede]

To test with "vite", run the command "npm run dev vue" to test with "Vue3", run the command "npm run dev" Currently I haven't identified any problems in the examples in the project, please use the examples to test the cases.

[ekxs0109]

same error

[wellingtonfetchly]

Same error here just on production

This is my code

<template>
  <div>
    <Vue3JsonEditor v-model="json" mode="code" @json-change="onJsonChange" @has-error="handleError" />
    <p v-show="errorMessage" v-html="errorMessage" class="input-error" />
  </div>
</template>

<script>
import { reactive, toRefs, ref } from 'vue'
import { useField } from 'vee-validate'
import { Vue3JsonEditor } from 'vue3-json-editor'
export default {
  components: {
    Vue3JsonEditor
  },
  props: {
    name: {
      type: String,
      required: true
    }
  },
  setup (props) {
    const {
      value: inputValue,
      handleChange
    } = useField(props.name)

    const state = reactive({
      json: inputValue || {}
    })

    const errorMessage = ref(null)

    function handleError(error) {
      errorMessage.value = error 
    }

    function onJsonChange(value) {
      handleChange(value)
      errorMessage.value = null
    }

    return {
      ...toRefs(state),
      onJsonChange,
      handleError,
      errorMessage
    }
  }
}
</script>

[hakuna0829]

I've got same error. I've created new project using quasar with vue 3.0 cli and followed readme from vue3-json-editor package like above. Is there any solution?

[wellingtonfetchly]

The problem was already solved in this commit fixed gitMode null bug, but the file dist/vue3-json-editor.esm.js in node_modules is still with the old code

[hakuna0829]

Thanks @wellingtonfetchly. Then, what shall I do? Need to change it inside node_moudles?

[wellingtonfetchly]

Hey @hakuna0829, I'm not sure either, I'm having the same problem.

[wellingtonfetchly]

It worked for me to update vue version to 3.2.29

[tripflex]

Yeah same issue/error using 3.0.0 (yes i know it's outdated but can't update right now without creating a bunch of other issues).

Using 1.1.4 from npm

[tripflex]

@wellingtonfetchly is correct, it seems the vue3-json-editor.esm.prod.js file does NOT have the updated codebase.

@joaomede did something get messed up during build and push to npm that these files were not updated with latest commits? Not sure why this is marked as wont fix

[joaomede]

Fixed: https://github.com/joaomede/vue3-json-editor/commit/2112d928b28268be2412e4f68eb65cd02d09309e NPM: https://www.npmjs.com/package/vue3-json-editor/v/1.1.5