fresh icon indicating copy to clipboard operation
fresh copied to clipboard

Access to script at 'node:process' from origin 'http://localhost:8000' has been blocked by CORS

Open guy-borderless opened this issue 1 year ago • 1 comments

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.

image import is:

import {
  Listbox,
  ListboxButton,
  ListboxOption,
  ListboxOptions,
} from "https://esm.sh/@headlessui/[email protected]?external=react,react-dom,@types/react";

Island code

guy-borderless avatar May 30 '24 04:05 guy-borderless

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.

lishaduck avatar May 30 '24 21:05 lishaduck