WhatsApp web portal doesn't open when our extension is enabled.

[PragneshAgola]

There is a problem, WhatsApp web portal doesn't open when our extension is enabled.

There is one more issue continuously below error

• Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
• Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forwardRef')

Find attached screenshot for reference.

[luizsergiorf]

There is a problem, WhatsApp web portal doesn't open when our extension is enabled.

There is one more issue continuously below error

• Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
• Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forwardRef')

Find attached screenshot for reference.

Hello, how are you?

I saw this error in the morning, just run the npm update command in the terminal to update the dependencies and recompile the code.

Regards

[luizsergiorf]

Hello, I managed to solve the problem on Windows, now on Linux, the problem continues.

[cstej]

Hello, I managed to solve the problem on Windows, now on Linux, the problem continues.

how did you solve it in Windows, I have updated my dependency but still getting the same error. any solution?

[PragneshAgola]

@luizsergiorf or @cstej can you guide me how to update dependency because I tried it's not working. and I use mac os have any solution?

[cstej]

@luizsergiorf or @cstej can you guide me how to update dependency because I tried it's not working. and I use mac os have any solution?

you can update dependency using npm update if using npm or if you are using pnpm then run pnpm up --latest but I checked this problem this is not specific to window or Linux the issue arises when injecting wa-js, which is required for sending WhatsApp messages."

[PragneshAgola]

@luizsergiorf or @cstej can you guide me how to update dependency because I tried it's not working. and I use mac os have any solution?

you can update dependency using npm update if using npm or if you are using pnpm then run pnpm up --latest but I checked this problem this is not specific to window or Linux the issue arises when injecting wa-js, which is required for sending WhatsApp messages."

Yes Tejendra Kumar you are right and actually not an issue in @wppconnect/wa-js but issue in it's dependencies package @wppconnect/wa-version because it has some changes a day and 2-3 hours ago and it's both packages collaborators are same. And may possibility that do some changes by whatsApp for security reason so this package missing some requirement with whatsApp connection.

If you will get any solution, please inform me.

[luizsergiorf]

Hello folks,

Yesterday by coincidence after giving an npm update, it temporarily resolved. I noticed that it's very random, sometimes the tool opens without errors and sometimes it doesn't. I was thinking, could it be that it's injecting the wa-js without having fully loaded the page. I'm going to do some more tests today, if I find a solution I'll let you know.

I'm going to post this error in the wa-js project and check if anyone has experienced this.

[luizsergiorf]

Folks, it's still not the definitive solution, because it still crashes sometimes when the page loads, but I managed to improve it. change DOMContentLoaded to load in content_script.ts.

if (document.readyState === 'complete') {
   injectScript('js/wa-js.js');
} else {
   window.addEventListener('load', () => {
     injectScript('js/wa-js.js');
   });
}

[PragneshAgola]

Folks, it's still not the definitive solution, because it still crashes sometimes when the page loads, but I managed to improve it. change DOMContentLoaded to load in content_script.ts.

if (document.readyState === 'complete') {
   injectScript('js/wa-js.js');
} else {
   window.addEventListener('load', () => {
     injectScript('js/wa-js.js');
   });
}

I tried your solution but doesn't work means whatsApp web chat does not open properly but whatsApp message sent successfully. Have any idea or it's possible that this actually package issue or whatsApp security changes ?

[luizsergiorf]

Folks, it's still not the definitive solution, because it still crashes sometimes when the page loads, but I managed to improve it. change DOMContentLoaded to load in content_script.ts.

if (document.readyState === 'complete') {
   injectScript('js/wa-js.js');
} else {
   window.addEventListener('load', () => {
     injectScript('js/wa-js.js');
   });
}

I tried your solution but doesn't work means whatsApp web chat does not open properly but whatsApp message sent successfully. Have any idea or it's possible that this actually package issue or whatsApp security changes ?

Did you reinstall and clear caches? Load the page with ctrl+f5 until you can load WhatsApp. Get it working, it's not a permanent solution, but at least I got it running today.

[PragneshAgola]

