Use mfe plugin for chrome shell

Notes:
- Refresh plugin needs to be reconfigured in order to not cause false positive errors during shell init phase
- There is an issue with shared scope between MFE and Vanilla plugins, seems to be some sort of race conditions, sometimes the child modules are unable to access singleton instances. Problematic for React context and hooks

config/webpack.config.js

@@ -33,7 +33,7 @@ const commonConfig = ({ dev }) => {
       ? // HMR request react, react-dom and react-refresh/runtime to be in the same chunk
         {
           main: path.resolve(__dirname, '../src/index.ts'),
-          vendors: ['react', 'react-dom', 'react-refresh/runtime'],
+          // vendors: ['react', 'react-dom', 'react-refresh/runtime'],
         }
       : path.resolve(__dirname, '../src/index.ts'),
     output: {
@@ -70,6 +70,9 @@ const commonConfig = ({ dev }) => {
         unfetch: path.resolve(__dirname, '../src/moduleOverrides/unfetch'),
         '@scalprum/core': path.resolve(__dirname, '../node_modules/@scalprum/core'),
         '@scalprum/react-core': path.resolve(__dirname, '../node_modules/@scalprum/react-core'),
+        // this is critical to froce MFE plugin to pick the correct version of react
+        react: path.resolve(__dirname, '../node_modules/react'),
+        'react-dom': path.resolve(__dirname, '../node_modules/react-dom'),
       },
       fallback: {
         path: require.resolve('path-browserify'),
@@ -87,7 +90,7 @@ const commonConfig = ({ dev }) => {
       ...(dev
         ? {
             // for HMR all runtime chunks must be in a single file
-            runtimeChunk: 'single',
+            // runtimeChunk: 'single',
           }
         : {}),
     },

config/webpack.plugins.js

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const webpack = require('webpack');
 const resolve = require('path').resolve;
-const { ModuleFederationPlugin } = require('webpack').container;
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const { ProvidePlugin } = require('webpack');
@@ -10,6 +9,8 @@ const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const getDynamicModules = require('./get-dynamic-modules');
 
+const MFP = require('@module-federation/enhanced').ModuleFederationPlugin;
+
 const deps = require('../package.json').dependencies;
 
 const plugins = (dev = false, beta = false, restricted = false) => {
@@ -30,7 +31,11 @@ const plugins = (dev = false, beta = false, restricted = false) => {
       filename: dev ? '[name].css' : '[name].[contenthash].css',
       ignoreOrder: true,
     }),
-    new ModuleFederationPlugin({
+    new MFP({
+      library: {
+        type: 'global',
+        name: 'chrome',
+      },
       name: 'chrome',
       filename: dev ? 'chrome.js' : 'chrome.[contenthash].js',
       exposes: {
@@ -84,7 +89,7 @@ const plugins = (dev = false, beta = false, restricted = false) => {
     new webpack.DefinePlugin({
       __SENTRY_DEBUG__: false,
     }),
-    ...(dev ? [new ReactRefreshWebpackPlugin()] : []),
+    // ...(dev ? [new ReactRefreshWebpackPlugin()] : []),
   ];
 };