search

nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
21.67k stars 1.45k forks source link

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

Open drovani opened 4 hours ago

drovani commented 4 hours ago

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

Browser

Chrome

linear[bot] commented 4 hours ago

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