Folks, it's still not the definitive solution, because it still crashes sometimes when the page loads, but I managed to improve it. change DOMContentLoaded to load in content_script.ts.

if (document.readyState === 'complete') {
   injectScript('js/wa-js.js');
} else {
   window.addEventListener('load', () => {
     injectScript('js/wa-js.js');
   });
}

I tried your solution but doesn't work means whatsApp web chat does not open properly but whatsApp message sent successfully. Have any idea or it's possible that this actually package issue or whatsApp security changes ?

Did you reinstall and clear caches? Load the page with ctrl+f5 until you can load WhatsApp. Get it working, it's not a permanent solution, but at least I got it running today.

Yes, but face same issue whatsApp portal doesn't open and got this error vendor1~app.faf9096ea5e5e9ae7ce7.js:30 Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

[PragneshAgola]

@luizsergiorf & @cstej did you get any solutions?

[luizsergiorf]

Hello,

I couldn't find the definitive solution. I am using my temporary solution that I informed you about. If you want to download my project and use it, I made some changes. I haven't done the pull yet because, unfortunately, this solution doesn't resolve it definitively. To make it work, I keep updating the page until it functions without the error. I apologize for not being able to help further.

[PragneshAgola]

Hello,

I couldn't find the definitive solution. I am using my temporary solution that I informed you about. If you want to download my project and use it, I made some changes. I haven't done the pull yet because, unfortunately, this solution doesn't resolve it definitively. To make it work, I keep updating the page until it functions without the error. I apologize for not being able to help further.

Yes I am use your project , Can you guide me which change have you done?

[luizsergiorf]

Hello, I couldn't find the definitive solution. I am using my temporary solution that I informed you about. If you want to download my project and use it, I made some changes. I haven't done the pull yet because, unfortunately, this solution doesn't resolve it definitively. To make it work, I keep updating the page until it functions without the error. I apologize for not being able to help further.

Yes I am use your project , Can you guide me which change have you done?

I added an improvement to avoid WhatsApp blocking when setting the time interval between messages. I set this value as the minimum, and the maximum will be twice that; for example, if set to 6, it will be from 6 to 12 seconds. I also included enhancements in case the contact does not exist, providing the correct WhatsApp number in the event of number editing or digit addition. I made the handleSubmit asynchronous to speed up the process. Essentially, these are the changes; if you want more details, please check my commits.

[PragneshAgola]

Thanks @luizsergiorf , I have also changed according to you and now we can send bulk messages with wa number identity validation. But still there is a problem, whatsApp web page appears blank. have any idea how solve it?

[luizsergiorf]

Good morning, @PragneshAgola. This problem is quite complicated to solve and is related to script injection. I haven't tried new ways to resolve it because, for me, the current solution is working. On my computer it behaves similar to yours when I open it for the first time, but when I execute Ctrl + Shift + R, WhatsApp loads without error. On the second or third attempt, it opens without any issues. As soon as I have more time, I will try other injection methods, or if someone manages to solve this problem, they can share a solution with us.

[marcosvrs]

@luizsergiorf @PragneshAgola Thank you very much for your support and open discussion about it. I appreciate how our community is growing!

I have found a workaround to it. I don't know how long it will work, since it's based on a class added to the html element, and it might change at any time. But at least we can work with it until either we find a better solution or wppconnect provides us another approach to inject.

That said, please take some time to review and test the code here: https://github.com/marcosvrs/WTF/pull/28

[PragneshAgola]

@luizsergiorf @PragneshAgola Thank you very much for your support and open discussion about it. I appreciate how our community is growing!

I have found a workaround to it. I don't know how long it will work, since it's based on a class added to the html element, and it might change at any time. But at least we can work with it until either we find a better solution or wppconnect provides us another approach to inject.

That said, please take some time to review and test the code here: #28

@marcosvrs & @luizsergiorf Thanks for your valuable time and support, I already solved this problem and took the help of this html element class name wf-loading and it is working fine now. This solution will works until there nothing changes in html class element by WhatsApp.

Here, use below mentioned function getElementWithClass() instead of DOMContentLoaded to inject wa-js in content_script.ts,

