title: Console logging certain objects don't work when developing a Firefox extension using React
body: <p>Console logging certain objects, like <code>this.refs</code> or the <code>window</code> object results in a <code>TypeError: cyclic object value</code> error in the terminal.</p>
  
  <p>My code is pretty basic: I'm trying to change the html on a web page (placing a react component in it).</p>
  
  <p>Main.js:</p>
  
  <pre><code>var pageMod = require("sdk/page-mod");
  var self = require("sdk/self");
  var { MatchPattern } = require("sdk/util/match-pattern");
  
  // Create a page mod
  // It will run a script whenever a ".org" URL is loaded
  // The script replaces the page contents with a message
  pageMod.PageMod({
    include: /.*wikipedia.org\/wiki\/.*/,
    contentScriptFile: [
          self.data.url("react-with-addons.js"),
          self.data.url("testing.js"),
      ],
      contentScriptWhen: "ready",
      // contentStyleFile: self.data.url("style.css"),
  });
  </code></pre>
  
  <p>testing.js:</p>
  
  <pre><code>var AppContainer = React.createClass({displayName: "AppContainer",
  
     componentDidMount: function() {
        console.log(this.refs.myRef);
        console.log(window);
     },
  
     render: function() {
        console.log('rendering');
        return (
           React.createElement("div", {ref: "myRef"})
           );
  
     }
  });
  
  React.render(React.createElement(AppContainer, null), document.getElementById('content'));
  </code></pre>
  
  <p>After running <code>cfx run</code>, the logs in the componentDidMount do not display anything in the browser console, and the <code>cyclic object value</code> displays (tried to log the window object to the console). Why is it having difficulties?</p>