fix: stabilize federated-css e2e

federated-css/consumers-nextjs/any-combination/components/nextjs-remote-page.js

@@ -0,0 +1 @@
+export { default } from './combined-pages';

federated-css/consumers-nextjs/any-combination/mf-plugin.config.js

@@ -16,8 +16,9 @@ module.exports = {
       requiredVersion: false,
       singleton: true,
     },
-  },
-  extraOptions: {
-    skipSharingNextInternals: true,
+    'react-dom': {
+      requiredVersion: false,
+      singleton: true,
+    },
   },
 };

federated-css/consumers-nextjs/any-combination/next.config.js

@@ -1,4 +1,4 @@
-const NextFederationPlugin = require('@module-federation/nextjs-mf/lib/NextFederationPlugin');
+const { NextFederationPlugin } = require('@module-federation/nextjs-mf');
 const mfConfig = require('./mf-plugin.config');
 
 module.exports = {
@@ -8,8 +8,13 @@ module.exports = {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
       });
+
       config.plugins.push(new NextFederationPlugin(mfConfig));
+    } else {
+      config.externals = config.externals || [];
+      config.externals.push(/^expose_/);
     }
+
     return config;
   },
   // your original next.config.js export

federated-css/consumers-nextjs/any-combination/package.json

@@ -2,8 +2,8 @@
   "name": "@federated-css/next-any-combination",
   "version": "0.1.0",
   "scripts": {
-    "build": "next build",
-    "start": "next dev -p 8080",
+    "build": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next build",
+    "start": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next dev -p 8080",
     "lint": "next lint"
   },
   "dependencies": {
@@ -17,6 +17,7 @@
   "devDependencies": {
     "@types/react": "18.3.3",
     "eslint": "9.6.0",
-    "eslint-config-next": "14.2.4"
+    "eslint-config-next": "14.2.4",
+    "cross-env": "7.0.3"
   }
-}
+}

federated-css/consumers-nextjs/any-combination/pages/_app.js

@@ -1,3 +1,4 @@
+import '../utils/ensureNmdPolyfill';
 import '../styles/globals.css';
 
 function MyApp({ Component, pageProps }) {

federated-css/consumers-nextjs/any-combination/utils/ensureNmdPolyfill.js

@@ -0,0 +1,44 @@
+const runtimeNmd = (module) => {
+  module.paths = module.paths || [];
+  if (!module.children) {
+    module.children = [];
+  }
+  return module;
+};
+
+export const ensureNmdPolyfill = () => {
+  const runtimes = [];
+
+  if (typeof __webpack_require__ === 'function') {
+    runtimes.push(__webpack_require__);
+  }
+
+  if (
+    typeof globalThis !== 'undefined' &&
+    typeof globalThis.__webpack_require__ === 'function'
+  ) {
+    runtimes.push(globalThis.__webpack_require__);
+  }
+
+  if (typeof Function.prototype.nmd !== 'function') {
+    Function.prototype.nmd = runtimeNmd;
+  }
+
+  for (const runtime of runtimes) {
+    if (typeof runtime.nmd !== 'function') {
+      runtime.nmd = runtimeNmd;
+    }
+  }
+
+  if (
+    typeof globalThis !== 'undefined' &&
+    typeof globalThis.__webpack_require__ !== 'function' &&
+    runtimes.length > 0
+  ) {
+    globalThis.__webpack_require__ = runtimes[0];
+  }
+};
+
+ensureNmdPolyfill();
+
+export default ensureNmdPolyfill;

federated-css/consumers-nextjs/combination-of-4/components/nextjs-remote-page.js

@@ -0,0 +1 @@
+export { default } from './combined-pages';

federated-css/consumers-nextjs/combination-of-4/mf-plugin.config.js

@@ -18,8 +18,9 @@ module.exports = {
       requiredVersion: false,
       singleton: true,
     },
-  },
-  extraOptions: {
-    skipSharingNextInternals: true,
+    'react-dom': {
+      requiredVersion: false,
+      singleton: true,
+    },
   },
 };

federated-css/consumers-nextjs/combination-of-4/next.config.js

