[Bug]: ModuleFederation with output.library.type: 'module' (ESM) build doesn't produce a valid module

[MadaraUchiha-314]

System Info

System: OS: macOS 14.2.1 CPU: (8) arm64 Apple M2 Memory: 55.42 MB / 8.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.1/bin/yarn npm: 9.8.1 - ~/code/github.com/MadaraUchiha-314/rollup-plugin-module-federation/node_modules/.bin/npm pnpm: 8.15.1 - ~/Library/pnpm/pnpm Browsers: Chrome: 122.0.6261.129 Chrome Canary: 125.0.6369.0 Safari: 17.2.1

Details

When I try to build using Module Federation (v1.5 or enhanced) and keep the output format as module (ESM), the generated remote entry doesn't seem to work. It doesn't have the the init and the get methods exported.

The same config works in webpack.

{
  "name": "sample_project_a",
  "filename": "my-remote-entry.js",
  "exposes": {
    "./react": "react",
    "./pqr": "./src/pqr.js",
    "./index": {
      "import": "./src/index.js"
    }
  },
  "remoteType": "module",
  "remotes": {
    "project-b": {
      "external": "http://localhost:8080/packages/examples/project-b/dist/rspack/esm/my-remote-entry.js"
    }
  },
  "shared": {
    "react": {
      "eager": true
    },
    "react-dom": {},
    "uuid": {},
    "redux": {}
  },
  "library": {
    "type": "module"
  }
}

PR: https://github.com/MadaraUchiha-314/rollup-plugin-module-federation/pull/47

webpack build: https://rollup-plugin-module-federation-pro-git-2c5fbc-madarauchiha-314.vercel.app/webpack/esm/

rspack build: https://rollup-plugin-module-federation-pro-git-2c5fbc-madarauchiha-314.vercel.app/rspack/esm/

Reproduce link

https://rollup-plugin-module-federation-pro-git-2c5fbc-madarauchiha-314.vercel.app/rspack/esm/

Reproduce Steps

1. Go to the URL
2. Click on all the buttons one by one

rspack

webpack

Do the same steps with the webpack build, it works fine.

[ahabhgk]

Could you try enable experiments.rspackFuture.newTreeshaking and see whether the problem still exists?

[ckken]

same here

[ckken]

use experiments.rspackFuture.newTreeshaking

[ckken]

css module also displays abnormally under esm

[MadaraUchiha-314]

Could you try enable experiments.rspackFuture.newTreeshaking and see whether the problem still exists?

Doesn't seem to work. Getting the same error as @ckken

If one inspects the remote entry generated, it has the following code at the bottom:

var __webpack_exports__get = __webpack_exports__.get;
var __webpack_exports__init = __webpack_exports__.init;
export { __webpack_exports__get as get, __webpack_exports__init as init };
var __webpack_exports__get = __webpack_exports__.get;
var __webpack_exports__init = __webpack_exports__.init;
export { __webpack_exports__get as get, __webpack_exports__init as init };

Link: https://rollup-plugin-module-federation-pro-git-2c5fbc-madarauchiha-314.vercel.app/rspack/esm/my-remote-entry.js

Update: I manually removed the duplicate lines from my bundle and then everything works.

[ckken]

@MadaraUchiha-314 Is the css module normal after you switch to esm?

[ckken]

fixed css module don`t display!

    //     {
    //       chunkFormat: 'module',
    //       chunkLoading: 'import',
    //       library: {
    //         type: 'module',
    //       },
    //     },

[ahabhgk]

6010 should fix it, will release the fix soon