• Register
0 votes
1.9k views

Problem :

Currently I am using VueJS and Laravel for the project. Following issue started to show lately and it also comes up even in the old git branches.

Unchecked runtime.lasterror: the message port closed before a response was received.   

This error only comes up in Chrome browser.

6 5 3
7,540 points

Please log in or register to answer this question.

2 Answers

0 votes

Solution :

The issue  you are facing is most likely a mishandled asynchronous response to  the runtime.sendMessage.

To send the asynchronous response, there are two options as follows:

·   To return true from the event listener. This keeps your sendResponse function valid after the listener returns, so you can call it later also.

·   To return a Promise from the event listener, and resolve when you have your response or it can also reject it in case of the error.

When you try to send an async response however fail to use either of these mechanisms, the supplied sendResponse argument to sendMessage goes out of the scope and the result comes up exactly as the error message shown to you: your message port the message-passing apparatus is closed before the response was received.

So the bottom line is, if you ever see your extensions causing these errors just inspect closely all of your onMessage listeners. Some of them must need to start returning promises so marking them as asynchronous will be enough.

9 7 4
38,600 points
0 votes

Solution: The solution is to return true in background message listener.

Now we are showing simple example of background.js. It responses to any message from popup.js.

Code:

chrome.runtime.onMessage.addListener(function(rq, sender, sendResponse) {
    // setTimeout to simulate any callback (even from storage.sync)
    setTimeout(function() {
        sendResponse({status: true});
    }, 1);
    // return true;  // uncomment this line to fix error
});

 

This time popup.js, which sends message on popup. You'll get exceptions until you un-comment "return true" line in background.js file.

Code:

document.addEventListener("DOMContentLoaded", () => {
    chrome.extension.sendMessage({action: "ping"}, function(resp) {
        console.log(JSON.stringify(resp));
    });
});

 

In addition, showing the example manifest.json

{
  "name": "TestMessages",
  "version": "0.1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "src/popup.html"
  },
  "background": {
    "scripts": ["src/background.js"],
    "persistent": false
  },
  "permissions": [
    "alarms"
  ]
}

 

10 6 4
31,120 points

Related questions

0 votes
2 answers 1.1K views
1.1K views
Problem : I am very new to chrome extension development. The issue which I am facing is not related to accessing the chrome:// url but I do not want to edit anything there, now the issue is regarding the execution of the chrome.tabs.executeScript() which I am using ... fine when used alone in a html file. The main aim of my extension is to provide auto complete while writing in a text field.
asked Nov 21, 2019 peterlaw 6.9k points
0 votes
1 answer 1.6K views
1.6K views
Problem : I had recently uninstalled the Postgres10 and after that reinstalled the Postgres10. After that I went to run a Node, Express, React application that relies on connecting to a Postgres10 database and also communicates with it using Sequelize. Initially I was unable to ... app at in the browser. Does anyone have any idea what is going wrong? Please suggest me the solution for my error.
asked Nov 22, 2019 peterlaw 6.9k points
0 votes
1 answer 8 views
8 views
I am learning about vue js. So if anyone can help in finding interview questions, it will be great. THanks you!!!
asked Dec 14, 2020 Lucky Guy 930 points
0 votes
1 answer 26 views
26 views
Problem: Currently I am using Vue.js 2.5 or Visual Studio Code editor. But I am facing the below listed es-lint warning and I am trying to get rid of it. <template :slot="slotName" slot-scope="props" v-for="slotName in $scopedSlots?Object.keys($scopedSlots):null"> <slot ... :row-field="props.rowField"></slot> </template> I am looking for expert help who can help me in fixing my above vue.js issue.
asked Aug 27, 2020 Raphael Pacheco 4.9k points
1 vote
1 answer 149 views
149 views
Problem : I have recently started learning about Vue. Please find below my main javascript file: import Vue from 'vue' new Vue({   myel: '#app' }); Please find below my HTML file: <body>     <div id="app"></div>     <script src="{{ mix('/js/app.js') } ... do not have any thing inside a #app div where I am trying to mount Vue and still facing the template or render error? How can I fix above error?
asked Apr 17, 2020 stewart 4k points
0 votes
1 answer 2.3K views
2.3K views
Problem : I got stuck on below error I am trying to configure my SMTP mail on laravel &ldquo;Expected response code 250 but got code "530", with message "530 5.7.1 authentication required "&rdquo; Below is the configuration on .env MAIL_DRIVER=smtp MAIL_HOST=smtp.mailtrap.io ... I have tried to authenticate my SMTP on the env but I keep facing the above error so for now I am stuck on that error.
asked Feb 4, 2020 jwilliam 3.9k points
0 votes
1 answer 308 views
308 views
Problem : Currently I am using the nginx and node server to serve the update requests. I often face the gateway timeout whenever I request an update on large data. I saw below error from the nginx error logs as below : 2019/04/07 00:46:04 [error] 28599#0: *1 upstream ... time around 3-4 minutes. Please note I do not get the error for smaller updates. Please let me know how can I resolve the issue.
asked Dec 18, 2019 alecxe 7.5k points
0 votes
1 answer 311 views
311 views
Problem : I am trying to learn the pSQL. I recently moved my Laravel App from the MySQL to pSQL. But now I keep on getting below error. &ldquo;The Response content must be a string or object implementing __toString(), "boolean" given.&rdquo; I have the API that was returning my promotion before but now it only returns the above error. Can anyone suggest me solution on above error ?
asked Feb 13, 2020 mphil 2.3k points
0 votes
1 answer 223 views
223 views
Problem : I am beginner to Angular. I have recently started to use the ng serve but now I continuously get below error. &ldquo;A bad http response code (404) was received when fetching the script.&rdquo; I have already tried to do lot of research on it but still I don&rsquo;t have any solution on it. Can somebody help me in resolving the errors ?
asked Mar 5, 2020 mphil 2.3k points
0 votes
1 answer 1.7K views
1.7K views
Problem : When I try to open the terminal and enter the following command: sudo mongod The output is received as below: [initandlisten] waiting for connections on port 27017 When I try to open another terminal and enter following command: sudo mongo I will open the mongo ... never posts the data. So I think my problem lies within mongo but I am unable to figure it out. POST /info 200 120002ms
asked Dec 12, 2019 alecxe 7.5k points