Error Handling: Uncaught (in promise) TypeError: Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'

נכתב על ידי ליאור לביא, עודכן בתאריך 03/11/2023

Error Message in Chrome DevTools Console

Why Are We Encountering This Error Message?

One of the principles when working with Lightning web components is the use of events for communication from child components to parent components. This principle is part of the Web Components Standard implemented by the LWC architecture.

Starting from Winter '23, the Lightning Web Security data protection architecture is enabled by default for new environments, such as sandboxes and scratch orgs. As a result, transferring events between components may become disrupted, especially in cases of communication between LWC and Aura or between a Lightning modal and the LWC that created it, either due to the impact of Lightning Web Security or because it was disabled, for instance, for debugging purposes without proxy objects in Chrome DevTools.

Enabling or disabling Lightning Web Security is done as follows:

1. Open Setup.
2. In the sidebar, type the word Session in the Quick Find field and select Session Settings.
3. Under Session Settings, under the subheading Lightning Web Security, you will find a checkbox with one of the following labels, depending on your environment version:
   1. Use Lightning Web Security for Lightning web components
   2. Use Lightning Web Security for Lightning web components (GA) and Aura components (beta)

Regardless of the specific label content, this button serves as the toggle for Lightning Web Security, and enabling or disabling it may cause disruptions in LWC, Aura, and Lightning Modal activity.

It seems that Salesforce is aware of the challenge their new security model presents and recommends thorough testing using ESLint Rules for Lightning Web Security, as shown here.

Solution

To resolve the error message when dealing with communication between a Lightning Modal and LWC, we need to clear our browser's cache to reload the new security data protection mechanism settings. To do this, follow these steps:

1. In Chrome, press the F12 key on your keyboard or use the shortcut Ctrl + Shift + I to open Chrome DevTools.
2. Right-click the Reload button in the browser and select the Empty Cache and Hard Reload option.

Now, communication between components using Events should work properly.

Additional Reading

• Stack Overflow - dispatchEvent not working inside Lightning Modal
• Stack Overflow - Lightning-modal custom event not working in winter 23 release
• LWC Dev Guide - Enable Lightning Web Security in an Org
• LWC Dev Guide - When to Enable Lightning Web Security
• LWC Dev Guide - Workflow to Try Your LWCs with Lightning Web Security
• LWC Dev Guide - Using LWS-Only Features
• Trailhead - Lightning Web Security Basics
• LWC Component Reference - Lightning Modal