For maintainers only:

• webpack-4
• webpack-5
• bug
• critical-bug
• enhancement
• documentation
• performance
• dependencies
• question

Sorry, not related to webpack, this error from vue, better to ask vue community how better to implement this, here example for vu3 https://github.com/module-federation/module-federation-examples/tree/master/vue3-demo (maybe help)

give you another example:

core

import axios from "axios";

export default function () {
  console.log(axios.defaults.timeoutErrorMessage);
}

consumer

import axios from "axios";

axios.defaults.timeoutErrorMessage = "hello";

import("./local").then((v) => {
  v.default();
});
import("core/remote").then((v) => {
  v.default();
});

consumer/local

import axios from "axios";

export default function () {
  console.log(axios.defaults.timeoutErrorMessage);
}

{
  ...
  shared: ["axios"],
};

output:

hello
undefined

expect:

hello
hello

is my understanding of the "shared" field wrong? Or where else do I need to configure?

Modify axios.defaults.timeoutErrorMessage is not safe, because you have shared module

Vue3 has the same problem
vuejs/core#2884

@Tarrowren

That's a good indicator that the issue is fro having two distinct copies of vue included in the bundle (from the two node_modules folders.

it means you need search place where you use two copies vue, maybe you have it in global scope

End problem

first, "shared" field should be configured for all project.
second, asynchronous use of shared modules.

// bootstrap.ts;
import { createApp } from "vue";
import App from "./App";

createApp(App).mount("#app");

// main.ts
import("./bootstrap");