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?