(regression) TypeError: Cannot set property loading of [object Object] which has only a getter

[Yberion]

Describe the bug

Hello, on my Angular application I'm using this lib https://github.com/justinribeiro/lite-youtube.

When testing a component that uses this lib with Vitest (I import the lib in the test setup) and happy-dom, on versions before 13.1.0 I had no problem rendering the Angular component on happy-dom.

Since 13.1.0 I'm getting the following error:

TypeError: Cannot set property loading of [object Object] which has only a getter
 ❯ LiteYTEmbed.initImagePlaceholder ../../../../../node_modules/.pnpm/@justinribeiro+lite-youtube@1.5.0/node_modules/@justinribeiro/lite-youtube/lite-youtube.js:227:41
 ❯ LiteYTEmbed.setupComponent ../../../../../node_modules/.pnpm/@justinribeiro+lite-youtube@1.5.0/node_modules/@justinribeiro/lite-youtube/lite-youtube.js:164:14
 ❯ LiteYTEmbed.attributeChangedCallback ../../../../../node_modules/.pnpm/@justinribeiro+lite-youtube@1.5.0/node_modules/@justinribeiro/lite-youtube/lite-youtube.js:178:26
 ❯ _ZoneDelegate.invoke ../../../../../node_modules/.pnpm/zone.js@0.14.3/node_modules/zone.js/bundles/zone.umd.js:411:30
 ❯ Zone.runGuarded ../../../../../node_modules/.pnpm/zone.js@0.14.3/node_modules/zone.js/bundles/zone.umd.js:176:51
 ❯ LiteYTEmbed.<anonymous> ../../../../../node_modules/.pnpm/zone.js@0.14.3/node_modules/zone.js/bundles/zone.umd.js:159:33
 ❯ HTMLElementNamedNodeMap.setNamedItem ../../../../../node_modules/.pnpm/happy-dom@13.1.4/node_modules/happy-dom/lib/nodes/element/ElementNamedNodeMap.js:66:47     
 ❯ HTMLElementNamedNodeMap.setNamedItem ../../../../../node_modules/.pnpm/happy-dom@13.1.4/node_modules/happy-dom/lib/nodes/html-element/HTMLElementNamedNodeMap.js:13:36
 ❯ LiteYTEmbed.setAttributeNode ../../../../../node_modules/.pnpm/happy-dom@13.1.4/node_modules/happy-dom/lib/nodes/element/Element.js:801:48
 ❯ LiteYTEmbed.setAttribute ../../../../../node_modules/.pnpm/happy-dom@13.1.4/node_modules/happy-dom/lib/nodes/element/Element.js:554:14

The path to the code:

TS

• https://github.com/justinribeiro/lite-youtube/blob/main/lite-youtube.ts#L20
• https://github.com/justinribeiro/lite-youtube/blob/main/lite-youtube.ts#L206
• https://github.com/justinribeiro/lite-youtube/blob/main/lite-youtube.ts#L303

JS

• https://www.npmjs.com/package/@justinribeiro/lite-youtube?activeTab=code
• File lite-youtube.js
• Line 163
• Line 237

I think the regression is related to:

• #1188@minor: Makes properties getters and setters in Node classes acc… #1209
  • which fixes TypeError: Attempted to assign to readonly property #1188

Expected behavior

No error as before and on the browser.

[notTGY]

looks like #655 had the same error.

I also encountered this issue while trying to assign loading='lazy' to HTMLImageElement like so:

import { Window } from 'happy-dom'

const window = new Window()
const document = window.document

document.body.innerHTML = '<img>'
const $0 = document.getElementsByTagName('img')[0]

$0.loading = 'lazy'
console.log($0.loading) // 'auto'

It only has getter defined here unlike other properties, which also have setters.

[Yberion]

Yeah and the problem only appeared after #1209

[capricorn86]

Thank you for reporting @Yberion and @notTGY! 🙂

There is a fix in now:
https://github.com/capricorn86/happy-dom/releases/tag/v13.7.7

[Yberion]

Thank you for reporting @Yberion and @notTGY! 🙂

There is a fix in now: https://github.com/capricorn86/happy-dom/releases/tag/v13.7.7

Hello @capricorn86, thanks a lot for the fix, I can confirm it fixed my problem!