@seamlessdocs/payment-modals 2.0.0-beta.3 → 2.0.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamlessdocs/payment-modals",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.5",
   "description": "Payment modals for SeamlessDocs",
   "main": "build/payment-modals.js",
   "repository": {

package/src/index.jsx

@@ -1,5 +1,3 @@
-import { createRoot } from 'react-dom/client';
-
 import ChooseModal from './Components/ChooseModal';
 import ProcessingModal from './Components/ProcessingModal';
 import ErrorModal from './Components/ErrorModal';
@@ -19,6 +17,46 @@ import './OpenViewStyles.css';
 // Store root instances to manage React 18 roots
 const rootInstances = new Map();
 
+// Helper function to get createRoot - handles both bundled (dev) and external (prod) scenarios
+const getCreateRoot = () => {
+  // Strategy 1: Access ReactDOM from global scope FIRST (works in production with externals)
+  // This is the primary method for production builds where react-dom is external
+  const ReactDOM = (typeof window !== 'undefined' && window.ReactDOM) 
+    || (typeof global !== 'undefined' && global.ReactDOM)
+    || (typeof self !== 'undefined' && self.ReactDOM);
+  
+  if (ReactDOM && typeof ReactDOM.createRoot === 'function') {
+    return ReactDOM.createRoot;
+  }
+  
+  // Strategy 2: Try to require react-dom/client directly (works in development only)
+  // Only use this in development when react-dom is bundled
+  try {
+    const reactDomClient = require('react-dom/client');
+    if (reactDomClient && reactDomClient.createRoot && typeof reactDomClient.createRoot === 'function') {
+      return reactDomClient.createRoot;
+    }
+  } catch (e) {
+    // Ignore require errors - module might not be available (especially in production)
+  }
+  
+  // Strategy 3: Try to require react-dom and access createRoot (works in development only)
+  try {
+    const ReactDOMModule = require('react-dom');
+    if (ReactDOMModule && typeof ReactDOMModule.createRoot === 'function') {
+      return ReactDOMModule.createRoot;
+    }
+  } catch (e) {
+    // Ignore require errors
+  }
+  
+  throw new Error(
+    'createRoot is not available. Make sure React 18 is loaded. ' +
+    'In development, react-dom should be bundled. ' +
+    'In production, ReactDOM should be available globally as window.ReactDOM.'
+  );
+};
+
 // Helper function to render with React 18 createRoot
 const renderModal = (element, containerId) => {
   const containerElement = document.getElementById(containerId);
@@ -30,6 +68,7 @@ const renderModal = (element, containerId) => {
   // Get or create root instance
   let root = rootInstances.get(containerId);
   if (!root) {
+    const createRoot = getCreateRoot();
     root = createRoot(containerElement);
     rootInstances.set(containerId, root);
   }

package/webpack.config.js

@@ -34,6 +34,12 @@ module.exports = (_env, argv) => {
         amd: 'react-dom',
         root: 'ReactDOM'
       },
+      'react-dom/client': {
+        commonjs: 'react-dom',
+        commonjs2: 'react-dom',
+        amd: 'react-dom',
+        root: 'ReactDOM'
+      }
     } : {},
     module: {
       rules: [