search

wxt-dev / wxt

⚡ Next-gen Web Extension Framework
https://wxt.dev
MIT License
3.94k stars 152 forks source link

vite-plugin-node-polyfills breaks the compilation #931

Open stevebeauge opened 3 weeks ago

stevebeauge commented 3 weeks ago

Describe the bug

I'm importing the vite-plugin-node-polyfills plugin in my project because I need some polyfills (Buffer, ...).

Starting from wxt@0.19.1, adding the plugin breaks the compilation (both using dev and build commands) with a unclear error:

> wxt-starter@0.0.0 dev C:\code\repro\error-polyfill
> wxt

WXT 0.19.6                                                                                                                                                                                                                        16:36:13
✔ Started dev server @ http://localhost:3000                                                                                                                                                                                     16:36:14
ℹ Pre-rendering chrome-mv3 for development with Vite 5.4.1                                                                                                                                                                       16:36:14
✖ Command failed after 1.598 s                                                                                                                                                                                                   16:36:14

 ERROR  Invalid URL                                                                                                                                                                                                               16:36:14

  at new URL (node:internal/url:775:36)
  at O (node_modules\.pnpm\vite-plugin-node-polyfills@0.22.0_rollup@4.21.0_vite@5.4.1_@types+node@22.4.1_\node_modules\vite-plugin-node-polyfills\dist\index.cjs:1:1790)
  at Object.vite (C:/code/repro/error-polyfill/wxt.config.ts:10:58)
  at vite (/C:/code/repro/error-polyfill/node_modules/.pnpm/wxt@0.19.6_@types+node@22.4.1_rollup@4.21.0/node_modules/wxt/dist/core/utils/building/resolve-config.mjs:312:59)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async wxt2.config.vite (/C:/code/repro/error-polyfill/node_modules/.pnpm/wxt@0.19.6_@types+node@22.4.1_rollup@4.21.0/node_modules/wxt/dist/modules.mjs:30:24)
  at async getBaseConfig (/C:/code/repro/error-polyfill/node_modules/.pnpm/wxt@0.19.6_@types+node@22.4.1_rollup@4.21.0/node_modules/wxt/dist/core/builders/vite/index.mjs:15:20)
  at async Object.importEntrypoint (/C:/code/repro/error-polyfill/node_modules/.pnpm/wxt@0.19.6_@types+node@22.4.1_rollup@4.21.0/node_modules/wxt/dist/core/builders/vite/index.mjs:168:30)
  at async getBackgroundEntrypoint (/C:/code/repro/error-polyfill/node_modules/.pnpm/wxt@0.19.6_@types+node@22.4.1_rollup@4.21.0/node_modules/wxt/dist/core/utils/building/find-entrypoints.mjs:265:27)
  at async /C:/code/repro/error-polyfill/node_modules/.pnpm/wxt@0.19.6_@types+node@22.4.1_rollup@4.21.0/node_modules/wxt/dist/core/utils/building/find-entrypoints.mjs:68:20
  at async Promise.all (index 0)
  at async Object.run (/C:/code/repro/error-polyfill/node_modules/.pnpm/wxt@0.19.6_@types+node@22.4.1_rollup@4.21.0/node_modules/wxt/dist/core/utils/environments/environment.mjs:13:14)
  at async findEntrypoints (/C:/code/repro/error-polyfill/node_modules/.pnpm/wxt@0.19.6_@types+node@22.4.1_rollup@4.21.0/node_modules/wxt/dist/core/utils/building/find-entrypoints.mjs:55:23)
  at async internalBuild (/C:/code/repro/error-polyfill/node_modules/.pnpm/wxt@0.19.6_@types+node@22.4.1_rollup@4.21.0/node_modules/wxt/dist/core/utils/building/internal-build.mjs:30:23)
  at async buildAndOpenBrowser (/C:/code/repro/error-polyfill/node_modules/.pnpm/wxt@0.19.6_@types+node@22.4.1_rollup@4.21.0/node_modules/wxt/dist/core/create-server.mjs:77:28)
  at async Object.start (/C:/code/repro/error-polyfill/node_modules/.pnpm/wxt@0.19.6_@types+node@22.4.1_rollup@4.21.0/node_modules/wxt/dist/core/create-server.mjs:42:9)
  at async /C:/code/repro/error-polyfill/node_modules/.pnpm/wxt@0.19.6_@types+node@22.4.1_rollup@4.21.0/node_modules/wxt/dist/cli/commands.mjs:32:5
  at async CAC.<anonymous> (/C:/code/repro/error-polyfill/node_modules/.pnpm/wxt@0.19.6_@types+node@22.4.1_rollup@4.21.0/node_modules/wxt/dist/cli/cli-utils.mjs:16:22)
  at async /C:/code/repro/error-polyfill/node_modules/.pnpm/wxt@0.19.6_@types+node@22.4.1_rollup@4.21.0/node_modules/wxt/dist/cli/index.mjs:11:1

 ELIFECYCLE  Command failed with exit code 1.

