[SOLVED] I need to create a map of the original import statement of the key in __WEBPACK_MODULES_

I need to create a map of the original import statement of the key in __WEBPACK_MODULES__

I working with a federated modules library that uses an AMD implementation to create the libraries at runtime. This library will be run inside of an app bundled with Webpack.

However, in order to handle external dependencies I have to determine what the module's name is from Webpack's perspective.

example lib to download:

define('myFederatedLib', ['react', 'lodash'], (react, _) => {
  var react = react["default"]
  ...
}

AMD implementation:

  // will be [react, lodash]
  statics.map((id) => {
     // Will happen at runtime
     return import(id)
  })

The problem is that "id" will be "react" but webpack_require(id) will not find the module because Webpack renamed it.

I tried writing a Webpack Plugin that tapped into a bunch of places in the compilation hooks. I found where all of the imports are being called parser.import.tap(...) so I can get the list of libraries. I can not find where Webpack converts that to __WEBPACK_MODULES__ entries.

Solution

Webpack's ProvidePlugin to specify module names as global variables that the AMD module can access. This might helpful. Give it a try

// webpack.config.js
plugins: [
  new webpack.ProvidePlugin({
    react: 'React',
    lodash: '_',
  }),
],

usage in AMD:

// myFederatedLib.js
define('myFederatedLib', ['react', 'lodash'], (react, _) => {
  // Use react and lodash as global variables
});