Utilize react component over URLs dyanamically

Question

I have a React component say TEST.TSX , I have compiled the .tsx file to .js and uploaded it to GitHub, so that I can server it over JsDelivr. Can I use the CDN in another react app to utilize the Test component?

I have tried module-federation, but it requires me to host the remote-app/component containing the (Test component), I cannot use hosting as it is an additional cost.

I have tried bundling the NextJS app (having component Test) and utilizing it using the script generated but failed to use it.

I have tried compiling TEST.tsx to .js file and then utilizing it from CDN, but failed to do so, while I was able to use the component using import when I kept the script in a local folder.

I think it's not possible, as the react components /react must be compiled before running. Please let me know if you guys have any ideas.

I cannot use Iframes as well as it requires hosting.

Basically, just let me know if there are any ways to utilize react components (.TSX/.JSX/.TS/.JS) Files directly from hosted drive locations. (CDNs)

My webpack.config.js file :

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;
const deps = require("./package.json").dependencies;
const path = require('path');
module.exports = {
  mode: 'production',
  devtool: 'source-map',
  entry: './app/export-component.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'exports.js',
    library: 'MyLibrary', // Set a name for the library
    libraryTarget: 'umd', // Set the module type (Universal Module Definition)
    globalObject: 'this', // To support both browser and Node.js environments
  },
  devServer: {
    port: 3001,
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|tsx|ts)$/,
        use: [
            {
              loader: 'babel-loader',
              options: {
                presets: ['solid'],
              },
            },
            {
              loader: 'ts-loader',
            },
         ],
          exclude: /node_modules/,
      },
    ],
  },  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};

My exportComponent.js

// export-components.js
import DemoClientComponent from './components/DemoClientComponent';
import PayButton from './components/PayButton';
// Option 1: Export individual components
export { DemoClientComponent ,PayButton};

// Option 2: Export as an object (if applicable)
export default function ExportComponents() {
    DemoClientComponent,
    PayButton
};

My DemoClientComponents.tsx File in (./app/components) :

import React from 'react';

const DemoClientComponent = () => (
  <>
  
    <h1>Hello from Braintree</h1>
  </>
);

export default DemoClientComponent;

I have uploaded the resulted export.js https://cdn.jsdelivr.net/gh/pradeep-yadav-amla/[email protected]/export.js to,and configured other app's layout.tsx to use the script.

Other app's code :

"use client"
import { useEffect, useState } from "react";
const RemoteFetch = () => {
  const [innerHtml, setInnerhtml] = useState(); 
  useEffect(() => {
    const innerHtml = window.MyLibrary.DemoClientComponent();
    setInnerhtml(innerHtml)
  }, []);

return (
  <>
  {innerHtml && innerHtml.outerHTML && <div dangerouslySetInnerHTML={{__html : innerHtml.outerHTML}}>

  </div>}
  </>
);};



export default RemoteFetch;

How can I do the same for using components using typescript functions/react-hooks ?