TypeError: Cannot read from private field

Vue version

3.2.47

Link to minimal reproduction

https://github.com/skywarth/country-routing-algorithm-demo-vue

Steps to reproduce

You may easily reproduce from my demo project

npm install npm run dev

Then check the console.

The problem is basically assigning class instance to a data attribute (reactive), whereas the class has private attributes. After that try to call a method on the class instance which accesses the private attribute.


export default {
  data(){
    return {
      someInstance:null,
    }
  },

  methods:{
    trigger(){
      return this.someInstance.foo();
    },

  },
  mounted(){
    this.someInstance= new ClassWithPrivates();

  }
}

And the class in question is:

class ClassWithPrivates{
 #hidden=['test'];
foo(){
return this.#hidden;
}
}

What is expected?

I expect the class instance assigned data attribute to be reactive, and allow me to access the class instance across the component with impunity.

What is actually happening?

I get TypeError: Cannot read from private field with the following stack trace:

unk-5HVLWUKC.js?v=20d5ffab:33 Uncaught (in promise) TypeError: Cannot read from private field
    at __accessCheck (chunk-5HVLWUKC.js?v=20d5ffab:33:11)
    at __privateGet (chunk-5HVLWUKC.js?v=20d5ffab:36:3)
    at get graphInstance (graph-controller.js:16:16)
    at Reflect.get (<anonymous>)
    at Object.get2 [as get] (reactivity.esm-bundler.js:492:29)
    at Proxy.mounted (MapPage.vue:84:30)
    at runtime-core.esm-bundler.js:2757:40
    at callWithErrorHandling (runtime-core.esm-bundler.js:173:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:182:21)
    at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2731:29)
_

Indicated get graphInstance() accessor is:

get graphInstance() {
        return this.#graphInstance;
    }

System Info

System:
    OS: Linux 5.15 Ubuntu [REDACTED] LTS
    CPU: [REDACTED]
    Memory: [REDACTED]
    Container: Yes
    Shell: [REDACTED] - /bin/bash
  Binaries:
    Node: 18.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Firefox: 112.0.2
  npmPackages:
    vue: ^3.2.47 => 3.2.47

Any additional comments?

I ran into this bug while preparing a demo project using vue, for my library that is still under development: https://github.com/skywarth/country-routing-algorithm

I just started using Vue, it is completely possible I'm making a newbie mistake here. Thank you for your understanding.

vuejs / core