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

package/package.json

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

package/src/index.jsx

@@ -1,8 +1,3 @@
-// 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';
@@ -23,28 +18,12 @@ import './OpenViewStyles.css';
 const rootInstances = new Map();
 
 // 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: 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
+  // 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);
@@ -54,9 +33,10 @@ const getCreateRoot = () => {
   }
   
   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,