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

package/package.json

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

package/src/index.jsx

@@ -17,10 +17,13 @@ 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
+// IMPORTANT: This function ONLY uses the global ReactDOM to avoid conflicts
+// In development, React must be exposed globally (webpack will bundle it)
+// In production, React is external and must be available globally
 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
+  // Access ReactDOM from global scope - this is the ONLY way we access React
+  // This prevents multiple React instances and internal conflicts
   const ReactDOM = (typeof window !== 'undefined' && window.ReactDOM) 
     || (typeof global !== 'undefined' && global.ReactDOM)
     || (typeof self !== 'undefined' && self.ReactDOM);
@@ -29,31 +32,11 @@ 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. ' +
-    'In production, ReactDOM should be available globally as window.ReactDOM.'
+    'createRoot is not available. Make sure React 18 is loaded and ReactDOM is available globally. ' +
+    'ReactDOM should be accessible as window.ReactDOM. ' +
+    'In development, ensure React is loaded before this script. ' +
+    'In production, React must be external and available as window.ReactDOM.'
   );
 };
 

package/webpack.config.js

@@ -33,12 +33,6 @@ module.exports = (_env, argv) => {
         commonjs2: 'react-dom',
         amd: 'react-dom',
         root: 'ReactDOM'
-      },
-      'react-dom/client': {
-        commonjs: 'react-dom',
-        commonjs2: 'react-dom',
-        amd: 'react-dom',
-        root: 'ReactDOM'
       }
     } : {},
     module: {
@@ -101,8 +95,23 @@ module.exports = (_env, argv) => {
         template: path.join(__dirname, 'index.html'),
         inject: 'body',
         scriptLoading: 'blocking'
+      }),
+      // In development, expose ReactDOM globally at the start of the bundle
+      !isProduction && new webpack.BannerPlugin({
+        banner: `
+(function() {
+  try {
+    if (typeof window !== 'undefined' && typeof require !== 'undefined' && !window.ReactDOM) {
+      var ReactDOM = require('react-dom');
+      if (ReactDOM) window.ReactDOM = ReactDOM;
+    }
+  } catch(e) {}
+})();
+        `.trim(),
+        raw: true,
+        entryOnly: true
       })
-    ],
+    ].filter(Boolean),
     devServer: {
       port: 9000,
       compress: true,