Resolve merge conflicts in dynamic-remotes-runtime-environment-variables

Author: ScriptedAlchemy

advanced-api/automatic-vendor-sharing/app1/webpack.prod.config.js

@@ -1,6 +1,5 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { ModuleFederationPlugin, AutomaticVendorFederation } = require('@module-federation/enhanced');
-const path = require('path');
 
 // Production configuration for optimized builds
 const deps = require('./package.json').dependencies;

advanced-api/automatic-vendor-sharing/app2/webpack.prod.config.js

@@ -1,6 +1,5 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { ModuleFederationPlugin, AutomaticVendorFederation } = require('@module-federation/enhanced');
-const path = require('path');
 
 // Production configuration for optimized builds
 const deps = require('./package.json').dependencies;

advanced-api/automatic-vendor-sharing/e2e/checkAutomaticVendorApps.spec.ts

@@ -15,14 +15,7 @@ async function clickElementWithText(page: Page, selector: string, text: string)
   await page.click(`${selector}:has-text("${text}")`);
 }
 
-async function checkElementBackgroundColor(page: Page, selector: string, expectedColor: string) {
-  const element = page.locator(selector);
-  await element.waitFor({ state: 'visible' });
-  const backgroundColor = await element.evaluate((el) => {
-    return window.getComputedStyle(el).backgroundColor;
-  });
-  expect(backgroundColor).toBe(expectedColor);
-}
+
 
 const appsData = [
   {
@@ -42,7 +35,7 @@ const appsData = [
 test.describe('Automatic Vendor Sharing E2E Tests', () => {
 
   appsData.forEach((appData) => {
-    const { host, appNameText, headerText, buttonColor } = appData;
+    const { host, appNameText, headerText } = appData;
 
     test.describe(`Check ${appNameText}`, () => {
       test(`should display ${appNameText} header and subheader correctly`, async ({ page }) => {

advanced-api/dynamic-remotes-runtime-environment-variables/e2e/checkDynamicRemotesRuntimesApps.spec.ts

@@ -19,8 +19,10 @@ async function openLocalhost(page: Page, port: number) {
   // Wait for the page to load but don't wait for networkidle since env loading might be polling
   await page.waitForLoadState('load');
 
-  // Wait for React to render - either the loading screen or the main content
-  await page.waitForSelector('body > div', { timeout: 10000 });
+  // Wait for the root element to be attached. It may not be visible immediately
+  // (for example, the remote app shows an empty #root while it loads env config),
+  // so we only wait for the element to exist in the DOM.
+  await page.waitForSelector('#root', { state: 'attached', timeout: 10000 });
 
   // Log any errors found
   if (pageErrors.length > 0) {

advanced-api/dynamic-remotes-runtime-environment-variables/host/src/components/App.js

@@ -1,27 +1,23 @@
-import React, { createContext, useCallback, useMemo } from 'react';
+import React, { createContext, useMemo } from 'react';
 import Main from './Main';
 import useFetchJson from '../hooks/useFetchJson';
 
 export const EnvContext = createContext();
 
 const App = () => {
-  const validateData = useCallback((data) => data && typeof data === 'object', []);
-  
-  const fallbackData = useMemo(() => ({
-    API_URL: 'https://fallback.api.com',
-    REMOTE_URL: 'http://localhost:3001/remoteEntry.js'
+  // Memoize options to avoid re-triggering fetch on each render in development
+  const fetchOptions = useMemo(() => ({
+    maxRetries: 2,
+    retryDelay: 500,
+    timeout: 3000,
+    validateData: (data) => data && typeof data === 'object',
+    fallbackData: {
+      API_URL: 'https://fallback.api.com',
+      REMOTE_URL: 'http://localhost:3001/remoteEntry.js'
+    }
   }), []);
 
-  const { data, loading, error, retry } = useFetchJson(
-    '/env-config.json',
-    {
-      maxRetries: 2,
-      retryDelay: 500,
-      timeout: 3000,
-      validateData,
-      fallbackData
-    }
-  );
+  const { data, loading, error, retry } = useFetchJson('/env-config.json', fetchOptions);
 
   if (loading) {
     return (

advanced-api/dynamic-remotes-runtime-environment-variables/host/src/hooks/useFederatedComponent.js

@@ -1,4 +1,4 @@
-import React, { lazy, useEffect, useState, useCallback, useRef } from 'react';
+import { lazy, useEffect, useState, useCallback, useRef } from 'react';
 import { registerRemotes, loadRemote } from '@module-federation/runtime';
 
 // Enhanced loading function with retry logic

advanced-api/dynamic-remotes-runtime-environment-variables/host/src/hooks/useFetchJson.js

@@ -136,20 +136,19 @@ const useFetchJson = (path, options = {}) => {
   }, [fetchData]);
 
   useEffect(() => {
+    // Component may mount twice in React 18 strict mode. Ensure the ref is
+    // reset so subsequent fetches can update state correctly.
+    isMountedRef.current = true;
     fetchData();
-  }, [fetchData]);
 
-  // Cleanup on unmount
-  useEffect(() => {
-    isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
       fetchStartedRef.current = false; // Reset fetch flag on unmount
       if (abortControllerRef.current) {
         abortControllerRef.current.abort();
       }
     };
-  }, [path]);
+  }, [fetchData]);
 
   return { 
     data, 

advanced-api/dynamic-remotes-runtime-environment-variables/remote/src/components/WidgetWrapper.js

@@ -1,22 +1,25 @@
-import React, { createContext } from 'react';
+import React, { createContext, useMemo } from 'react';
 import Widget from './Widget';
 import useFetchJson from '../hooks/useFetchJson';
 
 export const EnvContext = createContext();
 
 // Wraps the Widget component with the EnvContext
 const WidgetWrapper = () => {
+  // Memoize fetch options to prevent repeated fetching in React strict mode
+  const fetchOptions = useMemo(() => ({
+    maxRetries: 3,
+    retryDelay: 1000,
+    timeout: 5000,
+    validateData: (data) => data && typeof data === 'object',
+    fallbackData: {
+      API_URL: 'https://remote.fallback.api.com'
+    }
+  }), []);
+
   const { data, loading, error, retry } = useFetchJson(
     `${__webpack_public_path__}env-config.json`,
-    {
-      maxRetries: 3,
-      retryDelay: 1000,
-      timeout: 5000,
-      validateData: (data) => data && typeof data === 'object',
-      fallbackData: {
-        API_URL: 'https://remote.fallback.api.com'
-      }
-    }
+    fetchOptions
   );
 
   if (loading) {

advanced-api/dynamic-remotes-runtime-environment-variables/remote/src/hooks/useFetchJson.js

@@ -57,6 +57,7 @@ const useFetchJson = (path, options = {}) => {
         const response = await Promise.race([fetchPromise, timeoutPromise]);
 
         if (signal.aborted || !isMountedRef.current) {
+          setIsLoading(false);
           return;
         }
 
@@ -124,18 +125,19 @@ const useFetchJson = (path, options = {}) => {
   }, [fetchData]);
 
   useEffect(() => {
+    // Reset mount flag on each mount. React 18 strict mode mounts components
+    // twice in development, so without resetting this flag the fetch results
+    // would be ignored on the second mount.
+    isMountedRef.current = true;
     fetchData();
-  }, [fetchData]);
 
-  // Cleanup on unmount
-  useEffect(() => {
     return () => {
       isMountedRef.current = false;
       if (abortControllerRef.current) {
         abortControllerRef.current.abort();
       }
     };
-  }, []);
+  }, [fetchData]);
 
   return { 
     data, 

advanced-api/dynamic-remotes-synchronous-imports/app1/public/index.html

@@ -1,5 +1,8 @@
 <html>
   <body>
     <div id="root"></div>
+    <script>
+      window.app2Url = 'http://localhost:3002';
+    </script>
   </body>
 </html>