Reverting back to the 0.19.0 version removes the issue.

Reproduction

This repo highlight the issue : https://github.com/stevebeauge/error-polyfill

Steps to reproduce

cd /somewhere
git clone https://github.com/stevebeauge/error-polyfill.git
pnpm install
pnpm prepare

pnpm build # FAIL

pnpm add -D wxt@0.19.0
pnpm build # OK

pnpm add -D wxt@0.19.1
pnpm build # FAIL

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 7.26 GB / 31.89 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.5.0 - C:\Program Files\nodejs\pnpm.CMD
    bun: 1.1.13 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (126.0.2592.113)
    Internet Explorer: 11.0.19041.4355

Used Package Manager

pnpm

Validations

aklinker1 commented 3 weeks ago

In v0.19.1, I polyfilled browser globals when loading entrypoints in Node to get their options.

https://github.com/wxt-dev/wxt/blob/34832f9e81748379b75c6937c099a30c1ee1d7fa/packages/wxt/src/core/utils/environments/browser-environment.ts#L8-L21

Specifically, setting a global document is causing this problem because the vite plugin is trying to create a URL, and document.baseURI isn't valid.

Screenshot 2024-08-19 at 11 02 22 AM

Commenting out the document polyfill in WXT fixes the problem. However, this isn't a generic a solution - I want the document global available in case devs use it outside the main function of entrypoints, or in other files with side-effects.

I could use jsdom instead of linkedom when setting up the globals, but JSDom is big and slow and I already had linkedom installed...

I tried messing around and doing things like setting a custom baseURI on the document, but that's not working either.

For now, while I figure out a solution I'd recommend patching WXT (pnpm or patch-package) and commenting out document in node_modules/wxt/dist/core/utils/environments/browser-environment.mjs:

  return {
    ...global,
    window,
-   document,
+   // This document is not compatible with vite-plugin-node-polyfill. Removing this means we can't use document outside the main function of entrypoints
+   // See https://github.com/wxt-dev/wxt/issues/931
+   // document,
    self: global
  };
1natsu172 commented 3 weeks ago

@aklinker1 I guess this error is reading the cjs file and hitting the polyfill in import.meta.resolve... but why is it resolving to cjs? The plugin package.json looks like it is ESM compliant. (https://github.com/davidmyersdev/vite-plugin-node-polyfills/blob/main/package.json)

aklinker1 commented 3 weeks ago

@1natsu172 No, this error is caused by new URL(..., docuemnt.baseURI), my document polyfill isn't providing a valid baseURI that the plugin accepts.

As for why it's resolving to CJS... Because we're using c12 to load config files, which uses jiti, which loads modules as CJS. See #297

1natsu172 commented 3 weeks ago

Yes, that understood, I was just saying that if I had loaded the ESM, it would not be an error only for this plugin. (Of course, that's still not the fundamental solution.)

As for why it's resolving to CJS... Because we're using c12 to load config files, which uses jiti, which loads modules as CJS. See https://github.com/wxt-dev/wxt/issues/297

OK, let's have a conversation about ESM load in #297 😃