Console logging certain objects don't work when developing a Firefox extension using React

timetofly picture timetofly · Mar 4, 2015 · Viewed 14.3k times · Source

Console logging certain objects, like this.refs or the window object results in a TypeError: cyclic object value error in the terminal.

My code is pretty basic: I'm trying to change the html on a web page (placing a react component in it).

Main.js:

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"),
});

testing.js:

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'));

After running cfx run, the logs in the componentDidMount do not display anything in the browser console, and the cyclic object value displays (tried to log the window object to the console). Why is it having difficulties?

Answer