Module Federation Nonce Plugin

plugin.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {ModuleFederationPlugin} = require('webpack').container;
const {RuntimeGlobals, RuntimeModule} = require('webpack');
const path = require('path');
const deps = require('./package.json').dependencies;

class Testing123RuntimeModule extends RuntimeModule {
  constructor() {
    super('testing123', RuntimeModule.STAGE_BASIC + 1);
  }

  generate() {
    return `
      const testing123 = window.testing123;
      if (testing123) {
        __webpack_require__.nc = testing123;
      }
    `;
  }
}
class Testing123Plugin {
  apply(compiler) {
    compiler.options.devtool =false;
    compiler.hooks.thisCompilation.tap("Testing123Plugin", (compilation) => {
      compilation.hooks.additionalTreeRuntimeRequirements.tap("Testing123Plugin", (chunk, set) => {
        compilation.addRuntimeModule(
          chunk,
            new Testing123RuntimeModule()
        );
        return true;
      });
    });
  }
}


module.exports = {
  entry: './src/index',
  mode: 'development',
  optimization: {
    minimize: false,
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    port: 3001,
  },
  output: {
    publicPath: 'auto',
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        type: 'javascript/auto',
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-react'],
        },
      },
    ],
  },
  plugins: [
    new Testing123Plugin(),
    new ModuleFederationPlugin({
      name: 'app1',
      library: {type: 'var', name: 'app1'},
      remotes: {
        app2: 'app2',
      },
      shared: {
        ...deps,
        'react-dom': {
          import: 'react-dom', // the "react" package will be used a provided and fallback module
          shareKey: 'react-dom', // under this name the shared module will be placed in the share scope
          shareScope: 'legacy', // share scope with this name will be used
          singleton: true, // only a single version of the shared module is allowed
        },
        // oldReact: {
        //   import: "react", // the "react" package will be used a provided and fallback module
        //   shareKey: "oldReact", // under this name the shared module will be placed in the share scope
        //   shareScope: "legacy", // share scope with this name will be used
        //   singleton: true, // only a single version of the shared module is allowed
        // }
      },
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      app2RemoteEntry: getRemoteEntryUrl(3002),
    }),
  ],
};

function getRemoteEntryUrl(port) {
  const {CODESANDBOX_SSE, HOSTNAME = ''} = process.env;

  // Check if the example is running on codesandbox
  // https://codesandbox.io/docs/environment
  if (!CODESANDBOX_SSE) {
    return `//localhost:${port}/remoteEntry.js`;
  }

  const parts = HOSTNAME.split('-');
  const codesandboxId = parts[parts.length - 1];

  return `//${codesandboxId}-${port}.sse.codesandbox.io/remoteEntry.js`;
}