Issue 1:
I am trying to call setState({ flash: false }) followed by setState({ flash: 'up' }) which should remove the flash class from the DOM element and add it again, therefore triggering the css animation defined on that class (it only works the first time).

This is not working as expected, unless I introduce some timeouts. The first time the class is added, the animation is triggered. But subsequent calls to componentWillReceiveProps fail to trigger the animation. I'm not sure if this is an issue with the way React updates the DOM or an inherent limitation of CSS animations. I know React has some specialised utilities for animations but I'd rather keep the code below if there's any way to fix it.

Stat.js

import React, { Component } from 'react'
import { Link } from 'react-router'
import styles from './Stat.scss'

export default class Stat extends Component {
constructor(props) {
super(props)
this.state = {
flash: false,
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.count !== this.props.count) {
const flash = nextProps.count > this.props.count
? 'Up'
: 'Down'
this.setState({ flash: false }, () => {
this.setState({ flash })
})
}
}
render() {
const { count, name, href } = this.props
const { flash } = this.state
const flashClass = flash ? styles[`flash${flash}`] : ''
return (
<Link to={href} className="stat-link">
<div className={`stat-number ${flashClass}`}>
{count}
</div>
<div className="stat-label">{name}</div>
</Link>
)
}
}

Stat.scss

$highlight-up-color: green;
$highlight-down-color: red;

@keyframes highlight-up {
0% {
color: $highlight-up-color;
}
100% {
color: default;
}
}

@keyframes highlight-down {
0% {
color: $highlight-down-color;
}
100% {
color: default;
}
}

.flashUp {
animation: highlight-up 2s;
}
.flashDown {
animation: highlight-down 2s;
}

Issue 2:
Website or app

https://codesandbox.io/s/blissful-raman-2on7k2

Repro steps

Create a react app

yarn create react-app test-react
cd test-react
yarn start

Create .env.development file in root.

HTTPS=true
PORT=4100
BROWSER=none

Visit https://localhost:4100/ in Chrome v100.0.4896.127

Open React Devtools by inspecting page, some times it shows Components tab but in large application it does not show the Components tab. If it shows the tab the error message is sent to dev tools every second.

See error message in chrome://extensions/

This is not reproducible in Firefox v99.0.1.

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

4.24.3 (3/30/2022)

Error message (automated)

Error in event handler: Error: Attempting to use a disconnected port object

Error call stack (automated)

build/background.js:139 (lOne)

