Headless ui issues after 1.7.17

[fkoemep]

• Check if updating to the latest Preact version resolves the issue

Describe the bug
A clear and concise description of what the bug is.

Headless ui fails to load after upgrading from 1.7.17 to any later version. Versions prior to 2.0.0 throws a node:process CORS error, with 2.0.0 and above the error is "document is not defined".

I am using preact 10.21.0 and deno v1.43.3, here is my entire deno.json file

{
  "lock": false,
  "tasks": {
    "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
    "start": "deno run -A --watch=static/,routes/ main.ts",
    "build": "deno run -A dev.ts build",
    "preview": "deno run -A main.ts",
    "update": "deno run -A -r https://fresh.deno.dev/update ."
  },
  "lint": {
    "rules": { "tags": ["recommended", "fresh"], "exclude": ["prefer-const"] }
  },
  "nodeModulesDir": true,
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.8/",
    "$std/": "https://deno.land/std@2024.05.07/",
    "preact": "https://esm.sh/preact@10.21.0?dts",
    "preact/": "https://esm.sh/preact@10.21.0/",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.3?dts",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.6.0?dts",
    "@fontsource/roboto": "https://esm.sh/@fontsource/roboto?dts",
    "tailwindcss": "npm:tailwindcss@3.4.3",
    "tailwindcss/": "npm:tailwindcss@3.4.3/",
    "tailwindcss/plugin": "npm:tailwindcss@3.4.3/plugin.js",
    "icons": "https://esm.sh/@heroicons/react/16/solid?alias=react:preact/compat",
    "@headlessui/react": "https://esm.sh/@headlessui/react@1.7.17?alias=react:preact/compat,react-dom:preact/compat,react/jsx-runtime:preact/compat/jsx-runtime,@types/react:preact/compat,@types/react-dom:preact/compat&external=preact&deno-std=2024.05.07&dts",
    "@mui/base": "https://esm.sh/@mui/base@5.0.0-beta.40?alias=react:preact/compat,react-dom:preact/compat,react/jsx-runtime:preact/compat/jsx-runtime,@types/react:preact/compat,@types/react-dom:preact/compat&external=preact&deno-std=2024.05.07&dts",
    "bottleneck": "npm:bottleneck",
    "components/": "./components/",
    "utils/": "./utils/",
    "api": "./utils/api.js",
    "islands/": "./islands/",
    "juani/": "https://esm.sh/gh/juanidambrosio/smileshelper/"
  },
  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
  "exclude": ["**/_fresh/*"],
  "install @mui/material": "\"@emotion/react/\": \"https://esm.sh/@emotion/react@11.11.4?alias=react:preact/compat,react-dom:preact/compat,react/jsx-runtime:preact/compat/jsx-runtime,@types/react:preact/compat,@types/react-dom:preact/compat&deps=preact@10.20.1/\",\"@emotion/styled/\": \"https://esm.sh/@emotion/styled@11.11.0?alias=react:preact/compat,react-dom:preact/compat,react/jsx-runtime:preact/compat/jsx-runtime,@types/react:preact/compat,@types/react-dom:preact/compat&deps=preact@10.20.1/\",\"@mui/material\": \"https://esm.sh/@mui/material@5.15.10?alias=react:preact/compat,react-dom:preact/compat,react/jsx-runtime:preact/compat/jsx-runtime,@types/react:preact/compat,@types/react-dom:preact/compat&deps=preact@10.20.1&dts\""
}

[rschristian]

Neither issue sounds related to Preact.

Versions prior to 2.0.0 throws a node:process CORS error

Neither CORS nor node:proccess are Preact issues.

with 2.0.0 and above the error is "document is not defined".

Fresh runs (partially) outside of the browser, in an environment where document will not be defined. Trying to use document in this env will correctly throw an error.

---

Please provide a minimal reproduction displaying how this is a problem with Preact.

[fkoemep]

Here's the full repository with the code https://github.com/fkoemep/smiles-search

Enter this in a terminal "deno run -A -r --watch=static/,routes/,components/,utils/ dev.ts" and you get this error with versions >= v2.0.0:

