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

package/package.json

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

package/src/index.jsx

@@ -1,4 +1,7 @@
-import { createRoot } from 'react-dom/client';
+// 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';
@@ -19,6 +22,50 @@ 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: Try the imported module (works in development when bundled)
+  if (createRootFromModule && typeof createRootFromModule === 'function') {
+    return createRootFromModule;
+  }
+  
+  // Strategy 2: Try to require react-dom/client directly (works in development)
+  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
+  }
+  
+  // Strategy 3: Try to require react-dom and access createRoot (works in development)
+  try {
+    const ReactDOM = require('react-dom');
+    if (ReactDOM && typeof ReactDOM.createRoot === 'function') {
+      return ReactDOM.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.'
+  );
+};
+
 // Helper function to render with React 18 createRoot
 const renderModal = (element, containerId) => {
   const containerElement = document.getElementById(containerId);
@@ -30,6 +77,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: [