TypeError: this.refEditor.get(...) is undefined. Editing Pinia state on component causes error.

[enderandpeter]

Environment

• OS: Windows
• NPM: 11.4.1
• Vue.js devtools: 7.7.7
• vue: 3.5.16
• pinia: 3.0.3
• Browsers: Firefox, Chrome

Description

There is a bug pertaining to either Vue.js devtools or Pinia that is observable in devtools v7 but not v6.

Expected behavior

Typically, when a Pinia store is loaded, you can select a component on the page and see a section on the right pertaining to props, setup data, and the Pinia store. Devtools lets you edit the Pinia state from this view:

Actual behavior

When trying to edit the Pinia state from this view in Firefox, an error appears reporting: TypeError: this.refEditor.get(...) is undefined:

The same error happens in Chrome, but instead it shows the name of the actual state property:

The reason why one of the screenshots shows an edited count is because editing Pinia state from the Pinia tab instead of the Components tab results in the expected behavior where there is no issue editing the Pinia state.

Reproduction steps

Fortunately this is easy to reproduce:

• Create a new project with npm create vue@latest
• Add Pinia to the project
  • This will add a counter.js store by default
• In src/components/HelloWorld.vue, optionally add the following to show the count on the page:

  <script setup>
    import { useCounterStore } from '../stores/counter'
    const counterStore = useCounterStore()
    ...
  </script>
  
  ...
  <div class="greetings">
    <p style="font-size: 4em"> The count: {{ counterStore.count }}</p>
  ...
  

• Run npm install and npm run dev
• Visit the site and try editing the Pinia store, such as by incrementing/decrementing the count state, from both the Pinia tab, which should be successful, and from the HelloWorld component in the Components tab, which should result in the error.

More Details

The browser is saying the error happens in prepare.js. Here is the prettified version of the place where the error happens:

I could be wrong, but after doing some investigating, I strongly suspect this is referring to

devtools/packages/devtools-kit/src/core/component/state/editor.ts

Line 33 in 07a637a

const item = this.refEditor.get(object)[field]

Thank you very much for any assistance.