ReferenceError: document is not defined
    at _ (https://esm.sh/v135/@react-aria/utils@3.24.0/X-YS9AdHlwZXMvcmVhY3QtZG9tOnByZWFjdC9jb21wYXQsQHR5cGVzL3JlYWN0OnByZWFjdC9jb21wYXQscmVhY3QtZG9tOnByZWFjdC9jb21wYXQscmVhY3QvanN4LXJ1bnRpbWU6cHJlYWN0L2NvbXBhdC9qc3gtcnVudGltZSxyZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0/denonext/utils.mjs:2:1579)
    at we (https://esm.sh/v135/@react-aria/utils@3.24.0/X-YS9AdHlwZXMvcmVhY3QtZG9tOnByZWFjdC9jb21wYXQsQHR5cGVzL3JlYWN0OnByZWFjdC9jb21wYXQscmVhY3QtZG9tOnByZWFjdC9jb21wYXQscmVhY3QvanN4LXJ1bnRpbWU6cHJlYWN0L2NvbXBhdC9qc3gtcnVudGltZSxyZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0/denonext/utils.mjs:2:1627)
    at ee (https://esm.sh/v135/@react-aria/interactions@3.21.2/X-YS9AdHlwZXMvcmVhY3QtZG9tOnByZWFjdC9jb21wYXQsQHR5cGVzL3JlYWN0OnByZWFjdC9jb21wYXQscmVhY3QtZG9tOnByZWFjdC9jb21wYXQscmVhY3QvanN4LXJ1bnRpbWU6cHJlYWN0L2NvbXBhdC9qc3gtcnVudGltZSxyZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0/denonext/interactions.mjs:2:17263)
    at Ce (https://esm.sh/v135/@react-aria/interactions@3.21.2/X-YS9AdHlwZXMvcmVhY3QtZG9tOnByZWFjdC9jb21wYXQsQHR5cGVzL3JlYWN0OnByZWFjdC9jb21wYXQscmVhY3QtZG9tOnByZWFjdC9jb21wYXQscmVhY3QvanN4LXJ1bnRpbWU6cHJlYWN0L2NvbXBhdC9qc3gtcnVudGltZSxyZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0/denonext/interactions.mjs:2:19622)
    at V (https://esm.sh/v135/@react-aria/focus@3.17.0/X-YS9AdHlwZXMvcmVhY3QtZG9tOnByZWFjdC9jb21wYXQsQHR5cGVzL3JlYWN0OnByZWFjdC9jb21wYXQscmVhY3QtZG9tOnByZWFjdC9jb21wYXQscmVhY3QvanN4LXJ1bnRpbWU6cHJlYWN0L2NvbXBhdC9qc3gtcnVudGltZSxyZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0/denonext/focus.mjs:2:12915)
    at dd (https://esm.sh/v135/@headlessui/react@2.0.3/X-YS9AdHlwZXMvcmVhY3QtZG9tOnByZWFjdC9jb21wYXQsQHR5cGVzL3JlYWN0OnByZWFjdC9jb21wYXQscmVhY3QtZG9tOnByZWFjdC9jb21wYXQscmVhY3QvanN4LXJ1bnRpbWU6cHJlYWN0L2NvbXBhdC9qc3gtcnVudGltZSxyZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0/denonext/react.mjs:6:102879)
    at Object.t (https://esm.sh/stable/preact@10.21.0/denonext/compat.js:2:1545)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3237)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)

And this error appears on devtools with versions above 1.7.17 but below 2.0.0:

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-untrusted, https, edge.
node:process:1 

Failed to load resource: net::ERR_FAILED

It might be an esm.sh, preact, Deno, fresh, std or headlessui issue but I'm not really sure. If you could point me in the right direction I would be very grateful.

[JoviDeCroock]

I do think this is more deno/fresh specific 😅

[rschristian]

Yup, going to close this out as such.

The Fresh repo can at least help with the document error, the node: protocol over a CDN might be a tad more difficult to solve.