@@ -1,4 +1,4 @@
-const NextFederationPlugin = require('@module-federation/nextjs-mf/lib/NextFederationPlugin');
+const { NextFederationPlugin } = require('@module-federation/nextjs-mf');
 const mfConfig = require('./mf-plugin.config');
 
 module.exports = {
@@ -8,8 +8,13 @@ module.exports = {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
       });
+
       config.plugins.push(new NextFederationPlugin(mfConfig));
+    } else {
+      config.externals = config.externals || [];
+      config.externals.push(/^expose_/);
     }
+
     return config;
   },
   // your original next.config.js export

federated-css/consumers-nextjs/combination-of-4/package.json

@@ -2,8 +2,8 @@
   "name": "@federated-css/next-combination-of-4",
   "version": "0.1.0",
   "scripts": {
-    "build": "next build",
-    "start": "next dev -p 8081",
+    "build": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next build",
+    "start": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next dev -p 8081",
     "lint": "next lint"
   },
   "dependencies": {
@@ -17,6 +17,7 @@
   "devDependencies": {
     "@types/react": "18.3.3",
     "eslint": "9.6.0",
-    "eslint-config-next": "14.2.4"
+    "eslint-config-next": "14.2.4",
+    "cross-env": "7.0.3"
   }
-}
+}

federated-css/consumers-nextjs/combination-of-4/pages/_app.js

@@ -1,3 +1,4 @@
+import '../utils/ensureNmdPolyfill';
 import '../styles/globals.css';
 
 function MyApp({ Component, pageProps }) {

federated-css/consumers-nextjs/combination-of-4/utils/ensureNmdPolyfill.js

@@ -0,0 +1,44 @@
+const runtimeNmd = (module) => {
+  module.paths = module.paths || [];
+  if (!module.children) {
+    module.children = [];
+  }
+  return module;
+};
+
+export const ensureNmdPolyfill = () => {
+  const runtimes = [];
+
+  if (typeof __webpack_require__ === 'function') {
+    runtimes.push(__webpack_require__);
+  }
+
+  if (
+    typeof globalThis !== 'undefined' &&
+    typeof globalThis.__webpack_require__ === 'function'
+  ) {
+    runtimes.push(globalThis.__webpack_require__);
+  }
+
+  if (typeof Function.prototype.nmd !== 'function') {
+    Function.prototype.nmd = runtimeNmd;
+  }
+
+  for (const runtime of runtimes) {
+    if (typeof runtime.nmd !== 'function') {
+      runtime.nmd = runtimeNmd;
+    }
+  }
+
+  if (
+    typeof globalThis !== 'undefined' &&
+    typeof globalThis.__webpack_require__ !== 'function' &&
+    runtimes.length > 0
+  ) {
+    globalThis.__webpack_require__ = runtimes[0];
+  }
+};
+
+ensureNmdPolyfill();
+
+export default ensureNmdPolyfill;

federated-css/consumers-nextjs/jss-and-tailwind-global/components/nextjs-remote-page.js

@@ -0,0 +1 @@
+export { default } from './combined-pages';

federated-css/consumers-nextjs/jss-and-tailwind-global/mf-plugin.config.js

@@ -16,8 +16,9 @@ module.exports = {
       requiredVersion: false,
       singleton: true,
     },
-  },
-  extraOptions: {
-    skipSharingNextInternals: true,
+    'react-dom': {
+      requiredVersion: false,
+      singleton: true,
+    },
   },
 };

federated-css/consumers-nextjs/jss-and-tailwind-global/next.config.js

@@ -1,4 +1,4 @@
-const NextFederationPlugin = require('@module-federation/nextjs-mf/lib/NextFederationPlugin');
+const { NextFederationPlugin } = require('@module-federation/nextjs-mf');
 const mfConfig = require('./mf-plugin.config');
 
 module.exports = {
@@ -8,8 +8,13 @@ module.exports = {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
       });
+
       config.plugins.push(new NextFederationPlugin(mfConfig));
+    } else {
+      config.externals = config.externals || [];
+      config.externals.push(/^expose_/);
     }
+
     return config;
   },
   // your original next.config.js export

federated-css/consumers-nextjs/jss-and-tailwind-global/package.json

