Compatibility with Preact

[8Crafter]

React/React-dom version: v19.1.1 (Preact v10.26.9)
React-Menu version: v4.5.0

Describe the bug

Whenever I try to use one of the components in the render function (imported from preact/compat), I get this error:

index.js:457 Uncaught (in promise) InvalidCharacterError: Failed to execute 'createElementNS' on 'Document': The qualified name provided ('[object Object]') contains the invalid name-start character '['.
    at V (index.js:457:18)
    at O (index.js:326:28)
    at I (children.js:97:16)
    at O (index.js:267:13)
    at E (render.js:42:2)
    at nn (render.js:91:2)
    at x.Test1 [as constructor] (players.tsx:134:33)
    at x.D [as render] (index.js:680:14)
    at O (index.js:241:14)
    at I (children.js:97:16)
V @ index.js:457
O @ index.js:326
I @ children.js:97
O @ index.js:267
E @ render.js:42
nn @ render.js:91
Test1 @ players.tsx:134
D @ index.js:680
O @ index.js:241
I @ children.js:97
O @ index.js:267
I @ children.js:97
V @ index.js:547
O @ index.js:326
I @ children.js:97
O @ index.js:267
I @ children.js:97
O @ index.js:267
E @ render.js:42
nn @ render.js:91
(anonymous) @ players.tsx:22
Promise.then
PlayersTab @ players.tsx:18
D @ index.js:680
O @ index.js:241
I @ children.js:97
O @ index.js:267
I @ children.js:97
O @ index.js:267
E @ render.js:42
update @ app.tsx:231
emit @ node:events:530
switchTab @ C:\Users\ander\GitHub\MCBE NBT Editor\.vite\build\preload.js:17614
(anonymous) @ LeftSidebar.tsx:58
dispatch @ C:\Users\ander\GitHub\MCBE NBT Editor\node_modules\jquery\dist\jquery.js:5145
elemData.handle @ C:\Users\ander\GitHub\MCBE NBT Editor\node_modules\jquery\dist\jquery.js:4949

Additional information

This is being used in an electron forge app with Vite + TypeScript, it also has Node.JS enabled for the renderer process.

To Reproduce

1. Put this TypeScript code in a react project:

import { render } from "preact/compat";
import { ControlledMenu, MenuItem } from "@szhsin/react-menu";
const [isOpen, setOpen] = useState(false);
const [anchorPoint, setAnchorPoint] = useState({ x: 0, y: 0 });
const tempElement: HTMLDivElement = document.createElement("div");
render(
    <ControlledMenu
        anchorPoint={anchorPoint}
        state={isOpen ? "open" : "closed"}
        direction="right"
        onClose={(): void => void columnHeadersContextMenu_setOpen(false)}
    >
        <MenuItem>Cut</MenuItem>
        <MenuItem>Copy</MenuItem>
        <MenuItem>Paste</MenuItem>
    </ControlledMenu>,
    tempElement
);

2. Run the code.

Expected behavior

This code should not throw an error.

Code snippets/CodeSandbox examples/Screenshots

It happens both when putting it directly in render like this:

import { ControlledMenu, MenuItem } from "@szhsin/react-menu";
// ...
const [columnHeadersContextMenu_isOpen, columnHeadersContextMenu_setOpen] = useState(false);
const [columnHeadersContextMenu_anchorPoint, columnHeadersContextMenu_setAnchorPoint] = useState({ x: 0, y: 0 });
const tempElement: HTMLDivElement = document.createElement("div");
render(
    <ControlledMenu
        anchorPoint={columnHeadersContextMenu_anchorPoint}
        state={columnHeadersContextMenu_isOpen ? "open" : "closed"}
        direction="right"
        onClose={(): void => void columnHeadersContextMenu_setOpen(false)}
        ref={ref}
    >
        <MenuItem>Cut</MenuItem>
        <MenuItem>Copy</MenuItem>
        <MenuItem>Paste</MenuItem>
    </ControlledMenu>,
    tempElement
);

and when putting it inside of other components or other component functions:
ex.

import { ControlledMenu, MenuItem } from "@szhsin/react-menu";
// ...
const [columnHeadersContextMenu_isOpen, columnHeadersContextMenu_setOpen] = useState(false);
const [columnHeadersContextMenu_anchorPoint, columnHeadersContextMenu_setAnchorPoint] = useState({ x: 0, y: 0 });
const tempElement: HTMLDivElement = document.createElement("div");
render(
    <div>
        <span>a</span>
        <ControlledMenu
            anchorPoint={columnHeadersContextMenu_anchorPoint}
            state={columnHeadersContextMenu_isOpen ? "open" : "closed"}
            direction="right"
            onClose={(): void => void columnHeadersContextMenu_setOpen(false)}
        >
            <MenuItem>Cut</MenuItem>
            <MenuItem>Copy</MenuItem>
            <MenuItem>Paste</MenuItem>
        </ControlledMenu>
    </div>,
    tempElement
);

It also still happens when removing the children MenuItem components, and when using the Menu component.

[szhsin]

Looks like you’re trying to use this package with Preact. Just a heads up, this package has never been tested with Preact and is not officially supported. If you’re using the preact/compat layer and still hitting errors, that’s probably something to bring up with Preact instead.

[szhsin]

Here is an example of using the package with Preact: https://codesandbox.io/p/sandbox/preact-menu-2yvtz5

It works out of the box and I’m not seeing any problems.
Closing the issue now.

[8Crafter]

Yeah, the problem was I forgot to add the mapping to replace the react and react-dom modules with preact/compat in vite.