WP4 backport

.js

// Warning! This is a Module Federation compatibility layer for non Webpack 5 hosts
// Edit with extreme caution, this is a Webpack runtime
// Provides almost all federation features to client side
// This file is interfacing with other bundles at runtime
// https://github.com/webpack/webpack/issues/10352
if (window?.abtests?.init) {
    window.abtests.init(
        Object.assign(
            {
                "react": {
                // eslint-disable-next-line
                [require(key).version]: {
                  get: ()=> import('react'),
                  loaded: true,
                  from: "dar"
                }
              }
            },
            __webpack_require__.O
        )
    );
}
function importAll(contextLoader) {
  const allComponent = contextLoader.keys().reduce((acc, id) => {
    const cleanID = id.substr(1);
    Object.assign(acc, {
      [`components${cleanID}`]: () => () =>
        import(
          /* webpackInclude: /^(?!(.*\.test\.js$|.*\.mock\.js$|.*\.mocks\.js$|.*\.spec\.js$)).*\.js$/ */ `../components${cleanID}`
        )
    });
    return acc;
  }, {});
  return allComponent;
}

// likely can get rid of this and leverage webpack magic comments
const contextLoader = require.context(
  "../components/",
  true,
  /^(?!(.*\.test\.js$|.*\.mock\.js$|.*\.mocks\.js$|.*\.spec\.js$)).*\.js$/
);
// prevent tree-shaking the side effect.
module.exports = (() => {
  // object to access. Need to freeze it so it connot be mutated
  window.darFed = {};
  // bogus webpack require function
  // functions are objects too
  function __webpack5_require__(moduleId) {
    return new Promise.reject("cant access directly");
  }

  (() => {
    // Webpack Overrides RuntimeGlobals
    __webpack5_require__.O = {};
  })();

  (() => {
    // __webpack_override__ RuntimeRequirement
    __webpack5_require__.o = (obj, prop) =>
      Object.prototype.hasOwnProperty.call(obj, prop);
  })();

  (() => {
    // define getter functions for harmony exports
    __webpack5_require__.d = (exports, definition) => {
      for (var key in definition) {
        if (
          __webpack5_require__.o(definition, key) &&
          !__webpack5_require__.o(exports, key)
        ) {
          Object.defineProperty(exports, key, {
            enumerable: true,
            get: definition[key]
          });
        }
      }
    };
  })();

  // container entry
  (() => {
    // crerate moduleMap of "exposed"
    var moduleMap = importAll(contextLoader);

    var get = module => {
      return __webpack5_require__.o(moduleMap, module)
        ? moduleMap[module]()
        : Promise.resolve().then(() => {
            throw new Error(
              "Module " + module + " does not exist in container."
            );
          });
    };
    // create ability to override host (bi-directional hosts)
    var override = override => {
      Object.assign(__webpack5_require__.O, override);
    };
    // attach to global scope
    __webpack5_require__.d(window.darFed, {
      get: () => get,
      init: () => override
    });
  })();
})();


///
const DynamicComponent = dynamic(() => window.abtests.get('webpack4Federation').then((factory) => {
    const Module = factory();
    return Module.default;
}), { ssr: false });


<DynamicComponent />
    
//OR
window.abtests.get('federatedModule').then((factory)=>{
    const Module = factory();
    return Module.default
})    

Thanks. I'm planning to try this with my current projects, host and remote using webpack 4. Should I be pasting this snippet in webpack 4 runtime?

Hi,
My remote and host are using webpack 4.42. Please advise the steps to have module federation work with webpack 4,42. Thanks.

Here’s an example. https://youtu.be/tigwyK5Khck

You will be limited unless you make this an entrypoint

This will need to be updated for webpack beta.17

is this still working for webpack 5.3?

With debugging. Yeah. Look at your remote build and see how it makes exposed and shared modules. What format it uses. Then just port that back