denoland / fresh

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

issues with @headlessui/react #2426

Open fkoemep opened 2 months ago

fkoemep commented 2 months ago

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

I'm working with the @headlessui/react library v1.7.17 and Deno v1.43.3, if I upgrade it to any newer version I get the following errors:

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

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\""
}
lishaduck commented 1 month ago

To fix it, add export DENO_FUTURE=1. Note that this doesn't work in Deno Deploy. If you need Deno Deploy support, you can use if (!IS_BROWSER) blocks. It's not ideal, and you might run into #2444. It does work though, which is better than nothing.