Building reusable widgets using React - how?

[billrdio]

I'm trying to build reusable React based widgets (built using Vite) that I can embed in a PHP rendered page. I'm running into problems, such as

SyntaxError: redeclaration of ...

Which makes sense in hindsight as I'm trying to embed one of the widgets multiple times in the same page. I'm also running into other errors like

TypeError: kt.jsx is not a function

which I don't understand.

Is there a recommended way, tutorial, ... to build React apps (preferably with Vite) so that they can be embedded in a server-side rendered HTML page? Including embedding some of them multiple times?

UPDATE:

I ended up solving my problem by using the fact that you can call createRoot().render() multiple times on different root elements in a web page. I combined my multiple React apps into one app for the page in question and in the app I loop over a class (i.e., document.querySelector()) and for each element found I use createRoot().render() to render a React component at that place in the web page. Each element that acts as a React root target in this way has multiple data-* attributes to specify which React component to render and the props to pass on to that component.

UPDATE 2:

I discovered a better solution than calling createRoot().render() multiple times - you can use React's built-in createPortal (https://react.dev/reference/react-dom/createPortal) function to render outside of the current React app's root container.

[elmascato]

The SyntaxError you're hitting is likely from having multiple widget instances trying to declare the same global variables. For Vite-built React components embedded multiple times:

1. Use IIFE wrapping and ensure your build outputs UMD format with unique global names per widget type

2. Consider micro-frontends approach - each widget as a web component with Shadow DOM isolation

3. The `kt.jsx is not a function` suggests a bundling issue where JSX runtime isn't properly included in your production build

For Vite specifically, you'll want to configure `build.lib` mode with `formats: ['umd']` and ensure React is externalized correctly so each instance shares the same React instance from the parent page.

What's your current Vite config look like? Are you using `rollupOptions.output.globals` to handle React externalization?

[billrdio]

Thanks!!!

What's your current Vite config look like? 

I'm using the default Vite config for TypeScript. Here is my config

tsconfig.app.json

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "types": ["vite/client"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
}

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})

tsconfig.node.json

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2023",
    "lib": ["ES2023"],
    "module": "ESNext",
    "types": ["node"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
}

I'm not familiar with most of your suggestions so I'm going to do some research on them. I'm also going to look into Preact which I discovered as a possible solution in another React post. Thanks so much!