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

package/package.json

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

package/src/index.jsx

@@ -1,3 +1,8 @@
+// Import createRoot - webpack will handle externals correctly
+// In development: will be bundled from react-dom/client
+// In production: will be external and resolved to ReactDOM global
+import * as ReactDOMClient from 'react-dom/client';
+
 import ChooseModal from './Components/ChooseModal';
 import ProcessingModal from './Components/ProcessingModal';
 import ErrorModal from './Components/ErrorModal';
@@ -17,10 +22,29 @@ 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
+// Helper function to get createRoot - works in both development and production
 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
+  // Strategy 1: Try the imported module first (works in development when bundled)
+  // Check if createRoot is available directly or as a property
+  let createRootFn = null;
+  
+  if (ReactDOMClient) {
+    // Try direct access
+    if (typeof ReactDOMClient.createRoot === 'function') {
+      createRootFn = ReactDOMClient.createRoot;
+    }
+    // Try as default export property
+    else if (ReactDOMClient.default && typeof ReactDOMClient.default.createRoot === 'function') {
+      createRootFn = ReactDOMClient.default.createRoot;
+    }
+  }
+  
+  if (createRootFn) {
+    return createRootFn;
+  }
+  
+  // Strategy 2: 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);
@@ -29,27 +53,6 @@ const getCreateRoot = () => {
     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. ' +