[BUG] - Remix + Netlify + NextUI: "document is not defined"

[drovani]

NextUI Version

2.4.8

Describe the bug

When attempting to serve a Remix+NextUI application to Netlify (either functions or to the edge), receive a ReferenceError: document is not defined when serving the application

Taking NextUI components out of the application and the error does not occur.

Your Example Website or App

https://github.com/drovani/remix-nextui-netlify-edge

Steps to Reproduce the Bug or Issue

1. Create a new Remix app to deploy to Netlify
   1. npx create-remix@latest --template netlify/remix-template
2. Install Tailwind CSS with Remix
   1. npm install -D tailwindcss postcss autoprefixer
   2. npx tailwindcss init --ts -p
   3. Update ./tailwind.config.ts
   4. Create ./app/tailwind.css
   5. Add LinksFunction export to ./app/root.tsx
3. Run npm build && netlify serve to validate that solution executes as expected.
4. Implement NextUI in Remix
   1. npm i @nextui-org/react framer-motion
   2. Update ./tailwind.config.ts with NextUI plugin
   3. Add NextUIProvider wrapper around the app in ./app/root.tsx
5. Run npm build && netlify serve to validate that solution still executes as expected.
6. Add any NextUI component to the ./app/routes/_index.tsx component
   1. Example: replace the first <a>nchor tag with a <Link> component
   2. -or- add a <Button>Clickable</Button> component
   3. -or- add a <Snippet>snippet</Snippet> component
7. Run npm build && netlify serve and observe the following error:

   ◈ Loaded edge function remix-server
   [remix-server] ReferenceError: document is not defined
       at $431fbd86ca7dc216$export$b204af158042fbac (file:///home/drovani/remix-nextui-netlify-edge/build/server/assets/server-build-CTJ-Eq0G.js:14439:155)
       at $431fbd86ca7dc216$export$f21a1ffae260145a (file:///home/drovani/remix-nextui-netlify-edge/build/server/assets/server-build-CTJ-Eq0G.js:14443:15)
       at $507fabe10e71c6fb$var$setupGlobalFocusEvents (file:///home/drovani/remix-nextui-netlify-edge/build/server/assets/server-build-CTJ-Eq0G.js:15512:86)
       at $507fabe10e71c6fb$export$ec71b4b83ac08ec3 (file:///home/drovani/remix-nextui-netlify-edge/build/server/assets/server-build-CTJ-Eq0G.js:15605:3)
       at $f7dceffc5ad7768b$export$4e328f61c538687f (file:///home/drovani/remix-nextui-netlify-edge/build/server/assets/server-build-CTJ-Eq0G.js:15716:3)
       at useLink (file:///home/drovani/remix-nextui-netlify-edge/build/server/assets/server-build-CTJ-Eq0G.js:18728:53)
       at file:///home/drovani/remix-nextui-netlify-edge/build/server/assets/server-build-CTJ-Eq0G.js:18762:7
       at Wc (file:///home/drovani/remix-nextui-netlify-edge/build/server/assets/server-build-CTJ-Eq0G.js:13602:13)
       at Zc (file:///home/drovani/remix-nextui-netlify-edge/build/server/assets/server-build-CTJ-Eq0G.js:13727:13)
       at Z$1 (file:///home/drovani/remix-nextui-netlify-edge/build/server/assets/server-build-CTJ-Eq0G.js:13784:9)
   

8. Reset the <a>nchor tag back to the HTML element and rerun npm build && netlify serve; all is well.

Expected behavior

As a website builder, I would expect that NextUI would work in a functions environment seamlessly along with the Remix application.

Screenshots or Videos

No response

Operating System Version

• OS: WSL; though this is specific to Netlify

Browser

Chrome

[linear]

ENG-1444 [BUG] - Remix + Netlify + NextUI: "document is not defined"