From 23d1a5c0610e84ba5a6fa168105e3da8def8122d Mon Sep 17 00:00:00 2001
From: Hasan Ayan <hasanayan@me.com>
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 386a29da1..5ee0d8c91 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 f4470a02f..0985b71de 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 5a76510c2..4ff98d330 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
--
GitLab
From 57dbff8c69b68e76fb5eba8c8a106c5f119705b2 Mon Sep 17 00:00:00 2001
From: Hasan Ayan <hasanayan@me.com>
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 4ff98d330..585a8e3bf 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
--
GitLab
From d36634d45488c09751edfe69ff27393418612d13 Mon Sep 17 00:00:00 2001
From: Hasan Ayan <hasanayan@me.com>
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 f250038d3..33238d3e7 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
--
GitLab