Federated remotes loading third party CSS - chunk is reloaded every time

[cristiano-belloni]

Hi all, I've extended this example for both remotes to not use momentjs but react-vis. With react-vis, you need to import their css, so I have something like that on top of each of the remote Widgets:

import 'react-vis/dist/style.css`
// render a chart

and, in each of the remotes' webpack.config.js, I have these rules to process css:

// ....
{
  test: /\.css$/i,
  use: ['style-loader', 'css-loader']
}

and this shared entry to share react-vis:

shared: {
  // ...
  'react-vis': deps['react-vis']
}

Everything works as intended, but it seems that, every time I load one of the remote applications, there are now two js files that get loaded for react-vis: one containing the javascript code for the library and the other one containing the css rules in javascript:

1. vendors-common_temp_node_modules_pnpm_react-vis_1_11_7_react_16_13_1_node_modules_react-vis_e-cf810e.js -- js code
2. vendors-common_temp_node_modules_pnpm_react-vis_1_11_7_react_16_13_1_node_modules_react-vis_d-7bdc49.js -- apparently the css chunk with a js wrapper

The first one is correctly not loaded as I switch from app2 to app3 inside the host, but the second one is always loaded and appended to my head. More in detail:

• The first time I load app2, 1) and 2) are loaded (from network tab) and a script and style tag are added to my head - all ok.
• If I then load app3, 1) is not loaded but 2) is loaded and an additional (duplicated) style tag is added to my head - not correct, I'd expect 2) not to be loaded and style not to be added.
• If I then load app2 again, 1) and 2) are not loaded but an additional (duplicated) style tag is added to my head - not correct, I'd expect style not to be added.

I also tried it with three identical remotes, all sharing react-vis, and I had the same issue: style chunk being reloaded the first time I load a previously-unloaded remote and style tags piling up on my host document head every time I load a remote.

I also bought and read the book, but this particular situation was not mentioned. Any hint on how to debug / solve this? Or am I doing something wrong?

[ScriptedAlchemy]

Trailing slash share key or share that file directly

If still having issues then Book Calendly time