React: ReactDOM: TypeError: console.debug is not a function

[KevinNorth]

I am experiencing the following bug using React 15.4.0 and React-DOM 15.4.0.

When I run my team's test suite, which uses Mocha 2.5.3, the following exception is thrown and Mocha crashes without running the tests:

TypeError: console.debug is not a function
    at Object.<anonymous> (<our project's directory>/node_modules/react-dom/lib/ReactDOM.js:73:17)
    at Module._compile (module.js:573:32)
    at Module._extensions..js (module.js:582:10)
    at Object.require.extensions.(anonymous function) [as .js] (<our project's directory>/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (<our project's directory>/node_modules/react-dom/index.js:3:18)
    at Module._compile (module.js:573:32)
    at Module._extensions..js (module.js:582:10)
    at Object.require.extensions.(anonymous function) [as .js] (/<our project's directory>/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (<our project's directory>/node_modules/react-widgets/lib/util/compat.js:7:17)
    at Module._compile (module.js:573:32)
    at Module._extensions..js (module.js:582:10)
    at Object.require.extensions.(anonymous function) [as .js] (<our project's directory>/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (<our project's directory>/node_modules/react-widgets/lib/Popup.js:37:15)
    at Module._compile (module.js:573:32)
    at Module._extensions..js (module.js:582:10)
    at Object.require.extensions.(anonymous function) [as .js] (<our project's directory>/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (<our project's directory>/node_modules/react-widgets/lib/DropdownList.js:45:14)
    at Module._compile (module.js:573:32)
    at Module._extensions..js (module.js:582:10)
    at Object.require.extensions.(anonymous function) [as .js] (<our project's directory>/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (<one of our own source code files>)
    at Module._compile (module.js:573:32)
    at loader (<our project's directory>/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (<our project's directory>/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (<our project's directory>/index.js:xx:xx)
    at Module._compile (module.js:573:32)
    at loader (<our project's directory>/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (<our project's directory>/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (<one of our own source code files>)
    at Module._compile (module.js:573:32)
    at loader (<our project's directory>/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (<our project's directory>/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (<one of our own source code files>)
    at Module._compile (module.js:573:32)
    at loader (<our project's directory>/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (<our project's directory>/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (<our project's directory>/src/routes.js:1:1)
    at Module._compile (module.js:573:32)
    at loader (<our project's directory>/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (<our project's directory>/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (<one of our own test files>)
    at Module._compile (module.js:573:32)
    at loader (<our project's directory>/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (<our project's directory>node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at <our project's directory>node_modules/mocha/lib/mocha.js:220:27
    at Array.forEach (native)
    at Mocha.loadFiles (<our project's directory>/node_modules/mocha/lib/mocha.js:217:14)
    at Mocha.run (<our project's directory>/node_modules/mocha/lib/mocha.js:469:10)
    at Object.<anonymous> (<our project's directory>/node_modules/mocha/bin/_mocha:404:18)
    at Module._compile (module.js:573:32)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.runMain (module.js:607:10)
    at run (bootstrap_node.js:420:7)
    at startup (bootstrap_node.js:139:9)
    at bootstrap_node.js:535:3

Looking at the stack trace, the error is coming from react-dom/lib/ReactDOM.js on line 73. This is the code at and surrounding that line:

    // First check if devtools is not installed
    if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
      // If we're in Chrome or Firefox, provide a download link if not installed.
      if (navigator.userAgent.indexOf('Chrome') > -1 && navigator.userAgent.indexOf('Edge') === -1 || navigator.userAgent.indexOf('Firefox') > -1) {
        // Firefox does not have the issue with devtools loaded over file://
        var showFileUrlMessage = window.location.protocol.indexOf('http') === -1 && navigator.userAgent.indexOf('Firefox') === -1;
        console.debug('Download the React DevTools ' + (showFileUrlMessage ? 'and use an HTTP server (instead of a file: URL) ' : '') + 'for a better development experience: ' + 'https://fb.me/react-devtools');
      }
    }

This code calls console.debug(). The exception message makes it seem like console.debug is not a function that Node.js believes exists, and in fact, the documentation for Node.js' console shows that it has no debug() function.

Interestingly, running my team's project works fine - the only time I see this exception is when I try to run my test suite.

[jarrydfillmore]

Would also like to know the answer..

[KevinNorth]

I think changing line 83 of https://github.com/facebook/react/blob/master/src/renderers/dom/ReactDOM.js#L83 from console.debug to console.log or console.warn would be enough to resolve this issue.

[gaearon]

We could change it to log but you'd still see that message in your tests.

The question, I think, is why does your test suite pretend to be Chrome/Firefox? I just tried navigator.userAgent in jsdom, and it is Node.js (darwin; U; rv:v6.3.1) AppleWebKit/537.36 (KHTML, like Gecko) by default. Do you intentionally set it to Chrome/Firefox?

[KevinNorth]

You're right, I am changing the user agent and pretending to be Chrome in my test suite. I was doing so because of this workaround in Radium to suppress a warning that was showing up in our test output: https://github.com/FormidableLabs/radium/tree/master/docs/faq#how-can-i-get-rid-of-useragent-warnings-in-tests

So, in some code that was run before any of our tests, I had added:

// Supresses a warning from Radium.
// See https://github.com/FormidableLabs/radium/tree/master/docs/faq#how-can-i-get-rid-of-useragent-warnings-in-tests
global.navigator = { userAgent: 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2454.85 Safari/537.36' };

Removing those lines cleared up the exception I was getting.

Another solution I found was to define console.debug in the code that ran before our test suite. Adding this:

// Supresses a warning from Radium.
// See https://github.com/FormidableLabs/radium/tree/master/docs/faq#how-can-i-get-rid-of-useragent-warnings-in-tests
global.navigator = { userAgent: 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2454.85 Safari/537.36' };

global.console.debug = () => {};

Also got rid of the exception.

Thank you for your response! I appreciate the help working through this issue.

[gaearon]

I think adding console.debug() seems reasonable since you "pretend" to be a browser that supports it. I'm going to close this out but feel free to continue the discussion!

[KevinNorth]

Your advice solved my problem, so I don't think there's any need to discuss this issue any more. Thanks again for your help! :)