javascriptreactjsnpm

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


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

Error in the console img

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.


Solution

  • 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