Async resource trigger causes Failed to execute 'postMessage' on 'MessagePort' error

💬 Queries and Resources
1

I have a problem calling an async resource via Javascript code. The function is called like so:

const newNumber = await addNewNumber.trigger({
    additionalScope: {
      accountSid: twilio_account_sid,
      phoneNumber: selectedNumber,
      addressSid: twilio_address_sid,
      bundleSid: twilio_bundle_sid,
      voiceUrl: TWILIO_PHONE_EXCHANGE_URL,
    },
  });

and is throwing the error:

▶
addContact failed (0.002s):Failed to execute 'postMessage' on 'MessagePort': async(...R)=>{const I=p.recordChildNode({type:"apiCall",method:O,pluginId:t});o.call({method:"runtimeToHostTrig...<omitted>...}} could not be cloned.
addContact

from addContact response(addContact)

▶
in addContact.trigger()(addContact)
environment: "production"

▶
in addContactHandler.trigger()(addContact)
additionalScope: undefined
triggeredById: "contactForm"
environment: "production"
in contactForm submit event handler(contactForm)
from user interaction

interestingly, the resource executes successfully, however the error is caught in a catch block causing the script to fail unnecessarily.

This seems to be an internal Retool issue, however I am wondering if there is perhaps something from my side I can do.

3

@Adam_Griffiths hello! :waving_hand:

I'm curious if you're returning your newNumber constant anywhere in your script below where you define it? If not, you need to drop the const assignment and just trigger the addNewNumber query like so:

await addNewNumber.trigger({
    additionalScope: {
      accountSid: twilio_account_sid,
      phoneNumber: selectedNumber,
      addressSid: twilio_address_sid,
      bundleSid: twilio_bundle_sid,
      voiceUrl: TWILIO_PHONE_EXCHANGE_URL,
    },
  });

Is that also all the script handles? Just wondering if awaiting the response is necessary or not, which could also be dropped if no other triggering methods depends on its response.

Also a good thing to check is whether or not you are assigning and using additionalScope variables that match the keys in your script exactly -- reusing named keys like accountSid, phoneNumber, etc. cased as is to ensure values for provided scopes are passed correctly.

Hopefully this helps you find your solution! :folded_hands:

1 Like
4

I typically see this error when JS scripts mistakenly return a Promise object. My instinct is that we probably need to take a look and what addContact is returning. Are you able to share the entire block?

1 Like
5 
const { id: company_id, twilio_account_sid, twilio_address_sid, twilio_bundle_sid } =
  companiesTable.selectedRow;

const contact = {
  twilio_phone_sid: null,
  name: contactForm.data.name,
  phone: contactForm.data.phone,
  email: contactForm.data.email,
  company_id: company_id,
  twilio_phone_number: contactForm.data.phone,
};

try {
  if (enableTwilioSwitch.value) {
    if (!twilio_account_sid) {
      throw new Error("Company has no associated Twilio subaccount");
    }

    if (twilioContainer.currentViewKey === "search") {
      const selectedNumber = twilioSearchForm.data.phoneSelect
      
      if (!selectedNumber) {
        throw new Error("No Twilio phone number selected")
      }
      
      const newNumber = await addNewNumber.trigger({
        additionalScope: {
          accountSid: twilio_account_sid,
          phoneNumber: selectedNumber,
          addressSid: twilio_address_sid,
          bundleSid: twilio_bundle_sid,
          voiceUrl: TWILIO_PHONE_EXCHANGE_URL,
        },
      });

      if (!newNumber || !newNumber.sid)
        throw new Error("Failed to add new number to Twilio subaccount");

      contact.twilio_phone_sid = newNumber.sid;
      contact.twilio_phone_number = phoneSelect
    } else if (twilioContainer.currentViewKey === "manual") {
      const {phoneNumber, phoneSID} = twilioManualForm.data
      
      if (!phoneNumber || !phoneSID) {
        throw new Error("Missing phone number or SID for manual Twilio entry")
      }
      
      contact.twilio_phone_sid = phoneSID;
      contact.twilio_phone_number = phoneNumber
    }
  }

  const newContact = await addContact.trigger({
    additionalScope: {
      data: contact,
    },
  });

  return newContact;
} catch (error) {
  console.error(error);
  utils.showNotification({
    title: "Error creating contact",
    description: error?.message || error,
    notificationType: "error",
  });
}

the addNewNumber resource is triggered and a new number is added successfully added into the Twilio account so I believe there is no issue with variables passed to the additional scope.

Above is the code block that executes the failing resource trigger.