ARTESCA-13975 // Migration to React 18

package.json

@@ -21,16 +21,16 @@
   "devDependencies": {
     "@module-federation/enhanced": "^0.2.2",
     "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.8",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "jest": "^27.0.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "publishConfig": {
     "access": "public"

src/ModuleFederation.tsx

@@ -105,7 +105,7 @@ export function FederatedComponent({
 }
 
 export const lazyWithModules = <Props extends {}>(
-  functionComponent: FunctionComponent<Props>,
+  functionComponent: FunctionComponent<React.PropsWithChildren<Props>>,
   ...modules: { module: string; url: string; scope: string }[]
 ) => {
   return React.lazy(async () => {
@@ -139,7 +139,7 @@ export const ComponentWithFederatedImports = <Props extends {}>({
   renderOnError?: ReactNode;
   renderOnLoading?: ReactNode;
   componentWithInjectedImports: FunctionComponent<
-    Props & { moduleExports: Record<string, unknown> }
+    React.PropsWithChildren<Props> & { moduleExports: Record<string, unknown> }
   >;
   componentProps: Props;
   federatedImports: {