* (bluefox) craco-module-federation.js was added. For node 16

README.md

@@ -661,8 +661,11 @@ socket.getObjectViewCustom('custom', 'state', 'startKey', 'endKey')
 -->
 
 ## Changelog
+### **WORK IN PROGRESS**
+* (bluefox) `craco-module-federation.js` was added. For node 16
+
 ### 4.0.27 (2023-05-09)
-* (bluefox) Allowed to show only specific root in SelectIDDialog
+* (bluefox) Allowed showing only specific root in SelectIDDialog
 
 ### 4.0.26 (2023-05-08)
 * (bluefox) Added IDs to the buttons in the dialog for GUI tests

craco-module-federation.js

@@ -0,0 +1,70 @@
+// const webpack = require('webpack');
+const paths = require('react-scripts/config/paths');
+
+const getModuleFederationConfigPath = (additionalPaths = []) => {
+ const path = require('path');
+ const fs = require('fs');
+ const appDirectory = fs.realpathSync(process.cwd());
+ const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+
+ const moduleFederationConfigFiles = [
+ 'modulefederation.config.js',
+ ...additionalPaths,
+ ];
+ return moduleFederationConfigFiles
+ .map(resolveApp)
+ .filter(fs.existsSync)
+ .shift();
+};
+
+module.exports = {
+ overrideWebpackConfig: ({webpackConfig, pluginOptions}) => {
+ const moduleFederationConfigPath = getModuleFederationConfigPath();
+
+ if (moduleFederationConfigPath) {
+ webpackConfig.output.publicPath = 'auto';
+
+ if (pluginOptions?.useNamedChunkIds) {
+ webpackConfig.optimization.chunkIds = 'named';
+ }
+
+ const htmlWebpackPlugin = webpackConfig.plugins.find(
+ plugin => plugin.constructor.name === 'HtmlWebpackPlugin'
+ );
+
+ const myModule = require(moduleFederationConfigPath);
+
+ htmlWebpackPlugin.userOptions = {
+ ...htmlWebpackPlugin.userOptions,
+ publicPath: paths.publicUrlOrPath,
+ excludeChunks: [myModule.name],
+ };
+
+ const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
+
+ webpackConfig.plugins = [
+ ...webpackConfig.plugins,
+ new ModuleFederationPlugin(myModule),
+ ];
+
+ // webpackConfig.module = {
+ // ...webpackConfig.module,
+ // generator: {
+ // "asset/resource": {
+ // publicPath: paths.publicUrlOrPath,
+ // },
+ // },
+ // };
+ }
+ return webpackConfig;
+ },
+ overrideDevServerConfig: ({devServerConfig}) => {
+ devServerConfig.headers = {
+ 'Access-Control-Allow-Origin': '*',
+ 'Access-Control-Allow-Methods': '*',
+ 'Access-Control-Allow-Headers': '*',
+ };
+
+ return devServerConfig;
+ },
+};

gulpfile.js

@@ -24,6 +24,7 @@ gulp.task('copy', () => Promise.all([
  gulp.src(['src/Components/assets/*.*']).pipe(gulp.dest('dist/Components/assets')),
  gulp.src(['src/assets/devices/*.*']).pipe(gulp.dest('dist/assets/devices')),
  gulp.src(['src/assets/rooms/*.*']).pipe(gulp.dest('dist/assets/rooms')),
+ gulp.src(['craco-module-federation.js']).pipe(gulp.dest('dist')),
  new Promise(resolve => {
  const package_ = require('./package.json');
  const packageSrc = require('./src/package.json');