search

kobaltedev / kobalte

A UI toolkit for building accessible web apps and design systems with SolidJS.
https://kobalte.dev
MIT License
1.27k stars 71 forks source link

[Tooltip] "document is not defined" when using kobalte with astro #242

Closed sek-consulting closed 1 year ago

sek-consulting commented 1 year ago

When using the Tooltip demo inside an Astro project I get the following error on my computer:

C:/workspace_vscode/git-kobalte-tooltip-error/node_modules/.pnpm/@kobalte+utils@0.7.2_solid-js@1.7.8/node_modules/@kobalte/utils/dist/index.js:116
  return node ? node.ownerDocument || node : document;
                                             ^

ReferenceError: document is not defined
    at Module.getDocument (C:/workspace_vscode/git-kobalte-tooltip-error/node_modules/.pnpm/@kobalte+utils@0.7.2_solid-js@1.7.8/node_modules/@kobalte/utils/dist/index.js:116:46)
    at Array.eval (C:/workspace_vscode/git-kobalte-tooltip-error/node_modules/.pnpm/@kobalte+core@0.9.8_solid-js@1.7.8/node_modules/@kobalte/core/dist/source/tooltip/tooltip-trigger.jsx:109:27)
    at cleanNode (file:///C:/workspace_vscode/git-kobalte-tooltip-error/node_modules/.pnpm/solid-js@1.7.8/node_modules/solid-js/dist/server.js:131:68)
    at cleanNode (file:///C:/workspace_vscode/git-kobalte-tooltip-error/node_modules/.pnpm/solid-js@1.7.8/node_modules/solid-js/dist/server.js:127:49)
    at cleanNode (file:///C:/workspace_vscode/git-kobalte-tooltip-error/node_modules/.pnpm/solid-js@1.7.8/node_modules/solid-js/dist/server.js:127:49)
    at cleanNode (file:///C:/workspace_vscode/git-kobalte-tooltip-error/node_modules/.pnpm/solid-js@1.7.8/node_modules/solid-js/dist/server.js:127:49)
    at cleanNode (file:///C:/workspace_vscode/git-kobalte-tooltip-error/node_modules/.pnpm/solid-js@1.7.8/node_modules/solid-js/dist/server.js:127:49)
    at Timeout._onTimeout (file:///C:/workspace_vscode/git-kobalte-tooltip-error/node_modules/.pnpm/solid-js@1.7.8/node_modules/solid-js/dist/server.js:53:52)
    at listOnTimeout (node:internal/timers:564:17)
    at process.processTimers (node:internal/timers:507:7)

I'm not sure if I need to setup Astro differently or if it's a bug that is only caused when using Astro and Kobalte together. Cause when I switch to a Solid only project everything works fine.

Here is a list of the versions I use:

Here is a Stackblitz link: https://stackblitz.com/github/sek-consulting/kobalte-tooltip-error Here is the Github repo: https://github.com/sek-consulting/kobalte-tooltip-error

The Stackblitz error is a little different:

[getDocument@/home/projects/jvmizorwq.github/node_modules/.pnpm/@kobalte+utils@0.7.2_solid-js@1.7.8/node_modules/@kobalte/utils/dist/index.js:116:3
TooltipTrigger/<@/home/projects/jvmizorwq.github/node_modules/.pnpm/@kobalte+core@0.9.8_solid-js@1.7.8/node_modules/@kobalte/core/dist/source/tooltip/tooltip-trigger.jsx:109:27
cleanNode@file:///home/projects/jvmizorwq.github/node_modules/.pnpm/solid-js@1.7.8/node_modules/solid-js/dist/server.js:194:68
cleanNode@file:///home/projects/jvmizorwq.github/node_modules/.pnpm/solid-js@1.7.8/node_modules/solid-js/dist/server.js:190:58
cleanNode@file:///home/projects/jvmizorwq.github/node_modules/.pnpm/solid-js@1.7.8/node_modules/solid-js/dist/server.js:190:58
cleanNode@file:///home/projects/jvmizorwq.github/node_modules/.pnpm/solid-js@1.7.8/node_modules/solid-js/dist/server.js:190:58
cleanNode@file:///home/projects/jvmizorwq.github/node_modules/.pnpm/solid-js@1.7.8/node_modules/solid-js/dist/server.js:190:58
createRoot/result<@file:///home/projects/jvmizorwq.github/node_modules/.pnpm/solid-js@1.7.8/node_modules/solid-js/dist/server.js:116:61
listOnTimeout@https://jvmizorwqgithub-uymo.w-corp.staticblitz.com/blitz.a9bdb71e.js:35:357552
processTimers@https://jvmizorwqgithub-uymo.w-corp.staticblitz.com/blitz.a9bdb71e.js:35:358379
_0x51c2db/_0x5b2835</<@https://jvmizorwqgithub-uymo.w-corp.staticblitz.com/blitz.a9bdb71e.js:42:283722
_0x51c2db/_0x5b2835<@https://jvmizorwqgithub-uymo.w-corp.staticblitz.com/blitz.a9bdb71e.js:42:284022
]

If I can provider further info just let me know :)

armandsalle commented 1 year ago

Hey 👋 When I test with client:only instead of client:load it works! <TooltipDemo client:only />

I found the answer in the troubleshooting doc of Astro, I never use it before!

sek-consulting commented 1 year ago

Thanks! Now it works as expected :)