function getElementWithClass() {
  // Try to get the element
  const element = document.getElementsByClassName("wf-loading");

  // Check if the element is found
  if (element.length > 0) {
    // If found, do something with the element
    injectScript("js/wa-js.js");
  } else {
    // If not found, try again after a certain interval (e.g., 500 milliseconds)
    setTimeout(getElementWithClass, 1000);
  }
}
// Call the function to start looking for the element
getElementWithClass();

[luizsergiorf]

Hello folks,

I appreciate @marcosvrs and @PragneshAgola very much. Congratulations to everyone for the work!

I was wondering if it would be valid to inject this when manually opening the extension in Google Chrome. This way, we would only need to wait for WhatsApp Web to load completely. What do you think?

[marcosvrs]

@luizsergiorf @PragneshAgola Thank you very much for your support and open discussion about it. I appreciate how our community is growing! I have found a workaround to it. I don't know how long it will work, since it's based on a class added to the html element, and it might change at any time. But at least we can work with it until either we find a better solution or wppconnect provides us another approach to inject. That said, please take some time to review and test the code here: #28

@marcosvrs & @luizsergiorf Thanks for your valuable time and support, I already solved this problem and took the help of this html element class name wf-loading and it is working fine now. This solution will works until there nothing changes in html class element by WhatsApp.

Here, use below mentioned function getElementWithClass() instead of DOMContentLoaded to inject wa-js in content_script.ts,

function getElementWithClass() {
  // Try to get the element
  const element = document.getElementsByClassName("wf-loading");

  // Check if the element is found
  if (element.length > 0) {
    // If found, do something with the element
    injectScript("js/wa-js.js");
  } else {
    // If not found, try again after a certain interval (e.g., 500 milliseconds)
    setTimeout(getElementWithClass, 1000);
  }
}
// Call the function to start looking for the element
getElementWithClass();

@PragneshAgola Thanks for the suggestion! Although, I still prefer to handle it via MutationObserver since it's more efficient as it's reactive to the class attribute changes and more performance-friendly.

Hello folks,

I appreciate @marcosvrs and @PragneshAgola very much. Congratulations to everyone for the work!

I was wondering if it would be valid to inject this when manually opening the extension in Google Chrome. This way, we would only need to wait for WhatsApp Web to load completely. What do you think?

@luizsergiorf It's indeed an alternative instead of looking for the class. I can add this behaviour in parallel to the class. Although, I'm concerned about relying on the user not opening the extension pop-up before the WhatsApp web is fully loaded. Users are always unpredictable 😄 I might stick to only looking for the class for now, and if there is no final solution from wppconnect, we use this second method as a fallback.

[PatelBassar]

@PragneshAgola @marcosvrs @luizsergiorf anyone of you can updated zip file to upload on unpacked extension part. I dont know how to compile this code. TIA

[marcosvrs]

@PatelBassar it got deployed 😉

[marcosvrs]

I will be tracking the issue https://github.com/wppconnect-team/wa-js/issues/1521 to check when there is a final solution provided by the library. So far, we will continue with the workaround.

Please let me know if there is any issue with the workaround provided.

[Himanshusha673]

@marcosvrs @luizsergiorf @PragneshAgola i am unable to send messages can anyone please help me i am new in chrome extension development, when web page loads i am still encounter this issue "web.whatsapp.com/:1 Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist." and while sending mesaage to this number getting this error 3izZRR_lgDc.js?_nc_x=Ij3Wp8lg5Kz:70 ErrorUtils caught an error:

Converting to a string will drop content data. Hash="undefined" Translation="Block {contact_name}" Content="{"key":null,"ref":null,"props":{"contact":{"id":"919315118970@c.us","pushname":"Jai Shree Ram","type":"in","verifiedName":"Jai Shree Ram","isBusiness":true,"isEnterprise":false,"isSmb":true,"verifiedLevel":0,"privacyMode":null,"isContactSyncCompleted" (type=object,Object)

Subsequent non-fatal errors won't be logged; see https://fburl.com/debugjs.