Shared module is not available for eager consumption error with vendors

Question

I have been implementing a micro-frontend module (MF1) with Module Federation to extend an existing React/Redux application. My new application (MF1) will act as a host and a remote at the same time sharing some components with another cloud application (MF2). When I was integrating MF1 to MF2, I stumbled upon to a very intersting issue. This may quite familiar to all of you if you have integrated MF applications. Here is the issue.

Uncaught Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react

Unfortunately, this issue just doesn't go away just by having a bootstrap.js and having eager loading for shared modules in Webpack configuration. The cause of the issue was I have bundled vendors in Webpack's entry to have a better Code Splitting. It is something similar to this.

const myVendors = ['react', 'react-dom, 'lodash', 'moment']

module.exports = {
...
  entry: {
    main: [...myVendors, './src/index.js']
  },

This code segement is in the (MF2) and (MF1) is running without any issues. Also, I only get the error when I try to import something from remote. As per my observation, this is the piece that gives the trouble. Is there any suggestions or any idea of how to crack this issue?

I have tried out basically all of the solutions related to this shared eager loading issue. Nothing worked so far. Also, I couldn't find anyone who got this issue with code splitting. I would like to have a solution that gets rid of this eager consumption issue but keeps my Code Splitting mechanism.