question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't follow the example with Vue3

See original GitHub issue

I tried following the example with Vue3, installed with npm install vue-json-pretty@next --save here’s the code

<template>
  <div>
    <vue-json-pretty :path="'res'" :data="{ key: 'value' }"> </vue-json-pretty>
  </div>
</template>

<script>
import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css";

export default {
  components: {
    VueJsonPretty,
  },
};
</script>

It keeps throwing these errors

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')
    at Proxy.<anonymous> (vue-json-pretty.js:1:9751)
    at renderComponentRoot (runtime-core.esm-bundler.js:893:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5030:57)
    at ReactiveEffect.run (reactivity.esm-bundler.js:167:25)
    at setupRenderEffect (runtime-core.esm-bundler.js:5156:9)
    at mountComponent (runtime-core.esm-bundler.js:4939:9)
    at processComponent (runtime-core.esm-bundler.js:4897:17)
    at patch (runtime-core.esm-bundler.js:4489:21)
    at mountChildren (runtime-core.esm-bundler.js:4685:13)
    at mountElement (runtime-core.esm-bundler.js:4594:17)

and other warnings about "was accessed but not defined

Could you help please?

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
NicolasReibnitzcommented, Mar 29, 2022

For me it wasn’t really a problem with the package. I just installed the Vue2 version instead of the Vue3 version. I made a mistake. After I got the correct version everything worked as expected. But with the wrong version I got the same error as @phootip got. Which is to be expected. So I guess he also installed the wrong version.

0reactions
Kefeng2017commented, May 10, 2022

retry npm run dev, its worked for me.

Read more comments on GitHub >

github_iconTop Results From Across the Web

can't use template ref on component in vue 3 composition api
I ran into this issue today. The problem is that, when using the <script setup> pattern, none of the declared variables are returned....
Read more >
Vue 3 Composition API: Ref vs Reactive - Dan Vega
With the Options API, we have to follow some rules when defining reactive data and the Composition API is no different. You can't...
Read more >
Understanding the New Reactivity System in Vue 3 - SitePoint
In the above example, we can see that none of the three methods is working. We can't add a new property to the...
Read more >
Reactivity in Depth - Vue.js
This whenDepsChange() function has the following tasks: Track when a variable is read. E.g. when evaluating the expression A0 + A1 , both...
Read more >
A Complete Guide to Vue Lifecycle Hooks - with Vue 3 Updates
Lifecycle hooks in both Vue 2 and Vue 3 work very similarly – we still have access to the ... Take the following...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found