From 23d1a5c0610e84ba5a6fa168105e3da8def8122d Mon Sep 17 00:00:00 2001 From: Hasan Ayan Date: Sun, 20 Jun 2021 01:33:37 +0300 Subject: [PATCH 1/3] added module federation support --- docusaurus/website/sidebars.json | 1 + packages/react-scripts/config/paths.js | 18 ++++++++++++++++++ .../react-scripts/config/webpack.config.js | 17 ++++++++++++++++- 3 files changed, 35 insertions(+), 1 deletion(-) diff --git a/docusaurus/website/sidebars.json b/docusaurus/website/sidebars.json index 386a29da1bf..5ee0d8c91af 100644 --- a/docusaurus/website/sidebars.json +++ b/docusaurus/website/sidebars.json @@ -52,6 +52,7 @@ "can-i-use-decorators", "pre-rendering-into-static-html-files", "advanced-configuration", + "module-federation", "alternatives-to-ejecting" ], "Support": ["troubleshooting"] diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index f4470a02f63..0985b71de01 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -45,6 +45,11 @@ const moduleFileExtensions = [ 'jsx', ]; +const moduleFederationConfigFiles = [ + '.modulefederationrc.json', + '.modulefederationrc.js', +]; + // Resolve file paths in the same order as webpack const resolveModule = (resolveFn, filePath) => { const extension = moduleFileExtensions.find(extension => @@ -73,6 +78,10 @@ module.exports = { yarnLockFile: resolveApp('yarn.lock'), testsSetup: resolveModule(resolveApp, 'src/setupTests'), proxySetup: resolveApp('src/setupProxy.js'), + appMFConfigFile: moduleFederationConfigFiles + .map(resolveApp) + .filter(fs.existsSync) + .shift(), appNodeModules: resolveApp('node_modules'), appWebpackCache: resolveApp('node_modules/.cache'), appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'), @@ -98,6 +107,10 @@ module.exports = { yarnLockFile: resolveApp('yarn.lock'), testsSetup: resolveModule(resolveApp, 'src/setupTests'), proxySetup: resolveApp('src/setupProxy.js'), + appMFConfigFile: moduleFederationConfigFiles + .map(resolveApp) + .filter(fs.existsSync) + .shift(), appNodeModules: resolveApp('node_modules'), appWebpackCache: resolveApp('node_modules/.cache'), appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'), @@ -136,6 +149,11 @@ if ( yarnLockFile: resolveOwn(`${templatePath}/yarn.lock`), testsSetup: resolveModule(resolveOwn, `${templatePath}/src/setupTests`), proxySetup: resolveOwn(`${templatePath}/src/setupProxy.js`), + appMFConfigFile: moduleFederationConfigFiles + .map(p => `${templatePath}/${p}`) + .map(resolveOwn) + .filter(fs.existsSync) + .shift(), appNodeModules: resolveOwn('node_modules'), appWebpackCache: resolveOwn('node_modules/.cache'), appTsBuildInfoFile: resolveOwn('node_modules/.cache/tsconfig.tsbuildinfo'), diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 5a76510c2d5..4ff98d33051 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -228,7 +228,7 @@ module.exports = function (webpackEnv) { // webpack uses `publicPath` to determine where the app is being served from. // It requires a trailing slash, or the file assets will get an incorrect path. // We inferred the "public path" (such as / or /my-project) from homepage. - publicPath: paths.publicUrlOrPath, + publicPath: 'auto', // Point sourcemap entries to original disk location (format as URL on Windows) devtoolModuleFilenameTemplate: isEnvProduction ? info => @@ -602,7 +602,18 @@ module.exports = function (webpackEnv) { { inject: true, template: paths.appHtml, + publicPath: paths.publicUrlOrPath, }, + paths.appMFConfigFile + ? { + hash: true, + //Not sure this is the safest approach, + //I am trying to exclude the script tag for remoteEntry.js. + //Is there any case where there would be other chunks + //that needs the relative script tag placed in index.html? + chunks: ['main'], + } + : undefined, isEnvProduction ? { minify: { @@ -795,6 +806,10 @@ module.exports = function (webpackEnv) { }, }, }), + paths.appMFConfigFile && + new webpack.container.ModuleFederationPlugin( + require(paths.appMFConfigFile) + ), ].filter(Boolean), // Turn off performance processing because we utilize // our own hints via the FileSizeReporter From 57dbff8c69b68e76fb5eba8c8a106c5f119705b2 Mon Sep 17 00:00:00 2001 From: Hasan Ayan Date: Sun, 20 Jun 2021 02:16:18 +0300 Subject: [PATCH 2/3] updated remoteEntry.js script tag exclusion logic --- packages/react-scripts/config/webpack.config.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 4ff98d33051..585a8e3bf6b 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -606,12 +606,7 @@ module.exports = function (webpackEnv) { }, paths.appMFConfigFile ? { - hash: true, - //Not sure this is the safest approach, - //I am trying to exclude the script tag for remoteEntry.js. - //Is there any case where there would be other chunks - //that needs the relative script tag placed in index.html? - chunks: ['main'], + excludeChunks: [require(paths.appMFConfigFile).name], } : undefined, isEnvProduction From d36634d45488c09751edfe69ff27393418612d13 Mon Sep 17 00:00:00 2001 From: Hasan Ayan Date: Wed, 21 Jul 2021 13:20:30 +0300 Subject: [PATCH 3/3] correct public path for asset/resource --- packages/react-scripts/config/webpack.config.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index f250038d30a..33238d3e7f9 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -353,6 +353,11 @@ module.exports = function (webpackEnv) { ], }, module: { + generator: { + 'asset/resource': { + publicPath: paths.publicUrlOrPath, + }, + }, strictExportPresence: true, rules: [ // Handle node_modules packages that contain sourcemaps