crxjs / chrome-extension-tools

Bundling Chrome Extensions can be pretty complex. It doesn't have to be.
https://crxjs.dev/vite-plugin
2.55k stars 177 forks source link

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

Open linonetwo opened 8 months ago

linonetwo commented 8 months ago

Build tool

Vite

Where do you see the problem?

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 commented 8 months ago

Found:

https://github.com/crxjs/chrome-extension-tools/blob/54002ea9b37d6221156ef7c39b9c3df809bc084e/packages/vite-plugin/src/node/plugin-fileWriter-polyfill.ts#L23-L24

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

linonetwo commented 5 months ago
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}';`);