@@ -2,8 +2,8 @@
   "name": "@federated-css/next-jss-and-tailwind-global",
   "version": "0.1.0",
   "scripts": {
-    "build": "next build",
-    "start": "next dev -p 8082",
+    "build": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next build",
+    "start": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next dev -p 8082",
     "lint": "next lint"
   },
   "dependencies": {
@@ -17,6 +17,7 @@
   "devDependencies": {
     "@types/react": "18.3.3",
     "eslint": "9.6.0",
-    "eslint-config-next": "14.2.4"
+    "eslint-config-next": "14.2.4",
+    "cross-env": "7.0.3"
   }
-}
+}

federated-css/consumers-nextjs/jss-and-tailwind-global/pages/_app.js

@@ -1,3 +1,4 @@
+import '../utils/ensureNmdPolyfill';
 import '../styles/globals.css';
 
 function MyApp({ Component, pageProps }) {

federated-css/consumers-nextjs/jss-and-tailwind-global/utils/ensureNmdPolyfill.js

@@ -0,0 +1,44 @@
+const runtimeNmd = (module) => {
+  module.paths = module.paths || [];
+  if (!module.children) {
+    module.children = [];
+  }
+  return module;
+};
+
+export const ensureNmdPolyfill = () => {
+  const runtimes = [];
+
+  if (typeof __webpack_require__ === 'function') {
+    runtimes.push(__webpack_require__);
+  }
+
+  if (
+    typeof globalThis !== 'undefined' &&
+    typeof globalThis.__webpack_require__ === 'function'
+  ) {
+    runtimes.push(globalThis.__webpack_require__);
+  }
+
+  if (typeof Function.prototype.nmd !== 'function') {
+    Function.prototype.nmd = runtimeNmd;
+  }
+
+  for (const runtime of runtimes) {
+    if (typeof runtime.nmd !== 'function') {
+      runtime.nmd = runtimeNmd;
+    }
+  }
+
+  if (
+    typeof globalThis !== 'undefined' &&
+    typeof globalThis.__webpack_require__ !== 'function' &&
+    runtimes.length > 0
+  ) {
+    globalThis.__webpack_require__ = runtimes[0];
+  }
+};
+
+ensureNmdPolyfill();
+
+export default ensureNmdPolyfill;

federated-css/consumers-nextjs/jss-css-and-tailwind-module/components/nextjs-remote-page.js

@@ -0,0 +1 @@
+export { default } from './combined-pages';

federated-css/consumers-nextjs/jss-css-and-tailwind-module/mf-plugin.config.js

@@ -17,8 +17,9 @@ module.exports = {
       requiredVersion: false,
       singleton: true,
     },
-  },
-  extraOptions: {
-    skipSharingNextInternals: true,
+    'react-dom': {
+      requiredVersion: false,
+      singleton: true,
+    },
   },
 };

federated-css/consumers-nextjs/jss-css-and-tailwind-module/next.config.js

@@ -1,4 +1,4 @@
-const NextFederationPlugin = require('@module-federation/nextjs-mf/lib/NextFederationPlugin');
+const { NextFederationPlugin } = require('@module-federation/nextjs-mf');
 const mfConfig = require('./mf-plugin.config');
 
 module.exports = {
@@ -8,8 +8,13 @@ module.exports = {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
       });
+
       config.plugins.push(new NextFederationPlugin(mfConfig));
+    } else {
+      config.externals = config.externals || [];
+      config.externals.push(/^expose_/);
     }
+
     return config;
   },
   // your original next.config.js export

federated-css/consumers-nextjs/jss-css-and-tailwind-module/package.json

@@ -2,8 +2,8 @@
   "name": "@federated-css/next-jss-css-and-tailwind-module",
   "version": "0.1.0",
   "scripts": {
-    "build": "next build",
-    "start": "next dev -p 8083",
+    "build": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next build",
+    "start": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next dev -p 8083",
     "lint": "next lint"
   },
   "dependencies": {
@@ -17,6 +17,7 @@
   "devDependencies": {
     "@types/react": "18.3.3",
     "eslint": "9.6.0",
-    "eslint-config-next": "14.2.4"
+    "eslint-config-next": "14.2.4",
+    "cross-env": "7.0.3"
   }
-}
+}

federated-css/consumers-nextjs/jss-css-and-tailwind-module/pages/_app.js

@@ -1,3 +1,4 @@
+import '../utils/ensureNmdPolyfill';
 import '../styles/globals.css';
 
 function MyApp({ Component, pageProps }) {