(newbie question) How can I fix uncaught (in promise) DOMException error

[glitchykid]

Vue version: 3.5.25
vue-router version: 4.6.3

I'm doing my very first pet-project at all. The error only occurs in Firefox. Everything works fine in Chromium, with no errors, as shown in the second screenshot. I just don't know where to look.

[Mookiepiece]

See the previous [Vue warn] warn log. Your error is fired during vue "scheduled" updating the <App /> component's DOM.

Minimize your component's <template> code, and you'll find.

[glitchykid]

I solved the problem. That warning didn't mean anything. I have a fairly large project with a lot of code (for a beginner's pet project). For some reason, Chromium-like browsers allowed me to accidentally write a semicolon in the component properties, which I didn't notice, while Firefox complained about it but didn't explain anything. Commenting out the components one by one helped. Look below and find it

<div class="flex flex-row justify-center gap-4 py-2">
  <AtomRegularButton
    :icon="FolderPlusIcon"
    :customIconSize="5"
    :without-paddings-for-icon="true"
    @click="workspacesStore.addWorkspace('New space')"
    ;
  />
  <AtomRegularButton
    :icon="PencilSquareIcon"
    :custom-icon-size="5"
    @click="
      () => {
        toggleTaskActions();
        showInputForChangeWorkspaceTitle = false;
      }
    "
    :without-paddings-for-icon="true"
  />
</div>

[aniruddhaadak80]

Hello @glitchykid,

Working with Vue reactivity system and compilers can sometimes present interesting edge cases. A few quick things to consider regarding this topic:

1. Reactivity & Refs: Remember that reactive() unwraps refs automatically, but accessing private properties of proxy classes inherently breaks proxy traps. Always interact with the standard exposed endpoints.
2. Component Lifecycle & state: If you are mixing <script setup>, ensure you aren???t trying to mutate props directly or losing reactivity when destructuring (use toRefs if needed).

I highly recommend checking out the Vue DevTools extension to inspect the component tree and verify if the state is updating as expected. Let me know if you want to dig deeper into the specific component logic.

Hope this points you in the right direction! Let me know how it goes. Happy coding!