@seamlessdocs/payment-modals 2.0.0-beta.4 → 2.0.0-beta.6

package/package.json

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

package/src/index.jsx

@@ -1,8 +1,3 @@
-// Import createRoot - webpack will handle this correctly:
-// - In development: bundled from react-dom/client
-// - In production: external, resolved to ReactDOM global via webpack externals
-import { createRoot as createRootFromModule } from 'react-dom/client';
-
 import ChooseModal from './Components/ChooseModal';
 import ProcessingModal from './Components/ProcessingModal';
 import ErrorModal from './Components/ErrorModal';
@@ -24,45 +19,41 @@ const rootInstances = new Map();
 
 // Helper function to get createRoot - handles both bundled (dev) and external (prod) scenarios
 const getCreateRoot = () => {
-  // Strategy 1: Try the imported module (works in development when bundled)
-  if (createRootFromModule && typeof createRootFromModule === 'function') {
-    return createRootFromModule;
+  // 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)
+  // 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
+    // Ignore require errors - module might not be available (especially in production)
   }
   
-  // Strategy 3: Try to require react-dom and access createRoot (works in development)
+  // Strategy 3: Try to require react-dom and access createRoot (works in development only)
   try {
-    const ReactDOM = require('react-dom');
-    if (ReactDOM && typeof ReactDOM.createRoot === 'function') {
-      return ReactDOM.createRoot;
+    const ReactDOMModule = require('react-dom');
+    if (ReactDOMModule && typeof ReactDOMModule.createRoot === 'function') {
+      return ReactDOMModule.createRoot;
     }
   } catch (e) {
     // Ignore require errors
   }
   
-  // Strategy 4: Access ReactDOM from global scope (works in production with externals)
-  // Also works in development if React is loaded globally
-  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;
-  }
-  
   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.'
+    'In production, ReactDOM should be available globally as window.ReactDOM.'
   );
 };