Access to script at 'node:process' from origin 'http://localhost:8000' has been blocked by CORS
repro-repo The following island taken from headless-ui example page fails to hydrate on the client with the error:
Access to script at 'node:process' from origin 'http://localhost:8000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
import is:
import {
Listbox,
ListboxButton,
ListboxOption,
ListboxOptions,
} from "https://esm.sh/@headlessui/[email protected]?external=react,react-dom,@types/react";
I don't know the "right" way to fix it, but I know the issue, and from there a somewhat hacky solution :)
Combobox virtualization can't be tested right using Jest for some reason, so HeadlessUI's virtualization code is set inside an if (typeof process !== 'undefined' && process.env.JEST_WORKER_ID !== undefined) block. esm.sh then compiles that to include import __Process$ from "node:process"; because the modules is being requested by Deno, so it assumes that Deno's Node compatibility layer will be applied. To fix it, just add "node:process": "https://esm.sh/v135/node_process.js" to your import map, which re-adds esm.sh's own browser-based Node compatibility layer.