javascript - "A listener indicated an asynchronous response by returning true, but the message channel closed before a

admin管理员组

文章数量:1129621

I'm working on a React application and I use some npm modules, one of which I had to build myself. (my NPM package: ).

It is a simple modal that opens and closes with a useState().

After importing my package, I have an error in my console that appears suddenly after a few seconds without performing any actions.

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

It doesn't block my pages, nor does it prevent the proper functioning of its features, but it's an error and I think it should be fixed and maybe help other people who have the same problem.

I specify that I do not make any async request in this project. Everything is local and the few data I use are directly imported in raw. I don't know where Purplebox.js comes from as well.

I'm working on a React application and I use some npm modules, one of which I had to build myself. (my NPM package: https://www.npmjs.com/package/modale-react-rm).

It is a simple modal that opens and closes with a useState().

After importing my package, I have an error in my console that appears suddenly after a few seconds without performing any actions.

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

It doesn't block my pages, nor does it prevent the proper functioning of its features, but it's an error and I think it should be fixed and maybe help other people who have the same problem.

I specify that I do not make any async request in this project. Everything is local and the few data I use are directly imported in raw. I don't know where Purplebox.js comes from as well.

• javascript
• reactjs
• npm

Share Improve this question Follow edited Jun 26, 2022 at 3:46 Gino Mempin 29.4k3131 gold badges118118 silver badges163163 bronze badges asked Jun 3, 2022 at 19:07 Romin ManogilRomin Manogil 2,42022 gold badges66 silver badges77 bronze badges 1

• 3 I got the same message, and I'm not using react, just HTML/CSS/JavaScript. I'm also writing ordinary code, not Web extension code. I have no background script. – David Spector Commented Aug 21, 2023 at 19:27

Add a comment  | 

15 Answers 15

Sorted by: Reset to default 269

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

If you are an extension developer coming here: You need to move your cross-origin fetch request from the content script to your extensions' background page and call it from your content script. Cross-origin fetches in your content script are not allowed anymore. Don't forget the return true at the end of your request. More info and an example: 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.

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.

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.

This error is related to ad blockers or similar. Just exclude the site for this application. In my case it was AdBlock app. It kept showing this error in the console when working with LiveServer or FiveServer. It does not affect anything, but it is very annoying

This error normally occurs due to using of different Chrome extension. It can be removed by removing the AD Blocker.

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

I encountered the same issue couple of days ago, and found out that the error is caused by the runtime Message Handler. to solve it, just add a callback function as 3rd parameter to chrome.runtime.onMessage.addListener.

forgot how i found the solution, but it works for me.

// to avoid the error, the parameter [sendResponse] is necessary!
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
  // do something ...

  // this line seems meaningless but you have to invoke it to avoid error.
  sendResponse({damn: true});
});

A lot of people are saying it was from Ad Block or Ghostly extension but for me it was - "BlockSite: Block Websites & Stay Focused"

All I needed to do was turn it off, no need to uninstall it.

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.

Avast Online Security & Privacy 22.11.173 is causing the same issue.

I had the same issue on my Windows 11 machine. I added these lines at the bottom of the hosts file in the drivers/etc directory:

127.0.0.1       localhost
::1             localhost

This solved the problem for me.

I encountered the same error couple of days ago and it showed up in my console, when i was testing/debugging a jquery function in dev tools. Although It didn't block page, nor this error prevented the functioning of any features.

For me it was happening only when working on secure .aspx pages on localhost and my Login Session expires (as error doesn't happen in public pages or simple html pages) and on Re-login the error disappears. It may be bacuase of cross-origin fetch request from other scripts extesion, as sugested by Chrostip Schaejn

I had this error in a Databricks SQL warehouse connection use-case.

connection = sql.connect(
                 server_hostname = hostname_var,
                 http_path = http_path_of_sql_wh,
                 access_token = access_token
                )
cursor = connection.cursor()
cursor.execute(query)
results = cursor.fetchall()
cursor.close()
connection.close()

I was using the package from databricks import sql

Reference pypi package: databricks-sql-connector

I didn't close the connection so I was getting

"A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received"

Anyone coming here while searching for the error message while working on extension development. The issue in case was not related to cross-origin fetch since my extension is not any fetch at all... The issue was that my onMessage listener were returning true instead of false. The documentation says to return a boolean or a promise but does not clearly indicate when the boolean should be true or false... :-(

本文标签：