vite-plugin-node-polyfills breaks the compilation

[stevebeauge]

Describe the bug

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

Starting from [email protected], adding the plugin breaks the compilation (both using dev and build commands) with a unclear error:

> [email protected] 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\[email protected][email protected][email protected]_@[email protected]_\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/[email protected]_@[email protected][email protected]/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/[email protected]_@[email protected][email protected]/node_modules/wxt/dist/modules.mjs:30:24)
  at async getBaseConfig (/C:/code/repro/error-polyfill/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/wxt/dist/core/builders/vite/index.mjs:15:20)
  at async Object.importEntrypoint (/C:/code/repro/error-polyfill/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/wxt/dist/core/builders/vite/index.mjs:168:30)
  at async getBackgroundEntrypoint (/C:/code/repro/error-polyfill/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/wxt/dist/core/utils/building/find-entrypoints.mjs:265:27)
  at async /C:/code/repro/error-polyfill/node_modules/.pnpm/[email protected]_@[email protected][email protected]/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/[email protected]_@[email protected][email protected]/node_modules/wxt/dist/core/utils/environments/environment.mjs:13:14)
  at async findEntrypoints (/C:/code/repro/error-polyfill/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/wxt/dist/core/utils/building/find-entrypoints.mjs:55:23)
  at async internalBuild (/C:/code/repro/error-polyfill/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/wxt/dist/core/utils/building/internal-build.mjs:30:23)
  at async buildAndOpenBrowser (/C:/code/repro/error-polyfill/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/wxt/dist/core/create-server.mjs:77:28)
  at async Object.start (/C:/code/repro/error-polyfill/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/wxt/dist/core/create-server.mjs:42:9)
  at async /C:/code/repro/error-polyfill/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/wxt/dist/cli/commands.mjs:32:5
  at async CAC.<anonymous> (/C:/code/repro/error-polyfill/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/wxt/dist/cli/cli-utils.mjs:16:22)
  at async /C:/code/repro/error-polyfill/node_modules/.pnpm/[email protected]_@[email protected][email protected]/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 [email protected]
pnpm build # OK

pnpm add -D [email protected]
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

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[aklinker1]

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

wxt/packages/wxt/src/core/utils/environments/browser-environment.ts

Lines 8 to 21 in 34832f9

	export function getBrowserEnvironmentGlobals(): EnvGlobals {
	const { window, document, global } = parseHTML(`
	<html>
	<head></head>
	<body></body>
	</html>
	`);
	return {
	...global,
	window,
	document,
	self: global,
	};
	}

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.

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]

@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]

@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]

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 #297

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