Server error when rendering Tooltip component in SSR mode

hansoksendahl commented 1 year ago

Describe the bug When rendering the <Tooltip /> component with { ssr: true } set for the solid plugin in vite.config.ts the server crashes with an error.

/Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/@kobalte+utils@0.8.0_solid-js@1.7.11/node_modules/@kobalte/utils/dist/index.js:119
  return node ? node.ownerDocument || node : document;
                                             ^

ReferenceError: document is not defined
    at Module.getDocument (/Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/@kobalte+utils@0.8.0_solid-js@1.7.11/node_modules/@kobalte/utils/dist/index.js:119:46)
    at Array.eval (/Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/@kobalte+core@0.10.0_solid-js@1.7.11/node_modules/@kobalte/core/dist/source/tooltip/tooltip-trigger.jsx:113:27)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:132:68)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at cleanNode (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:128:49)
    at Timeout._onTimeout (file:///Users/hans/Code/minimum-repro-tooltip-server-error/node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/dist/server.js:54:52)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)

To Reproduce

Checkout the minimum reproduction repository

git clone git@github.com:hansoksendahl/minimum-repro-tooltip-server-error.git

Change into the repository directory
```
cd minimum-repro-tooltip-server-error
```
Run the dev server
```
npm run dev --open
```
Check your console, the server will have crashed.

Expected behavior The component should render and the server should not crash.

Screenshots If applicable, add screenshots to help explain your problem.

The component renders just fine.

However, the server crashes.

Desktop (please complete the following information):

OS: [e.g. iOS] OSX
Browser [e.g. chrome, safari] Chrome
Version [e.g. 22] 115.0.5790.170

Additional context The server is set-up for SSR following the instructions on the Kobalte documentation.

hansoksendahl commented 1 year ago

@fabien-ml It seems like this code should be wrapped in an isServer check. I spotted some other calls to the offending function getDocument that probably also result in server errors when run in SSR mode (for instance the Toast component), I'll have to confirm if this is the case.

hansoksendahl commented 1 year ago

To anybody stuck with this error I was able to get around it by importing my component with unsafe_clientOnly as described in this Github issue.

kobaltedev / kobalte

Server error when rendering Tooltip component in SSR mode #249