Vite fails running react-dnd only in production builld

inssein commented 8 months ago

Reproduction

Add the DndProvider somewhere on the page. Below is an example where I added it to our layout:

<DndProvider backend={HTML5Backend}>{children}</DndProvider>

I have been able to get around this error for now by adding the following to our root file:

// @ts-expect-error hack to get around react-dnd + vite issue
globalThis.global = typeof window !== "undefined" ? window : {};

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (24) x64 AMD Ryzen 9 3900XT 12-Core Processor
    Memory: 29.05 GB / 31.31 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
  npmPackages:
    @remix-run/cloudflare: 2.8.1 => 2.8.1
    @remix-run/cloudflare-pages: 2.8.1 => 2.8.1
    @remix-run/dev: 2.8.1 => 2.8.1
    @remix-run/react: 2.8.1 => 2.8.1
    vite: ^5.2.7 => 5.2.7

Used Package Manager

npm

Expected Behavior

For it to work. The frustrating part is that it works fine in dev, but is broken in the prod build.

Actual Behavior

✘ [ERROR] ReferenceError: window is not defined

      at getGlobalContext
  (file:///home/inssein/projects/utiliti.dev/node_modules/react-dnd/src/core/DndProvider.tsx:92:51)
      at createSingletonDndContext
  (file:///home/inssein/projects/utiliti.dev/node_modules/react-dnd/src/core/DndProvider.tsx:72:28)
      at getDndContextValue
  (file:///home/inssein/projects/utiliti.dev/node_modules/react-dnd/src/core/DndProvider.tsx:59:18)
      at Component
  (file:///home/inssein/projects/utiliti.dev/node_modules/react-dnd/src/core/DndProvider.tsx:29:39)
      at renderWithHooks
  (file:///home/inssein/projects/utiliti.dev/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
      at renderIndeterminateComponent
  (file:///home/inssein/projects/utiliti.dev/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
      at renderElement
  (file:///home/inssein/projects/utiliti.dev/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
      at renderMemo
  (file:///home/inssein/projects/utiliti.dev/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5868:3)
      at renderElement
  (file:///home/inssein/projects/utiliti.dev/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6011:11)
      at window
  (file:///home/inssein/projects/utiliti.dev/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)

JasonColeyNZ commented 8 months ago

Have you tried wrapping the DndProvider in ClientOnly from https://github.com/sergiodxa/remix-utils/tree/main?tab=readme-ov-file#clientonly I have to use this for @hello-pangea/dnd which is an updated fork of react-beautiful-dnd

inssein commented 8 months ago

It would probably work, but it would defeat the purpose of using Remix at this point because it's part of my root layout.

brianbancroft commented 3 months ago

I feel like this is a bug I will possibly running into the future. For your builds, have you tried having the provider at a component-level as opposed to at the pagelevel, and ensuring that that component is client-only?

remix-run / remix