/******/ (function(modules) { // webpackBootstrap
/******/	// The module cache
/******/	var installedModules = {};
/******/
/******/	// The require function
/******/	function __webpack_require__(moduleId) {
/******/
/******/	// Check if module is in cache
/******/	if(installedModules[moduleId]) {
/******/	return installedModules[moduleId].exports;
/******/	}
/******/	// Create a new module (and put it into the cache)
/******/	var module = installedModules[moduleId] = {
/******/	i: moduleId,
/******/	l: false,
/******/	exports: {}
/******/	};
/******/
/******/	// Execute the module function
/******/	modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/	// Flag the module as loaded
/******/	module.l = true;
/******/
/******/	// Return the exports of the module
/******/	return module.exports;
/******/	}
/******/
/******/
/******/	// expose the modules object (__webpack_modules__)
/******/	__webpack_require__.m = modules;
/******/
/******/	// expose the module cache
/******/	__webpack_require__.c = installedModules;
/******/
/******/	// define getter function for harmony exports
/******/	__webpack_require__.d = function(exports, name, getter) {
/******/	if(!__webpack_require__.o(exports, name)) {
/******/	Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/	}
/******/	};
/******/
/******/	// define __esModule on exports
/******/	__webpack_require__.r = function(exports) {
/******/	if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/	Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/	}
/******/	Object.defineProperty(exports, '__esModule', { value: true });
/******/	};
/******/
/******/	// create a fake namespace object
/******/	// mode & 1: value is a module id, require it
/******/	// mode & 2: merge all properties of value into the ns
/******/	// mode & 4: return value when already ns object
/******/	// mode & 8|1: behave like require
/******/	__webpack_require__.t = function(value, mode) {
/******/	if(mode & 1) value = __webpack_require__(value);
/******/	if(mode & 8) return value;
/******/	if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/	var ns = Object.create(null);
/******/	__webpack_require__.r(ns);
/******/	Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/	if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/	return ns;
/******/	};
/******/
/******/	// getDefaultExport function for compatibility with non-harmony modules
/******/	__webpack_require__.n = function(module) {
/******/	var getter = module && module.__esModule ?
/******/	function getDefault() { return module['default']; } :
/******/	function getModuleExports() { return module; };
/******/	__webpack_require__.d(getter, 'a', getter);
/******/	return getter;
/******/	};
/******/
/******/	// Object.prototype.hasOwnProperty.call
/******/	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/	// __webpack_public_path__
/******/	__webpack_require__.p = "/build/";
/******/
/******/
/******/	// Load entry module and return exports
/******/	return __webpack_require__(__webpack_require__.s = 115);
/******/ })
/************************************************************************/
/******/ ({

/***/ 115:
/***/ (function(module, exports, __webpack_require__) {

"use strict";
/* global chrome */

const ports = {};
const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
chrome.runtime.onConnect.addListener(function (port) {
let tab = null;
let name = null;

if (isNumeric(port.name)) {
tab = port.name;
name = 'devtools';
installContentScript(+port.name);
} else {
tab = port.sender.tab.id;
name = 'content-script';
}

if (!ports[tab]) {
ports[tab] = {
devtools: null,
'content-script': null
};
}

ports[tab][name] = port;

if (ports[tab].devtools && ports[tab]['content-script']) {
doublePipe(ports[tab].devtools, ports[tab]['content-script']);
}
});

function isNumeric(str) {
return +str + '' === str;
}

function installContentScript(tabId) {
chrome.tabs.executeScript(tabId, {
file: '/build/contentScript.js'
}, function () {});
}

function doublePipe(one, two) {
one.onMessage.addListener(lOne);

function lOne(message) {
two.postMessage(message);
}

two.onMessage.addListener(lTwo);

function lTwo(message) {
one.postMessage(message);
}

function shutdown() {
one.onMessage.removeListener(lOne);
two.onMessage.removeListener(lTwo);
one.disconnect();
two.disconnect();
}

one.onDisconnect.addListener(shutdown);
two.onDisconnect.addListener(shutdown);
}

function setIconAndPopup(reactBuildType, tabId) {
chrome.browserAction.setIcon({
tabId: tabId,
path: {
'16': 'icons/16-' + reactBuildType + '.png',
'32': 'icons/32-' + reactBuildType + '.png',
'48': 'icons/48-' + reactBuildType + '.png',
'128': 'icons/128-' + reactBuildType + '.png'
}
});
chrome.browserAction.setPopup({
tabId: tabId,
popup: 'popups/' + reactBuildType + '.html'
});
}

function isRestrictedBrowserPage(url) {
return !url || new URL(url).protocol === 'chrome:';
}

function checkAndHandleRestrictedPageIfSo(tab) {
if (tab && isRestrictedBrowserPage(tab.url)) {
setIconAndPopup('restricted', tab.id);
}
} // update popup page of any existing open tabs, if they are restricted browser pages.
// we can't update for any other types (prod,dev,outdated etc)
// as the content script needs to be injected at document_start itself for those kinds of detection
// TODO: Show a different popup page(to reload current page probably) for old tabs, opened before the extension is installed

if (!IS_FIREFOX) {
chrome.tabs.query({}, tabs => tabs.forEach(checkAndHandleRestrictedPageIfSo));
chrome.tabs.onCreated.addListener((tabId, changeInfo, tab) => checkAndHandleRestrictedPageIfSo(tab));
} // Listen to URL changes on the active tab and update the DevTools icon.

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (IS_FIREFOX) {
// We don't properly detect protected URLs in Firefox at the moment.
// However we can reset the DevTools icon to its loading state when the URL changes.
// It will be updated to the correct icon by the onMessage callback below.
if (tab.active && changeInfo.status === 'loading') {
setIconAndPopup('disabled', tabId);
}
} else {
// Don't reset the icon to the loading state for Chrome or Edge.
// The onUpdated callback fires more frequently for these browsers,
// often after onMessage has been called.
checkAndHandleRestrictedPageIfSo(tab);
}
});
chrome.runtime.onMessage.addListener((request, sender) => {
var _request$payload, _ports$id;

const tab = sender.tab;

if (tab) {
const id = tab.id; // This is sent from the hook content script.
// It tells us a renderer has attached.

if (request.hasDetectedReact) {
// We use browserAction instead of pageAction because this lets us
// display a custom default popup when React is *not* detected.
// It is specified in the manifest.
setIconAndPopup(request.reactBuildType, id);
} else {
switch ((_request$payload = request.payload) === null || _request$payload === void 0 ? void 0 : _request$payload.type) {
case 'fetch-file-with-cache-complete':
case 'fetch-file-with-cache-error':
// Forward the result of fetch-in-page requests back to the extension.
const devtools = (_ports$id = ports[id]) === null || _ports$id === void 0 ? void 0 : _ports$id.devtools;

if (devtools) {
devtools.postMessage(request);
}

break;
}
}
}
});

/***/ })

/******/ });

Error component stack (automated)

No response

GitHub query string (automated)

No response