Trying to add vue to react microfrontend returns error fn is not a function while loading

[iodum]

I try to add Vue app to my microfrontend react application.

The configuration inside webpack.config.js of vue app is like this:

    optimization: {
      runtimeChunk: false,
    },
    devServer: {
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
    },

    output: {
      uniqueName: "hello_vue",
      publicPath: "http://localhost:4202/",
      filename: '[name][contenthash].js',
      clean: true,
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          use: "vue-loader",
        },
      ],
    },
    resolve: {
      extensions: [".vue", ".js"],
    },
    plugins: [
      new container.ModuleFederationPlugin({
        name: "hello_vue",
        filename: "remoteEntry.js",
        exposes: {
          "./VueApp": "apps/hello_vue/src/bootstrap",
        },
        shared: {
          ...dependencies,
        },
      }),
      new VueLoaderPlugin(),
    ],

The configuration of react app:

    plugins: [
      new container.ModuleFederationPlugin({
        name: "shell",
        remotes: {
          hello_vue: "//localhost:4202/remoteEntry.js",
        },
        runtime: false,
        library: { type: "module" },
        shared: {
          ...dependencies,
        },
      }),
    ],

Also, decalre module in react app:

declare module "hello_vue/VueApp";

In react app I created a new component for loading vue app:

import React, { useRef, useEffect } from "react";
import { mount }  from "hello_vue/VueApp";

export default () => {
  const ref = useRef(null);

  useEffect(() => {
    mount(ref.current)
  }, [])

  return <div ref={ref} />;
};

Both application are successfully started, but I get an error

TypeError: fn is not a function
while loading "./VueApp"

Also, try to change config like:

remotes: {
    hello_vue: "hello_vue@http://localhost:4202/remoteEntry.js",
},

but get a new error

Uncaught TypeError: Failed to resolve module specifier "hello_vue@http://localhost:4202/remoteEntry.js". Relative references must start with either "/", "./", or "../".

What could be the cause of this problem?

[nischaym-next]

@iodum did you find the solution ?