Build components (Uncaught Error: Objects are not valid as a React child)

[amrw-js]

I am encountering the following error when using a Preact component in my React project:

Uncaught Error: Objects are not valid as a React child (found: object with keys {type, props, key, ref, __k, __, __b, __e, __c, constructor, __v, __i, __u, __source, __self}). If you meant to render a collection of children, use an array instead.

I'm trying to create a components library using Preact and use it in a React projects.

but after building the project I got the previous mentioned error.

here is my vite config.

import { defineConfig } from "vite";
import path from "path";
import { fileURLToPath } from "url";
import ViteDts from "vite-plugin-dts";
import preact from "@preact/preset-vite";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const entry = path.resolve(__dirname, "src/index.ts");

export default defineConfig({
  plugins: [ViteDts(), preact()],
  resolve: {
    alias: {
      react: "preact/compat",
      "react-dom": "preact/compat",
    },
  },
  build: {
    lib: {
      entry,
      name: "PreactLib",
      fileName: (format) => `preact-lib.${format}.js`,
      formats: ["es", "cjs"],
    },
    sourcemap: false,
  },
});

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    "strict": true,
    "types": ["node", "preact"],
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
    "emitDeclarationOnly": false,
    "outDir": "dist"
  },
  "include": ["src", "demo"]
}

[marvinhagemeister]

Please post a full reproduction case. I'm afraid the vite config alone is not enough to reproduce the error on our end. According to the error message you're trying to render Preact nodes in React somewhere. That is not supported. Only the other way around is, rendering React components in Preact.

[rschristian]

This is fundamentally how component frameworks work, you cannot bring components from one framework and use them directly in another. Each framework has certain expectations around components from construction to output and this is not universally shared.

Preact, with its compatibility layer, is fairly unique here in that it handles the conversion of a React component into a Preact component for you. However, there is a conversion going on to facilitate that, just one behind the scenes.

---

To fulfill your use case you have two options:

1. Output both React & Preact builds
   • this is pretty straightforward to do, usually by offering exports like my-lib/preact and my-lib/react
2. Render the Preact component imperatively using effects/refs in the React app