bug(firebase): firebase error "TypeError: Converting circular structure to JSON"

[JosephShering]

For some reason auth.json has a circular structure in it, firebase version might need to be updated

/Users/joseph/Projects/local_life/node_modules/react-redux-firebase/node_modules/firebase/auth.js:40

Full stack

TypeError: Converting circular structure to JSON
    at Object.stringify (native)
    at module.exports (/Users/joseph/Projects/local_life/node_modules/htmlescape/htmlescape.js:24:15)
    at NextScript.render (/Users/joseph/Projects/local_life/node_modules/next/dist/server/document.js:300:79)
    at /Users/joseph/Projects/local_life/node_modules/react-dom/lib/ReactCompositeComponent.js:795:21
    at measureLifeCyclePerf (/Users/joseph/Projects/local_life/node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (/Users/joseph/Projects/local_life/node_modules/react-dom/lib/ReactCompositeComponent.js:794:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (/Users/joseph/Projects/local_life/node_modules/react-dom/lib/ReactCompositeComponent.js:821:32)
    at ReactCompositeComponentWrapper.performInitialMount (/Users/joseph/Projects/local_life/node_modules/react-dom/lib/ReactCompositeComponent.js:361:30)
    at ReactCompositeComponentWrapper.mountComponent (/Users/joseph/Projects/local_life/node_modules/react-dom/lib/ReactCompositeComponent.js:257:21)
    at Object.mountComponent (/Users/joseph/Projects/local_life/node_modules/react-dom/lib/ReactReconciler.js:45:35)

/Users/joseph/Projects/local_life/node_modules/react-redux-firebase/node_modules/firebase/auth.js:40
h.send=function(a){if(a)if("string"==typeof a)this.ua.send(a);else throw Error("Only string data is supported");else this.ua.send()};h.abort=function(){this.ua.abort()};h.setRequestHeader=function(){};h.Re=function(){this.status=200;this.responseText=this.ua.responseText;Ic(this,4)};h.Sd=function(){this.status=500;this.responseText="";Ic(this,4)};h.Te=function(){this.Sd()};h.Se=function(){this.status=200;Ic(this,1)};var Ic=function(a,b){a.readyState=b;if(a.onreadystatechange)a.onreadystatechange()};var Jc=function(a,b,c){this.ef=c;this.Fe=a;this.wf=b;this.sc=0;this.lc=null};Jc.prototype.get=function(){var a;0<this.sc?(this.sc--,a=this.lc,this.lc=a.next,a.next=null):a=this.Fe();return a};Jc.prototype.put=function(a){this.wf(a);this.sc<this.ef&&(this.sc++,a.next=this.lc,this.lc=a)};var Kc=function(a){l.setTimeout(function(){throw a;},0)},Lc,Mc=function(){var a=l.MessageChannel;"undefined"===typeof a&&"undefine
Error: This operation is not supported in the environment this application is running on. "location.protocol" must be http, https or chrome-extension and web storage must be enabled.
error Command failed with exit code 1.

[prescottprue]

@JosephShering Have you tried using v2? It allows you to pass a Firebase instance meaning that you can manage the version yourself.

That said, it could have something to do with your setup. Are you using nextjs to try to do server side rendering? If so, have you set enableRedirectHandling: false? May be unrelated, but just a guess.

[prescottprue]

@JosephShering Did you get a chance to try out v2 yet? Thinking this will no longer be an issue.

The v1 syntax will continued to be updated but since the Firebase version is linked to the library in v1 (again, not the case in v2), may take time for this to be solved for v1 users.

[fetchTe]

I ran into the same exact error while using this fantastic library with Next.js and the next-redux-wrapper library. To make a long story short, this problem originate in the next-redux-wrapper and it simply will not work with v1.X or v2.X. However, all is not lost because the good news is you can easily create your own withRedux HOC and the template for doing so is laid out here.

[prescottprue]

@artisin Thanks for mentioning that, I will look into trying to work that into the docs and/or an example.

[prescottprue]

v1.*.* version have not been receiving much attention these days since 2.*.* has been in production for a while now. Going to close this for inactivity.

Open to PRs if there are still folks using v1.*.* versions.

[cmcewen]

@artisin running into the same problem as you with next.js - how did you end up solving it?

[walleXD]

@artisin I tried to use the custom redux setting but the results are the same. The error still remains.

@prescottprue the issue seems to be associated with the firebase created by nextjs on the server side. Any ideas how to get things working nextjs with our running into the TypeError: Converting circular structure to JSON issue? Also, I am on v2 too

[prescottprue]

Not sure, what versions of firebase is everyone using? If someone has a nextjs example that I could run to try to replicate, then I can look into it.

Going to reopen the issue for now. Though the original issue wasn't necessarily associated with SSR, it is similar enough.

[walleXD]

@prescottprue Here's the repo I am working on.

The project is created using learn but once you cd into the apps/web folder and can run any of the yarn commands. I hope the repo helps to pin down why the SSR breaks. Both the next-redux-wrapper and custom redux setup lead to the same issue

[walleXD]

@prescottprue The error seems to happen after the @@reactReduxFirebase/AUTH_EMPTY_CHANGE action is fired. Were you able to figure our why it's happening with nextjs?

[prescottprue]

@walleXD I was able to repro with your repo late last night, but didn't get to debugging. Going to look into it further tonight and tomorrow.

Thanks for posting the repo.

[fetchTe]

Hey @cmcewen and @walleXD → So it's been a bit since I wrote this and I'm not exactly sure how I solved the issue but there's a good chance this gist will provide you with the light you need. If not drop me a line and I'll look further down the line but this should do the trick. In the attached gist I have the redux-wrapper HOC I created (that I think solved the issue and you're free to use) as well as an example /page root dir component that uses the said redux-wrapper HOC.

https://gist.github.com/artisin/d56750d955ff4a60ed11e6a714cbd1bd

[walleXD]

@artisin Thank you very much 🙏🏼

Do you know why the next-redux-wrapper doesn't work with react-redux-firebase? In a next-redux-wrapper issue, the author mentions it's about data serialization, is that the case?

[prescottprue]

@artisin It would be awesome to point to the fix you posted in your gist in the documents somehow. At the very least, it would be good to mention the withRedux HOC from redux-wrapper.

[tky5622]

@walleXD the reason why @artisin's example works but next-redux-wrapper doesn't is that next-redux-wrapper passes state from server to client(maybe getInitialProps method) and Next.js yields "Converting circular structure to JSON" error when server sends unserialized javascript object to client. The Example does't do it, so he succeeded in using react-redux-firebase.

[tky5622]

I don't try but by serializing state with this ( to avoid Converting circular structure to JSON error), we can use react-redux-firebase with next-redux-wrapper https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value

[prescottprue]

@tky5622 Really interesting, thanks for posting. Would love to looking into making a PR for that

[optimistiks]

My investigation of this issue https://github.com/kirill-konshin/next-redux-wrapper/issues/91#issuecomment-444603647