Preact VNode incompatible with React because it expects `constructor` to be `undefined`.

Context

I’m building a vanilla JavaScript library that uses Preact for its stage management and accepts JSX elements for customizing the UI.

JSX elements coming from Preact work as expected. However, React elements are ignored.

Why

Preact considers a valid JSX element to have a constructor key set to undefined:

https://github.com/preactjs/preact/blob/3d2edb6f3cd59b40f8021f36948bae90bf760683/src/create-element.js#L83-L89

I’m not sure whether this is intentional to have this check now, it might have been here for legacy reasons (prior to Preact X).

For React elements to be compatible with the library I’m building, I need to loop over the children and to add the constructor key set to undefined.

 {
+  constructor: undefined,
   props: {
     children: "Hello"
   }
 }

Why is constructor necessary for a Preact element to be valid?

Preview

Here is a reproduction of the issue, with a user-land fix.

[marvinhagemeister]

This is a new safety guard that was introduced with Preact X. It guards against a possible XSS injection vulnerability, where a bad actor might pass custom vnodes and thus would be able to take control of props.dangerouslySetInnerHTML.

const BAD = {
  type: "script",
  props: {
    dangerouslySetInnerHTML: "alert('XSS')"
  }
};

render(<div>{BAD}</div>, container);

The fix ensures that no JSON structure can be passed as children.

EDIT: Note that compact works with react elements out of the box. It uses isValidElement under the hood.

[francoischalifour]

Thank you for the clarifications, this is highly appreciated.

I might turn the problem around to start from a new angle then: leveraging Preact only as state management and creating specialized renderers for different frameworks. I’m still trying to figure out if that’s a legit use of Preact. At this point what I’m doing is experimental and I’m trying multiple approaches.

I joined the Preact Slack workspace which might be more appropriate for future related questions.

Since the original issue is answered, feel free to close it. Thank you again.