diff --git a/federated-css/consumers-nextjs/any-combination/components/nextjs-remote-page.js b/federated-css/consumers-nextjs/any-combination/components/nextjs-remote-page.js new file mode 100644 index 00000000000..b7ef17ce2fa --- /dev/null +++ b/federated-css/consumers-nextjs/any-combination/components/nextjs-remote-page.js @@ -0,0 +1 @@ +export { default } from './combined-pages'; diff --git a/federated-css/consumers-nextjs/any-combination/mf-plugin.config.js b/federated-css/consumers-nextjs/any-combination/mf-plugin.config.js index ea150e1a0cb..25f719dd00d 100644 --- a/federated-css/consumers-nextjs/any-combination/mf-plugin.config.js +++ b/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, + }, }, }; diff --git a/federated-css/consumers-nextjs/any-combination/next.config.js b/federated-css/consumers-nextjs/any-combination/next.config.js index e18dfbb83fa..72916138b3f 100644 --- a/federated-css/consumers-nextjs/any-combination/next.config.js +++ b/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 diff --git a/federated-css/consumers-nextjs/any-combination/package.json b/federated-css/consumers-nextjs/any-combination/package.json index e2159e79998..d8e28cfeaac 100644 --- a/federated-css/consumers-nextjs/any-combination/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/federated-css/consumers-nextjs/any-combination/pages/_app.js b/federated-css/consumers-nextjs/any-combination/pages/_app.js index 244e40bb5b0..485e37584c0 100644 --- a/federated-css/consumers-nextjs/any-combination/pages/_app.js +++ b/federated-css/consumers-nextjs/any-combination/pages/_app.js @@ -1,3 +1,4 @@ +import '../utils/ensureNmdPolyfill'; import '../styles/globals.css'; function MyApp({ Component, pageProps }) { diff --git a/federated-css/consumers-nextjs/any-combination/utils/ensureNmdPolyfill.js b/federated-css/consumers-nextjs/any-combination/utils/ensureNmdPolyfill.js new file mode 100644 index 00000000000..e15e583f54f --- /dev/null +++ b/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; diff --git a/federated-css/consumers-nextjs/combination-of-4/components/nextjs-remote-page.js b/federated-css/consumers-nextjs/combination-of-4/components/nextjs-remote-page.js new file mode 100644 index 00000000000..b7ef17ce2fa --- /dev/null +++ b/federated-css/consumers-nextjs/combination-of-4/components/nextjs-remote-page.js @@ -0,0 +1 @@ +export { default } from './combined-pages'; diff --git a/federated-css/consumers-nextjs/combination-of-4/mf-plugin.config.js b/federated-css/consumers-nextjs/combination-of-4/mf-plugin.config.js index 185cdd00ed8..2d1d43cd0d8 100644 --- a/federated-css/consumers-nextjs/combination-of-4/mf-plugin.config.js +++ b/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, + }, }, }; diff --git a/federated-css/consumers-nextjs/combination-of-4/next.config.js b/federated-css/consumers-nextjs/combination-of-4/next.config.js index e18dfbb83fa..72916138b3f 100644 --- a/federated-css/consumers-nextjs/combination-of-4/next.config.js +++ b/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 diff --git a/federated-css/consumers-nextjs/combination-of-4/package.json b/federated-css/consumers-nextjs/combination-of-4/package.json index bacb19322ee..191e7fa9a52 100644 --- a/federated-css/consumers-nextjs/combination-of-4/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/federated-css/consumers-nextjs/combination-of-4/pages/_app.js b/federated-css/consumers-nextjs/combination-of-4/pages/_app.js index 244e40bb5b0..485e37584c0 100644 --- a/federated-css/consumers-nextjs/combination-of-4/pages/_app.js +++ b/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 }) { diff --git a/federated-css/consumers-nextjs/combination-of-4/utils/ensureNmdPolyfill.js b/federated-css/consumers-nextjs/combination-of-4/utils/ensureNmdPolyfill.js new file mode 100644 index 00000000000..e15e583f54f --- /dev/null +++ b/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; diff --git a/federated-css/consumers-nextjs/jss-and-tailwind-global/components/nextjs-remote-page.js b/federated-css/consumers-nextjs/jss-and-tailwind-global/components/nextjs-remote-page.js new file mode 100644 index 00000000000..b7ef17ce2fa --- /dev/null +++ b/federated-css/consumers-nextjs/jss-and-tailwind-global/components/nextjs-remote-page.js @@ -0,0 +1 @@ +export { default } from './combined-pages'; diff --git a/federated-css/consumers-nextjs/jss-and-tailwind-global/mf-plugin.config.js b/federated-css/consumers-nextjs/jss-and-tailwind-global/mf-plugin.config.js index 0014b3a64b4..cfbe8eb8576 100644 --- a/federated-css/consumers-nextjs/jss-and-tailwind-global/mf-plugin.config.js +++ b/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, + }, }, }; diff --git a/federated-css/consumers-nextjs/jss-and-tailwind-global/next.config.js b/federated-css/consumers-nextjs/jss-and-tailwind-global/next.config.js index e18dfbb83fa..72916138b3f 100644 --- a/federated-css/consumers-nextjs/jss-and-tailwind-global/next.config.js +++ b/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 diff --git a/federated-css/consumers-nextjs/jss-and-tailwind-global/package.json b/federated-css/consumers-nextjs/jss-and-tailwind-global/package.json index a0b2802b4df..22e3b23506e 100644 --- a/federated-css/consumers-nextjs/jss-and-tailwind-global/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/federated-css/consumers-nextjs/jss-and-tailwind-global/pages/_app.js b/federated-css/consumers-nextjs/jss-and-tailwind-global/pages/_app.js index 244e40bb5b0..485e37584c0 100644 --- a/federated-css/consumers-nextjs/jss-and-tailwind-global/pages/_app.js +++ b/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 }) { diff --git a/federated-css/consumers-nextjs/jss-and-tailwind-global/utils/ensureNmdPolyfill.js b/federated-css/consumers-nextjs/jss-and-tailwind-global/utils/ensureNmdPolyfill.js new file mode 100644 index 00000000000..e15e583f54f --- /dev/null +++ b/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; diff --git a/federated-css/consumers-nextjs/jss-css-and-tailwind-module/components/nextjs-remote-page.js b/federated-css/consumers-nextjs/jss-css-and-tailwind-module/components/nextjs-remote-page.js new file mode 100644 index 00000000000..b7ef17ce2fa --- /dev/null +++ b/federated-css/consumers-nextjs/jss-css-and-tailwind-module/components/nextjs-remote-page.js @@ -0,0 +1 @@ +export { default } from './combined-pages'; diff --git a/federated-css/consumers-nextjs/jss-css-and-tailwind-module/mf-plugin.config.js b/federated-css/consumers-nextjs/jss-css-and-tailwind-module/mf-plugin.config.js index d7b7721e2e8..dc74912753b 100644 --- a/federated-css/consumers-nextjs/jss-css-and-tailwind-module/mf-plugin.config.js +++ b/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, + }, }, }; diff --git a/federated-css/consumers-nextjs/jss-css-and-tailwind-module/next.config.js b/federated-css/consumers-nextjs/jss-css-and-tailwind-module/next.config.js index e18dfbb83fa..72916138b3f 100644 --- a/federated-css/consumers-nextjs/jss-css-and-tailwind-module/next.config.js +++ b/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 diff --git a/federated-css/consumers-nextjs/jss-css-and-tailwind-module/package.json b/federated-css/consumers-nextjs/jss-css-and-tailwind-module/package.json index 634c3e216eb..82392d04b6b 100644 --- a/federated-css/consumers-nextjs/jss-css-and-tailwind-module/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/federated-css/consumers-nextjs/jss-css-and-tailwind-module/pages/_app.js b/federated-css/consumers-nextjs/jss-css-and-tailwind-module/pages/_app.js index 244e40bb5b0..485e37584c0 100644 --- a/federated-css/consumers-nextjs/jss-css-and-tailwind-module/pages/_app.js +++ b/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 }) { diff --git a/federated-css/consumers-nextjs/jss-css-and-tailwind-module/utils/ensureNmdPolyfill.js b/federated-css/consumers-nextjs/jss-css-and-tailwind-module/utils/ensureNmdPolyfill.js new file mode 100644 index 00000000000..e15e583f54f --- /dev/null +++ b/federated-css/consumers-nextjs/jss-css-and-tailwind-module/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; diff --git a/federated-css/consumers-nextjs/less-and-styled-component/components/nextjs-remote-page.js b/federated-css/consumers-nextjs/less-and-styled-component/components/nextjs-remote-page.js new file mode 100644 index 00000000000..b7ef17ce2fa --- /dev/null +++ b/federated-css/consumers-nextjs/less-and-styled-component/components/nextjs-remote-page.js @@ -0,0 +1 @@ +export { default } from './combined-pages'; diff --git a/federated-css/consumers-nextjs/less-and-styled-component/mf-plugin.config.js b/federated-css/consumers-nextjs/less-and-styled-component/mf-plugin.config.js index 53882b4af5a..1f938948f83 100644 --- a/federated-css/consumers-nextjs/less-and-styled-component/mf-plugin.config.js +++ b/federated-css/consumers-nextjs/less-and-styled-component/mf-plugin.config.js @@ -16,8 +16,9 @@ module.exports = { requiredVersion: false, singleton: true, }, - }, - extraOptions: { - skipSharingNextInternals: true, + 'react-dom': { + requiredVersion: false, + singleton: true, + }, }, }; diff --git a/federated-css/consumers-nextjs/less-and-styled-component/next.config.js b/federated-css/consumers-nextjs/less-and-styled-component/next.config.js index e18dfbb83fa..72916138b3f 100644 --- a/federated-css/consumers-nextjs/less-and-styled-component/next.config.js +++ b/federated-css/consumers-nextjs/less-and-styled-component/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 diff --git a/federated-css/consumers-nextjs/less-and-styled-component/package.json b/federated-css/consumers-nextjs/less-and-styled-component/package.json index 5829e013984..4d8516e2d45 100644 --- a/federated-css/consumers-nextjs/less-and-styled-component/package.json +++ b/federated-css/consumers-nextjs/less-and-styled-component/package.json @@ -2,8 +2,8 @@ "name": "@federated-css/next-less-and-styled-component", "version": "0.1.0", "scripts": { - "build": "next build", - "start": "next dev -p 8084", + "build": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next build", + "start": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next dev -p 8084", "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" } -} \ No newline at end of file +} diff --git a/federated-css/consumers-nextjs/less-and-styled-component/pages/_app.js b/federated-css/consumers-nextjs/less-and-styled-component/pages/_app.js index 244e40bb5b0..485e37584c0 100644 --- a/federated-css/consumers-nextjs/less-and-styled-component/pages/_app.js +++ b/federated-css/consumers-nextjs/less-and-styled-component/pages/_app.js @@ -1,3 +1,4 @@ +import '../utils/ensureNmdPolyfill'; import '../styles/globals.css'; function MyApp({ Component, pageProps }) { diff --git a/federated-css/consumers-nextjs/less-and-styled-component/utils/ensureNmdPolyfill.js b/federated-css/consumers-nextjs/less-and-styled-component/utils/ensureNmdPolyfill.js new file mode 100644 index 00000000000..e15e583f54f --- /dev/null +++ b/federated-css/consumers-nextjs/less-and-styled-component/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; diff --git a/federated-css/consumers-react/combination-of-5/rspack.config.js b/federated-css/consumers-react/combination-of-5/rspack.config.js index aa561d9a851..59f92d8d8f9 100644 --- a/federated-css/consumers-react/combination-of-5/rspack.config.js +++ b/federated-css/consumers-react/combination-of-5/rspack.config.js @@ -4,7 +4,7 @@ const path = require('path'); const mfConfig = require('./mf-plugin.config'); module.exports = { - entry: './src/index', + entry: ['./src/ensureNmdPolyfill', './src/index'], mode: 'development', devServer: { static: { diff --git a/federated-css/consumers-react/combination-of-5/src/bootstrap.js b/federated-css/consumers-react/combination-of-5/src/bootstrap.js index 129ffb0c0f9..456c0791096 100644 --- a/federated-css/consumers-react/combination-of-5/src/bootstrap.js +++ b/federated-css/consumers-react/combination-of-5/src/bootstrap.js @@ -1,3 +1,4 @@ +import './ensureNmdPolyfill'; import App from './App'; import React from 'react'; import { createRoot } from 'react-dom/client'; diff --git a/federated-css/consumers-react/combination-of-5/src/ensureNmdPolyfill.js b/federated-css/consumers-react/combination-of-5/src/ensureNmdPolyfill.js new file mode 100644 index 00000000000..e15e583f54f --- /dev/null +++ b/federated-css/consumers-react/combination-of-5/src/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; diff --git a/federated-css/consumers-react/css-module-and-jss/rspack.config.js b/federated-css/consumers-react/css-module-and-jss/rspack.config.js index e179231957f..eff91a8b8e1 100644 --- a/federated-css/consumers-react/css-module-and-jss/rspack.config.js +++ b/federated-css/consumers-react/css-module-and-jss/rspack.config.js @@ -4,7 +4,7 @@ const path = require('path'); const mfConfig = require('./mf-plugin.config'); module.exports = { - entry: './src/index', + entry: ['./src/ensureNmdPolyfill', './src/index'], mode: 'development', devServer: { static: { diff --git a/federated-css/consumers-react/css-module-and-jss/src/bootstrap.js b/federated-css/consumers-react/css-module-and-jss/src/bootstrap.js index 129ffb0c0f9..456c0791096 100644 --- a/federated-css/consumers-react/css-module-and-jss/src/bootstrap.js +++ b/federated-css/consumers-react/css-module-and-jss/src/bootstrap.js @@ -1,3 +1,4 @@ +import './ensureNmdPolyfill'; import App from './App'; import React from 'react'; import { createRoot } from 'react-dom/client'; diff --git a/federated-css/consumers-react/css-module-and-jss/src/ensureNmdPolyfill.js b/federated-css/consumers-react/css-module-and-jss/src/ensureNmdPolyfill.js new file mode 100644 index 00000000000..e15e583f54f --- /dev/null +++ b/federated-css/consumers-react/css-module-and-jss/src/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; diff --git a/federated-css/consumers-react/less-and-scss/rspack.config.js b/federated-css/consumers-react/less-and-scss/rspack.config.js index 062ee0e9574..4b121d2ee62 100644 --- a/federated-css/consumers-react/less-and-scss/rspack.config.js +++ b/federated-css/consumers-react/less-and-scss/rspack.config.js @@ -1,5 +1,5 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); -const { ModuleFederationPlugin } = require('@module-federation/enhanced'); +const { ModuleFederationPlugin } = require('@rspack/core').container; const path = require('path'); const mfConfig = require('./mf-plugin.config'); diff --git a/federated-css/consumers-react/tailwind-module-and-jss/src/bootstrap.js b/federated-css/consumers-react/tailwind-module-and-jss/src/bootstrap.js index 129ffb0c0f9..456c0791096 100644 --- a/federated-css/consumers-react/tailwind-module-and-jss/src/bootstrap.js +++ b/federated-css/consumers-react/tailwind-module-and-jss/src/bootstrap.js @@ -1,3 +1,4 @@ +import './ensureNmdPolyfill'; import App from './App'; import React from 'react'; import { createRoot } from 'react-dom/client'; diff --git a/federated-css/consumers-react/tailwind-module-and-jss/src/ensureNmdPolyfill.js b/federated-css/consumers-react/tailwind-module-and-jss/src/ensureNmdPolyfill.js new file mode 100644 index 00000000000..e15e583f54f --- /dev/null +++ b/federated-css/consumers-react/tailwind-module-and-jss/src/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; diff --git a/federated-css/consumers-react/tailwind-module-and-jss/webpack.config.js b/federated-css/consumers-react/tailwind-module-and-jss/webpack.config.js index b16e01ac79a..52ab7da1dda 100644 --- a/federated-css/consumers-react/tailwind-module-and-jss/webpack.config.js +++ b/federated-css/consumers-react/tailwind-module-and-jss/webpack.config.js @@ -4,7 +4,7 @@ const path = require('path'); const mfConfig = require('./mf-plugin.config'); module.exports = { - entry: './src/index', + entry: ['./src/ensureNmdPolyfill', './src/index'], mode: 'development', devServer: { static: { diff --git a/federated-css/e2e/run-all.spec.ts b/federated-css/e2e/run-all.spec.ts deleted file mode 100644 index fbf307fbaa3..00000000000 --- a/federated-css/e2e/run-all.spec.ts +++ /dev/null @@ -1,5 +0,0 @@ -// Aggregator kept for parity with the previous Cypress entry point. -// The real tests live in ./common-checks.spec.ts and are executed directly by Playwright. -import './common-checks.spec'; - -export {}; diff --git a/federated-css/expose-remotes/expose-css-module/rspack.config.js b/federated-css/expose-remotes/expose-css-module/rspack.config.js index 12ca8609173..b513b4fb423 100644 --- a/federated-css/expose-remotes/expose-css-module/rspack.config.js +++ b/federated-css/expose-remotes/expose-css-module/rspack.config.js @@ -7,7 +7,7 @@ const { } = require('../remotes.config'); module.exports = { - entry: './src/index', + entry: ['./src/ensureNmdPolyfill', './src/index'], mode: 'development', devServer: { static: { @@ -45,7 +45,16 @@ module.exports = { }, { test: /\.css$/, - use: ['style-loader', 'css-loader'], + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + modules: true, + esModule: true, + }, + }, + ], }, ], }, diff --git a/federated-css/expose-remotes/expose-css-module/src/App.js b/federated-css/expose-remotes/expose-css-module/src/App.js index 5a1a36e7a05..23e0d065092 100644 --- a/federated-css/expose-remotes/expose-css-module/src/App.js +++ b/federated-css/expose-remotes/expose-css-module/src/App.js @@ -1,3 +1,4 @@ +import './ensureNmdPolyfill'; import React from 'react'; const Component = React.lazy(() => import('./Component')); diff --git a/federated-css/expose-remotes/expose-css-module/src/Component.js b/federated-css/expose-remotes/expose-css-module/src/Component.js index 5d682f0942f..52e158a6032 100644 --- a/federated-css/expose-remotes/expose-css-module/src/Component.js +++ b/federated-css/expose-remotes/expose-css-module/src/Component.js @@ -1,5 +1,7 @@ import React from 'react'; -import classes from './Button.styles.module.css'; +import * as moduleStyles from './Button.styles.module.css'; + +const classes = moduleStyles.default || moduleStyles; const style = { padding: 12, diff --git a/federated-css/expose-remotes/expose-css-module/src/ensureNmdPolyfill.js b/federated-css/expose-remotes/expose-css-module/src/ensureNmdPolyfill.js new file mode 100644 index 00000000000..e15e583f54f --- /dev/null +++ b/federated-css/expose-remotes/expose-css-module/src/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; diff --git a/federated-css/expose-remotes/expose-tailwind-css-global/rspack.config.js b/federated-css/expose-remotes/expose-tailwind-css-global/rspack.config.js index 2958eff419b..e9f5ea0e61e 100644 --- a/federated-css/expose-remotes/expose-tailwind-css-global/rspack.config.js +++ b/federated-css/expose-remotes/expose-tailwind-css-global/rspack.config.js @@ -7,7 +7,7 @@ const { } = require('../remotes.config'); module.exports = { - entry: './src/index', + entry: ['./src/ensureNmdPolyfill', './src/index'], mode: 'development', devServer: { static: { diff --git a/federated-css/expose-remotes/expose-tailwind-css-global/src/App.js b/federated-css/expose-remotes/expose-tailwind-css-global/src/App.js index 5a1a36e7a05..23e0d065092 100644 --- a/federated-css/expose-remotes/expose-tailwind-css-global/src/App.js +++ b/federated-css/expose-remotes/expose-tailwind-css-global/src/App.js @@ -1,3 +1,4 @@ +import './ensureNmdPolyfill'; import React from 'react'; const Component = React.lazy(() => import('./Component')); diff --git a/federated-css/expose-remotes/expose-tailwind-css-global/src/ensureNmdPolyfill.js b/federated-css/expose-remotes/expose-tailwind-css-global/src/ensureNmdPolyfill.js new file mode 100644 index 00000000000..e15e583f54f --- /dev/null +++ b/federated-css/expose-remotes/expose-tailwind-css-global/src/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; diff --git a/federated-css/expose-remotes/expose-tailwind-css-module/rspack.config.js b/federated-css/expose-remotes/expose-tailwind-css-module/rspack.config.js index a6e4c1c7620..294cd95dfde 100644 --- a/federated-css/expose-remotes/expose-tailwind-css-module/rspack.config.js +++ b/federated-css/expose-remotes/expose-tailwind-css-module/rspack.config.js @@ -7,7 +7,7 @@ const { } = require('../remotes.config'); module.exports = { - entry: './src/index', + entry: ['./src/ensureNmdPolyfill', './src/index'], mode: 'development', devServer: { static: { @@ -45,7 +45,17 @@ module.exports = { }, { test: /\.css$/, - use: ['style-loader', 'css-loader', 'postcss-loader'], + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + modules: true, + esModule: true, + }, + }, + 'postcss-loader', + ], }, ], }, diff --git a/federated-css/expose-remotes/expose-tailwind-css-module/src/App.js b/federated-css/expose-remotes/expose-tailwind-css-module/src/App.js index 5a1a36e7a05..23e0d065092 100644 --- a/federated-css/expose-remotes/expose-tailwind-css-module/src/App.js +++ b/federated-css/expose-remotes/expose-tailwind-css-module/src/App.js @@ -1,3 +1,4 @@ +import './ensureNmdPolyfill'; import React from 'react'; const Component = React.lazy(() => import('./Component')); diff --git a/federated-css/expose-remotes/expose-tailwind-css-module/src/Component.js b/federated-css/expose-remotes/expose-tailwind-css-module/src/Component.js index 39f2c4949c4..23dd1d90045 100644 --- a/federated-css/expose-remotes/expose-tailwind-css-module/src/Component.js +++ b/federated-css/expose-remotes/expose-tailwind-css-module/src/Component.js @@ -1,5 +1,6 @@ import React from 'react'; -import classes from './tailwind.module.css'; +import * as moduleStyles from './tailwind.module.css'; +const classes = moduleStyles.default || moduleStyles; const style = { padding: 12, diff --git a/federated-css/expose-remotes/expose-tailwind-css-module/src/ensureNmdPolyfill.js b/federated-css/expose-remotes/expose-tailwind-css-module/src/ensureNmdPolyfill.js new file mode 100644 index 00000000000..e15e583f54f --- /dev/null +++ b/federated-css/expose-remotes/expose-tailwind-css-module/src/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; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 41f031bf85d..a17789bc943 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4032,6 +4032,9 @@ importers: '@types/react': specifier: 18.3.10 version: 18.3.10 + cross-env: + specifier: 7.0.3 + version: 7.0.3 eslint: specifier: 9.6.0 version: 9.6.0 @@ -4063,6 +4066,9 @@ importers: '@types/react': specifier: 18.3.10 version: 18.3.10 + cross-env: + specifier: 7.0.3 + version: 7.0.3 eslint: specifier: 9.6.0 version: 9.6.0 @@ -4094,6 +4100,9 @@ importers: '@types/react': specifier: 18.3.10 version: 18.3.10 + cross-env: + specifier: 7.0.3 + version: 7.0.3 eslint: specifier: 9.6.0 version: 9.6.0 @@ -4125,6 +4134,9 @@ importers: '@types/react': specifier: 18.3.10 version: 18.3.10 + cross-env: + specifier: 7.0.3 + version: 7.0.3 eslint: specifier: 9.6.0 version: 9.6.0 @@ -4156,6 +4168,9 @@ importers: '@types/react': specifier: 18.3.10 version: 18.3.10 + cross-env: + specifier: 7.0.3 + version: 7.0.3 eslint: specifier: 9.6.0 version: 9.6.0