“侦听器通过返回 true 指示异步响应，但在接收到响应之前消息通道关闭”，这是什么意思？

我正在开发一个 React 应用程序，我使用了一些 npm 模块，其中一个是我自己构建的。(我的 NPM 套餐: Https://www.npmjs.com/package/modale-react-rm.

它是一个简单的模式，用 useState()打开和关闭。

导入包之后，控制台中出现了一个错误，该错误在几秒钟后突然出现，没有执行任何操作。


Uncaught (in promise)                                                                  localhost/:1


>{message: 'A listener indicated an asynchronous response by r…age channel closed before a response was received'}
message: "A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received"
>[[Prototype]]: Object
>constructor: ƒ ()
>[[Prototype]]: Object


/* sometimes there are specific elements in addition but I could not check when they appear and when not */


Promise.then (asynchrone)
(anonyme)              @content_script_bundle.js:108
handleNewFeatures      @content_script_bundle.js:101
handleUpdatedNodes     @content_script_bundle.js:101
(anonyme)              @content_script_bundle.js:101
childlist(asynchrone)
0                      @purplebox.js:1
(anonyme)              @purplebox.js:1
v                      @purplebox.js:1

Error in the console img

它不会屏蔽我的页面，也不会妨碍其功能的正常运行，但它是一个错误，我认为它应该得到修复，也许可以帮助其他有同样问题的人。

我指定在这个项目中不发出任何异步请求。所有内容都是本地的，我使用的少量数据都是直接导入原始数据的。 我也不知道 紫盒是从哪里来的

98073 次浏览
小开
最佳答案

This issue is a cross-origin request issue and it is caused by various Chrome Extensions. I had this too in my Angular app and after testing it in the incognito mode, the error didn't show up anymore.

More info: Google Forum

/Edit: If you are an extension developer coming here: You need to return true when fetching data from cross-origins. More info: Chromium Project

小开

In my case, it is caused by Ghostery extension, if this error appears in your local host, you need to add it to the trusted sites list of Ghostery and the error will be gone.

enter image description here

小开

It has been discussed in the webextension-polyfill library, which is used by many extensions (including Ghostery). There was a recent change in Chrome that introduced to the error message.

For projects that are using the polyfill, I would expect the warning to go away if a fix is merged. Note that the polyfill library is used, since only Firefox implements the new promised-based runtime.onMessage, while Chrome still enforces the original callback-style API.

Note that there is an open pull request in the webextension-polyfill library already. It has not been merged, but according to my tests, it solves the problem. So, if you need a quick fix for a project that uses the library internally, you can manually apply the patch with patch-package. For instance, this is how such a change would look like in Ghostery.

小开

The background script (service worker in MV3) could be going to inactive state without sending a response back to a message it received from a content script.

Example:

Background script:

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
// ... handle message
return true // Error message says you already return true
})

Most MV3 APIs are asynchronous and can return promises when it makes sense to do so. (In some cases, like event listeners (e.g.: chrome.tabs.onRemoved), returning a promise wouldn't make sense). Reading a response back however can be done using callbacks or promise-style.

Content script: method 1 to read response:

chrome.runtime.sendMessage('ping', (response) => { /* read response */ })

Content script: method 2 to read response:

chrome.runtime.sendMessage('ping').then(response => { /* read response */ })

The issue you are facing is this: background script does not invoke sendResponse() for one/more messages it received and went inactive (causing the message channel to close). However, the content script that sent the message is waiting for the response.

Please check your message senders & handlers.

小开

I had the same error. I removed the Tampermonkey extension and tweaked my AdBlock extension and then it worked for me.

小开

I had the same error on my react app when i introduced an infinite loop through useEffect, the thing is that you most likely won't see too much change in your app or problem. For me it even helped reload some state for functions that i was still to write but over time it will introduce bugs and performance issues.


提交答案