@webcomponents/custom-elements cause Cannot read properties of null

[linonetwo]

Build tool

Vite

Where do you see the problem?

• In the browser
• In the terminal

Describe the bug

My usage is

    const documentClone = document.cloneNode(true) as Document;
    const reader = new Readability(documentClone);
    const article = reader.parse();

when doing document.cloneNode(true):

webcomponents-custom-elements.js cause error:

        Node.prototype.cloneNode = function(d) {
            d = q.call(this, !!d);
            this.ownerDocument.__CE_registry ? V(a, d) : Q(a, d);
            return d
        }

Can you make this dep optional? I'm not using custom element.

Reproduction

Use https://www.npmjs.com/package/@mozilla/readability in content script

Logs

No response

System Info

System:
    OS: macOS 14.0
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 14.69 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.5.1 - ~/.nvm/versions/node/v20.5.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 9.8.0 - ~/.nvm/versions/node/v20.5.1/bin/npm
    pnpm: 8.7.1 - ~/Library/pnpm/pnpm
    Watchman: 2023.09.04.00 - /usr/local/bin/watchman
  Browsers:
    Safari: 17.0
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.19 => 2.0.0-beta.19 
    vite: ^4.4.11 => 4.4.11

Severity

annoyance

[linonetwo]

Found:

chrome-extension-tools/packages/vite-plugin/src/node/plugin-fileWriter-polyfill.ts

Lines 23 to 24 in 54002ea

	* - Enable custom elements in content scripts during development, used by Vite
	* HMR Error Overlay.

But this block the development, can you make it optional?

[linonetwo]

Error in event handler: TypeError: Cannot read properties of null (reading '__CE_registry')
    at Ha.Node.cloneNode (chrome-extension://chokmkfogadphfaaeaibmiefbkgcphke/vendor/webcomponents-custom-elements.js:42:436)
    at Object.parseReadability (chrome-extension://chokmkfogadphfaaeaibmiefbkgcphke/shared/hooks/useReadability.ts.js:5:36)
    at chrome-extension://chokmkfogadphfaaeaibmiefbkgcphke/content/hooks/useMessaging.ts.js:32:38

Still happen on latest version ("@crxjs/vite-plugin": "^2.0.0-beta.19",)

workaround is comment out

-        magic.prepend(`import '${customElementsId}';`);
+        // magic.prepend(`import '${customElementsId}';`);

[github-actions]

Thanks for contributing to CRXJS! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within 7 days.

[linonetwo]

No one has time for this...

[github-actions]

⚠️ Important Notice: CRXJS is seeking new maintainers.

• New issues and PRs may not receive immediate attention
• A new maintenance team must establish itself by March 31, 2025 or this repository will be archived on June 1, 2025
• Learn more about the transition

---

This is an automated message. Please do not reply to this comment.