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

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

Create a new Remix app to deploy to Netlify
1. npx create-remix@latest --template netlify/remix-template
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
Run npm build && netlify serve to validate that solution executes as expected.
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
Run npm build && netlify serve to validate that solution still executes as expected.
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

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)

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

Oct 10 '24 20:10 drovani

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

Oct 10 '24 20:10 linear[bot]

I am experiencing this issue with Remix + NextUI deployed on Vercel.

ReferenceError: document is not defined at (node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/react-textarea-autosize/dist/react-textarea-autosize.browser.esm.js:97:0)

My setup is as follows: edge-example.tsx

export const config = { runtime: "edge" };

export default function Edge() {
  return <h1>Hello from Edge</h1>;
}

And in root.tsx:

// ...
<body>
  <NextUIProvider> 
    {children}
    <ScrollRestoration />
    <Scripts />
  </NextUIProvider>
</body>

If I remove the NextUIProvider, the issue goes away.

Nov 26 '24 04:11 torbensky