[Listbox] Right-hand side of 'instanceof' is not callable (SSR)

[halljus]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.1.6 (but the problem can be reproduced beginning at v2.0.0)

What browser are you using?

N/A

Reproduction URL

Stackblitz: Vite SSR
Stackblitz: Remix
Stackblitz: Next.js

Describe your issue

When server rendering the Listbox component under certain circumstances, we get the following error:

TypeError: Right-hand side of 'instanceof' is not callable
    at Object.eval (file:///home/projects/vitejs-vite-cncj38/node_modules/@headlessui/react/dist/internal/floating.js:23:1298)
    at JSON.stringify (<anonymous>)
    at Module.Re (file:///home/projects/vitejs-vite-cncj38/node_modules/@headlessui/react/dist/internal/floating.js:23:1245)
    at Ct (file:///home/projects/vitejs-vite-cncj38/node_modules/@headlessui/react/dist/components/listbox/listbox.js:21:15764)
    at renderWithHooks (file:///home/projects/vitejs-vite-cncj38/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js#cjs:5662:16)
    at renderForwardRef (file:///home/projects/vitejs-vite-cncj38/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js#cjs:5857:18)
    at renderElement (file:///home/projects/vitejs-vite-cncj38/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js#cjs:6020:11)
    at renderNodeDestructiveImpl (file:///home/projects/vitejs-vite-cncj38/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js#cjs:6119:11)
    at renderNodeDestructive (file:///home/projects/vitejs-vite-cncj38/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js#cjs:6091:14)
    at renderNode (file:///home/projects/vitejs-vite-cncj38/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js#cjs:6274:12)

As you can see by the provided reproduction URLs, we can reproduce this across various SSR implementations. If you SSR the Listbox in an isolated environment, everything seems to be fine. But there are certain circumstances that cause this error and one we've been able to nail down is when it's in a project that also uses AG Grid. This will cause Listbox to error consistently even if it's rendered on an unrelated route (that is, a separate route from where we render the grid).

Your distributed files are minified, which makes it harder to pin down the error, but after manually prettify-ing @headlessui/react/dist/internal/floating.js, it appears the error comes from this statement on line 140:

let stablePlacement = useMemo(
    () => placement,
    [
      JSON.stringify(
        placement,
        typeof HTMLElement !== 'undefined'
          ? (_, v) => {
              if (v instanceof HTMLElement) { // <-- this throws
                return v.outerHTML
              }
              return v
            }
          : undefined
      ),
    ]
  )

In a project with just the Listbox, typeof HTMLElement is undefined, so this line is not executed (due to the ternary condition not being met). However, in a project with AG Grid, typeof HTMLElement is actually object and appears to be an empty object {} which is not a valid right-hand operand for instanceof.

This particular case is probably AG Grid doing something it shouldn't, but it wouldn't hurt to be more defensive here. Perhaps a try-catch and return v if it throws, or maybe there's some reliable way to ensure HTMLElement will be a valid instanceof operand, I'm not sure.

Thoughts?

[madhavisolanki]

I am facing the same issue

[halljus]

Can we get your thoughts on this, @RobinMalfait? Happy to PR the try-catch if it helps, but not sure if that's the way you want to handle it. Thanks. 🙏

[RobinMalfait]

Hey! This is 100% an AG Grid related bug and not an Headless UI bug. That said, we can simplify our code a bit to also get rid of the bug so we can do that in the meantime.

This should be fixed by #3494, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.

[halljus]

Confirmed the refactored version no longer crashes. Thanks for doing that, even though it's definitely an AG Grid faux pas. 🙏