[DevTools Bug]: console.log crashes when I enable DevTools on Chrome

[coolwind0202]

Website or app

https://github.com/coolwind0202/web/blob/23877f77e23837a007aada5be363d65290571c88/web/src/components/page/members/IndexPage/IndexPage.tsx#L27

Repro steps

For checking whenever my project will work correctly, when I run a command next dev, errors which are shown below occurred.

When I pass a first argument which is an object to console.log(), console.error(), console.warn(), I can repro the errors.
for example,

console.log([]);
console.error({});

Before a few days, the errors had never occured.
When I disable DevTools, the errors calm down.

I think, the errors may be caused by the codes which are shown below.

react/packages/react-devtools-shared/src/backend/utils.js

Line 193 in 7d9e17a

if (inputArgs[0].match(REGEXP)) {

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[valerii15298]

The same error happens in my case. Basically I cant use console.log becasue it shows the same error. I think it is a bug. Extension was updated just yesterday.

[thomaszee]

Experiencing the same issue while having the React Developer Tools extension enabled. Disabling the extension prevents the error from occurring.

[mondaychen]

Sounds like this is only on the latest extension release (4.24.5). What's your browser and its version?
Edit: NVM I can reproduce now. Looking into this.

[gaearon]

This is a bug. We’ll be releasing a fix asap.

[kyrylolvov]

Hey! I have a similar issue. I can use console log for printing string, but putting any functionality or variables causes the error

[mondaychen]

Hey! Thanks for reporting this bug and sorry for the inconvenience!

If you are experiencing this issue, there are 3 temporary solutions:

1. Turn on "Hide logs during second render in Strict Mode" in the DevTools settings (click the gear button in the Components tab)

2. remove <StrictMode> for now

3. prepend a string argument to your console.log

// This will error
console.log({foo: 'bar'});

// Change to this
console.log('', {foo: 'bar'})

For now, I've unpublished the extension on the Chrome Web Store to prevent people from installing the buggy version. We've submitted a new version with the bugfix to the Chrome Web Store, and the extension will come back online once the review process is done.

Firefox and Microsoft Edge has not been affected, and an extension without this bug is still available for Firefox and Edge.

[kyrylolvov]

Hey! Thanks for reporting this bug and sorry for the inconvenience!

If you are experiencing this issue, a temporary solution is to make sure your first argument to console.log is a string.

// This will error
console.log({foo: 'bar'});

// Change to this
console.log('', {foo: 'bar'})

For now, I've unpublished the extension on the Chrome Web Store to prevent people from installing the buggy version. We've submitted a new version with the bugfix to the Chrome Web Store, and the extension will come back online once the review process is done.

Firefox and Microsoft Edge has not been affected, and an extension without this bug is still available for Firefox and Edge.

Thank you so much!

[mondaychen]

updated my comment above with more and better workarounds!

[mondaychen]

A new version with the bug fix is on Chrome Web Store now: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi