Issue Replication

the default export from axios in an external library is not processed correctly when the module federation plugin is present, the whole module is returned instead causing RTE in the library itself when the main application is executed.

check the assert in:

• packages/rslib-project/src/index.ts
• packages/rsbuild-project/src/index.ts

start

• remove the rslib-project dependency from rsbuild-project
• install dependencies
• build and pack rslib-project
• reinstall rslib-project dependency in rsbuild-project by using the tgz file
• build rsbuild-project and run it's preview (or run dev, i guess)

explorations

• if the sources are available, it is compiled correctly

packages/rsbuild-project/packages.json

"dependencies": {
  "rslib-project": "workspace:*"
}

so we use the tgz produced by the pack command to simulate the situation with published packages

• removing the shared packages configuration is a workaround

pluginModuleFederation({
      name: 'app',
      shared: []
    })

but I need to ensure we use the same axios instance across all MF remotes

• outputting a commonjs is a workaround

packages/rslib-project/rslib.config.ts

lib: [
  {
    format: 'cjs',
    dts: true,
  }
]

but I'd prefer to publish modern esm modules

workaround

the current preferred workaround is to configure the externals

packages/rslib-project/rslib.config.ts

output: {
  target: 'web',
  externals: {
    axios: ['axios', 'default']
  }
}

---

is rslib-project builds

file produced without workaround

import axios from "axios";

;// CONCATENATED MODULE: external "axios"

and with the workaround

import * as __WEBPACK_EXTERNAL_MODULE_axios__ from "axios";
// The require scope
var __webpack_require__ = {};

/************************************************************************/
// webpack/runtime/compat_get_default_export
(() => {
// getDefaultExport function for compatibility with non-ESM modules
__webpack_require__.n = (module) => {
	var getter = module && module.__esModule ?
		() => (module['default']) :
		() => (module);
	__webpack_require__.d(getter, { a: getter });
	return getter;
};
// removed for brevity ...
/************************************************************************/

;// CONCATENATED MODULE: external ["axios","default"]

var external_axios_default_default = /*#__PURE__*/__webpack_require__.n(__WEBPACK_EXTERNAL_MODULE_axios__["default"]);

---

in rsbuild-project builds

file produced without workaround

"use strict";
(self["chunk_app"] = self["chunk_app"] || []).push([["2"], {
585: (function (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
__webpack_require__.d(__webpack_exports__, {
  D: () => (req)
});
/* ESM import */var axios__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(489);


;// CONCATENATED MODULE: external "axios"

and with the workaround

"use strict";
(self["chunk_app"] = self["chunk_app"] || []).push([["2"], {
585: (function (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
__webpack_require__.d(__webpack_exports__, {
  D: () => (req)
});
/* ESM import */var axios__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(489);

// The require scope
var __nested_webpack_require_85_104__ = {};

/************************************************************************/
// webpack/runtime/compat_get_default_export
(() => {
// getDefaultExport function for compatibility with non-ESM modules
__nested_webpack_require_85_104__.n = (module) => {
	var getter = module && module.__esModule ?
		() => (module['default']) :
		() => (module);
	__nested_webpack_require_85_104__.d(getter, { a: getter });
	return getter;
};
// removed for brevity ...
/************************************************************************/

;// CONCATENATED MODULE: external ["axios","default"]

var external_axios_default_default = /*#__PURE__*/__nested_webpack_require_85_104__.n(axios__WEBPACK_IMPORTED_MODULE_0__);
;// CONCATENATED MODULE: ./src/index.ts

open questions

would this be manageable for other dependencies or with many dependencies?