prevent duplicate foremanReact

.eslintrc

@@ -23,6 +23,7 @@
           "ascii",
           "auditable",
           "Autocompletion",
+          "autogenerated",
           "bool",
           "bootable",
           "Borderless",

app/views/layouts/base.html.erb

@@ -39,6 +39,7 @@
     <%= get_webpack_foreman_vendor_js %>
     <%= javascript_include_tag('/webpack/vendor.js') %>
     <%= javascript_include_tag('/webpack/bundle.js') %>
+    <%= javascript_include_tag('/webpack/reactExports.js') %>
 
     <%= javascript_include_tag 'application' %>
     <%= webpacked_plugins_with_global_js %>

config/webpack.config.js

@@ -12,6 +12,10 @@ var vendorEntry = require('./webpack.vendor');
 var fs = require('fs');
 const { ModuleFederationPlugin } = require('webpack').container;
 var pluginUtils = require('../script/plugin_webpack_directories');
+var { generateExportsFile }= require('../webpack/assets/javascripts/exportAll');
+
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin;
 
 class AddRuntimeRequirement {
   // to avoid "webpackRequire.l is not a function" error
@@ -153,10 +157,19 @@ const coreConfig = function() {
   config.entry = {
     bundle: { import: bundleEntry, dependOn: 'vendor' },
     vendor: vendorEntry,
+    reactExports: path.join(
+      __dirname,
+      '..',
+      'webpack/assets/javascripts/all_react_app_exports.js'
+    ),
   };
   config.output = {
     path: path.join(__dirname, '..', 'public', 'webpack'),
     publicPath: '/webpack/',
+    library: {
+      name: ['TheForeman', '[id]'],
+      type: 'var',
+    },
   };
   var plugins = config.plugins;
 
@@ -170,6 +183,13 @@ const coreConfig = function() {
       filename: manifestFilename,
     })
   );
+  plugins.push(
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      reportFilename: 'reportCore.html',
+      openAnalyzer: false,
+    })
+  );
   config.plugins = plugins;
   var rules = config.module.rules;
   rules.push({
@@ -196,6 +216,21 @@ const pluginConfig = function(plugin) {
   var config = commonConfig();
   config.context = path.join(pluginRoot, 'webpack');
   config.entry = {};
+
+  function convertImportStatement(importStatement) {
+    const importPath = importStatement;
+    const importPathParts = importPath.split('/');
+    const newImportName = importPathParts.slice(1).join('_');
+    return newImportName;
+  }
+  config.externals = function({ request }, callback) {
+    if (/^foremanReact(\/.*)?$/.test(request)) {
+      const prefix = 'var TheForeman.reactExports.';
+      const newPath = prefix + convertImportStatement(request.substring('foremanReact'.length));
+      return callback(null, newPath);
+    }
+    return callback();
+  };
   var pluginEntries = {
     './index': path.resolve(pluginRoot, 'webpack', 'index'),
   };
@@ -233,6 +268,14 @@ const pluginConfig = function(plugin) {
 
   //get the list of webpack plugins
   var plugins = config.plugins;
+
+  plugins.push(
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      reportFilename: `report${pluginName}.html`,
+      openAnalyzer: false,
+    })
+  );
   plugins.push(
     new ModuleFederationPlugin({
       name: pluginName,
@@ -262,6 +305,7 @@ const pluginConfig = function(plugin) {
 };
 
 module.exports = function(env, argv) {
+  generateExportsFile();
   const { pluginName } = env;
   var pluginsDirs = pluginUtils.getPluginDirs('pipe');
   var pluginsInfo = {};