[DevTools Bug]: Error in event handler: Error: Attempting to use a disconnected port object

Why this is a good first issue

Persistent Chrome DevTools port disconnection issue with unclear root cause.

AI Summary

The issue describes a persistent error in React DevTools when used with Chrome, involving disconnected port objects. While marked as a duplicate, it persists across Chrome versions. The fix likely requires understanding Chrome extension messaging and DevTools integration.

Issue Description

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

GitHub Labels

Type: BugStatus: UnconfirmedComponent: Developer Tools