Error: [LWC error]: The `addEventListener` method on ShadowRoot does not support any options.

[rahulgawale]

Description

Hello there! Thank you for looking into my issue. I am getting the below error in the browser console when LWC OSS app is loaded on the localhost server and browser. This error is preventing the rerendering of the components also some times it hangs up the whole web page, initially, I thought it is an issue in my code. But then I created the brand new app and I see the same error there. This issue is occurring every time the components are rerendered.

I suspect this is related to webpack, but not sure [edit: tried creating a new app with rollup that also gives the same error.]. This error keeps coming every few seconds if observed in the browser console.

I am getting this error for every custom component in my project.

Steps to Reproduce

1. Create a new LWC OSS app with the below command and say no to the simple setup. npx create-lwc-app my-app
2. Select the below options in the project setup ? Do you want to use the simple setup? No ? Package name for npm my-app ? Description Sample Lightning web component oss ? Author Your Name ? Select a package manager npm ? Select the type of app you want to create Standard web app ? Select a bundler Webpack ? Use TypeScript or JavaScript JavaScript ? Do you want a basic Express API server? Yes ? Do you want to use Edge (non-Chromium version) as browser No
3. run the command to go to the app directory. cd my-app
4. run npm run watch.
5. Open the localhost: http://localhost:3001/
6. Open the browser console
7. Check errors.

   https://webcomponents.dev/create/lwc

const your => (code) => here;

Expected Results

No error should throw on the console.

Actual Results

index.js:1 Error: [LWC error]: The `addEventListener` method on ShadowRoot does not support any options.

    at log (engine-dom.cjs.js:703:1)
    at logError (engine-dom.cjs.js:711:1)
    at ShadowRoot.value [as addEventListener] (engine-dom.cjs.js:1647:1)
    at H (utils.js:8:12)
    at Ee (observer.js:170:12)
    at e.addShadowRoot (shadow-dom-manager.js:12:9)
    at onSerialize (index.js:153:38)
    at O (rrweb-snapshot.js:605:9)
    at O (rrweb-snapshot.js:642:39)
    at O (rrweb-snapshot.js:642:39)
    at O (rrweb-snapshot.js:642:39)
    at O (rrweb-snapshot.js:642:39)
    at De.u.blockClass (rrweb-snapshot.js:740:9)
    at De (index.js:138:25)
    at Z (index.js:289:13)
    at Module.Fe (index.js:294:13)
    at Object.89645 (extensionInjectedScript.ts:40:7)
    at r (bootstrap:19:32)
    at startup:4:27
    at startup:4:47
console.<computed> @ index.js:1
log @ engine-dom.cjs.js:706
logError @ engine-dom.cjs.js:711
value @ engine-dom.cjs.js:1647
H @ utils.js:8
Ee @ observer.js:170
e.addShadowRoot @ shadow-dom-manager.js:12
onSerialize @ index.js:153
O @ rrweb-snapshot.js:605
O @ rrweb-snapshot.js:642
O @ rrweb-snapshot.js:642
O @ rrweb-snapshot.js:642
O @ rrweb-snapshot.js:642
De.u.blockClass @ rrweb-snapshot.js:740
De @ index.js:138
Z @ index.js:289
Fe @ index.js:294
89645 @ extensionInjectedScript.ts:40
r @ bootstrap:19
(anonymous) @ startup:4
(anonymous) @ startup:4
index.js:1 Error: [LWC error]: The `addEventListener` method on ShadowRoot does not support any options.
<my-greeting>
    at log (engine-dom.cjs.js:703:1)
    at logError (engine-dom.cjs.js:711:1)
    at ShadowRoot.value [as addEventListener] (engine-dom.cjs.js:1647:1)
    at H (utils.js:8:12)
    at Ee (observer.js:170:12)
    at e.addShadowRoot (shadow-dom-manager.js:12:9)
    at onSerialize (index.js:153:38)
    at O (rrweb-snapshot.js:605:9)
    at O (rrweb-snapshot.js:642:39)
    at O (rrweb-snapshot.js:651:43)
    at O (rrweb-snapshot.js:642:39)
    at O (rrweb-snapshot.js:642:39)
    at O (rrweb-snapshot.js:642:39)
    at O (rrweb-snapshot.js:642:39)
    at De.u.blockClass (rrweb-snapshot.js:740:9)
    at De (index.js:138:25)
    at Z (index.js:289:13)
    at Module.Fe (index.js:294:13)
    at Object.89645 (extensionInjectedScript.ts:40:7)
    at r (bootstrap:19:32)
    at startup:4:27
    at startup:4:47
console.<computed> @ index.js:1
log @ engine-dom.cjs.js:706
logError @ engine-dom.cjs.js:711
value @ engine-dom.cjs.js:1647
H @ utils.js:8
Ee @ observer.js:170
e.addShadowRoot @ shadow-dom-manager.js:12
onSerialize @ index.js:153
O @ rrweb-snapshot.js:605
O @ rrweb-snapshot.js:642
O @ rrweb-snapshot.js:651
O @ rrweb-snapshot.js:642
O @ rrweb-snapshot.js:642
O @ rrweb-snapshot.js:642
O @ rrweb-snapshot.js:642
De.u.blockClass @ rrweb-snapshot.js:740
De @ index.js:138
Z @ index.js:289
Fe @ index.js:294
89645 @ extensionInjectedScript.ts:40
r @ bootstrap:19
(anonymous) @ startup:4
(anonymous) @ startup:4

Browsers Affected

Version

Node : v14.17.6 package.json versions < 0.17: "lwc-engine": "0.16.8" versions >= 0.17: "lwc-engine": "0.17.2"

• LWC: x.x.x

Possible Solution I think this is occurring because of the vulnerabilities in the webpack.

Additional context/Screenshots I found some vulnerabilities after installation.

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

added 1741 packages, and audited 1800 packages in 21s

134 packages are looking for funding
  run `npm fund` for details

20 vulnerabilities (12 moderate, 6 high, 2 critical)

To address issues that do not require attention, run:
  npm audit fix

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
---------------------------------------------------------------------
For feature requests, bug reports, or your own contributions visit:
https://github.com/muenzpraeger/create-lwc-app

Or follow @muenzpraeger on Twitter.

[nolanlawson]

Thanks for reporting, but I can't seem to reproduce using the steps provided:

Which OS are you using? I'm on a Mac.

[rahulgawale]

@nolanlawson I am on Windows 11.

[pmdartus]

I am suspecting the issue is caused by one of your extensions. The first frame of the call stack originates from extensionInjectedScript.ts, which invokes the rrweb library that does a full DOM traversal and attempts to attach an event listener with option. This is currently prohibited with synthetic shadow DOM.

Could you load the page again in a guest session to verify this?

[nolanlawson]

Closing as this seems to be a browser extension issue. Please reopen if I'm mistaken.