denoland / fresh

The next-gen web framework.
https://fresh.deno.dev
MIT License
12.06k stars 610 forks source link

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

Open guy-borderless opened 1 month ago

guy-borderless commented 1 month ago

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/react@2.0.4?external=react,react-dom,@types/react";

Island code

lishaduck commented 1 month ago

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.