Firestore DocumentReferce produces "Uncaught (in promise) TypeError: cyclic object value"

[Septias]

Version

3.0.0-rc.5

Reproduction link

https://codesandbox.io/s/sharp-shape-kvudh?file=/src/App.vue:883-910

Steps to reproduce

• fix codesandbox ref error
• add firestore project
• run code

What is expected?

the array should be loaded normally... I guess... and be displayed

What is actually happening?

an error occures

---

• sorry, this issue-report is a little bit lazy 😅
• The same error occures when trying to push an objects containing a firebase.firestore.DocumentReference to an ref([]).
  [Vue warn]: Unhandled error during execution of render function
  at <ProjectSelection onVnodeMounted=fn onVnodeUnmounted=fn ref=Ref<
  Proxy { : {…}, : {…} }

at
at runtime-core.esm-bundler.js:38
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next
at <ProjectSelection onVnodeMounted=fn onVnodeUnmounted=fn ref=Ref<
Proxy { : {…}, : {…} }

at
at runtime-core.esm-bundler.js:38
Uncaught (in promise) TypeError: cyclic object value
node_modules shared.esm-bundler.js:399
render ProjectSelection.vue:3
node_modules runtime-core.esm-bundler.js:594
node_modules runtime-core.esm-bundler.js:4254
node_modules

[posva]

When reporting a bug please make sure the reproduction is runnable and boiled down (no Firebase).

The error suggests you have a cyclic reference in your object (the object references itself). Marking the data as raw with markRaw should also work but it won't be reactive. You can use a shallowRef to make it reactive at the first level only. Otherwise you will have to locate the cyclic reference and mark it as non enumerable or remove it