-
-
Couldn't load subscription status.
- Fork 1.8k
-
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?
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 1 comment 1 reply
-
@iodum did you find the solution ?
Beta Was this translation helpful? Give feedback.
All reactions
-
Yes, this solutions works for me:
plugins: [
new container.ModuleFederationPlugin({
name: "shell",
remotes: {
hello_vue: "hello_vue@/_vue_app/remoteEntry.js",
},
runtime: false,
library: { type: "module" },
shared: {
...dependencies,
},
}),
],
where hello_vue - name of vue app, _vue_app - publicPath of vue app:
plugins: [
new container.ModuleFederationPlugin({
**name: "hello_vue",**
filename: "remoteEntry.js",
exposes: {
"./VueApp": "apps/hello_vue/src/bootstrap",
},
shared: {
...dependencies,
},
}),
output: {
**publicPath: "/_vue_app/",**
},
new VueLoaderPlugin(),
],
Beta Was this translation helpful? Give feedback.