@headlessui doesn't quite work

[auser]

Qwik Version

0.10.0

Operating System (or Browser)

OSX

Node Version (if applicable)

No response

Which component is affected?

Qwik React

Expected Behaviour

I expected to be able to include a <Popover> panel from @headlessui

But even the basic example errors with a strange error (see screenshot).

Actual Behaviour

I receive the error message:

Objects are not valid as a React child (found: object with keys {type, props, key, dev}). If you meant to render a collection of children, use an array instead.
/Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6183:11
6147|      }
6148|  
6149|      var iteratorFn = getIteratorFn(node);
   |              ^
6150|  
6151|      if (iteratorFn) {
    at renderNodeDestructiveImpl (/Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6183:11)
    at renderNodeDestructive (/Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderIndeterminateComponent (/Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5789:7)
    at renderElement (/Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
    at renderNodeDestructiveImpl (/Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderContextProvider (/Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5924:3)
    at renderElement (/Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6021:11)
    at renderNodeDestructiveImpl (/Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at retryTask (/Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6532:5)
    at performWork (/Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6580:7)
    at /Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6904:12
    at scheduleWork (/Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:78:3)
    at startWork (/Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6903:3)
    at renderToStringImpl (/Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6977:3)
    at Proxy.renderToString (/Users/auser/dev/site-qwik/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:7065:10)
    at Module.render (/node_modules/@builder.io/qwik-react/lib/server.f07a53ac.js:19:15)
    at /Users/auser/dev/site-qwik/node_modules/@builder.io/qwik-react/lib/index.qwik.mjs:55:28
Click outside or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

Additional Information

No response

[manucorporat]

Please provide a repo case, ideally a link in stackblitz

[auser]

@manucorporat https://stackblitz.com/~/github.com/auser/qwik-demo

[manucorporat]

There is some confusion here, you cant use a react component like it were a qwik one. Check out the example: https://github.com/auser/qwik-demo/blob/main/src/integrations/react/button.tsx

Qwik allows u to create roots (partial hydration islands) of react code, that will hydrate given some action.

I will be working tomorrow in the whole docs section about this

[auser]

I did see that. I am trying to use a library, but it seems like that's not going to work, yeah?

[zanettin]

Hi @auser and @manucorporat 👋 Just played around with this particular issue over here: https://stackblitz.com/edit/qwik-starter-b2zvog?file=src/integrations/react/headless.tsx

I guess that during the qwikify process, the interop between Popover and Popover.Button get lost which results in the error from above.

[hamatoyogi]

Not sure what was the issue, but this works: https://stackblitz.com/edit/qwik-starter-mritfb?file=src%2Fintegrations%2Freact%2Fheadless.tsx