search

preactjs / preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
https://preactjs.com
MIT License
36.35k stars 1.93k forks source link

Headless ui issues after 1.7.17 #4379

Closed fkoemep closed 1 month ago

fkoemep commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

I do think this is more deno/fresh specific 😅

rschristian commented 1 month ago

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.