joeldenning / coexisting-vue-microfrontends Goto Github PK

where do you figure out the cross origin in microfrontends app1？

and where do you config the ’umd‘ type of build package in your demo project app1？

I use single-spa, and single-spa-vue to integrate some vue(vue cli3) projects. When I operate the integrated pages, the following error has occurred. Can you tell me the possible reasons? I look forward to your reply.

Uncaught (in promise) RangeError: Maximum call stack size exceeded
at RegExp.exec ()
at RegExp.[Symbol.match] ()
at String.match ()
at _t (app.js:42)
at s (app.js:42)
at c (app.js:42)
at u (app.js:42)
at s (app.js:42)
at c (app.js:42)
at u (app.js:42)

(index):1 Access to script at 'http://localhost:8080/js/app.js' from origin 'http://localhost:5000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
system.min.js:4 GET http://localhost:8080/js/app.js net::ERR_FAILED
(anonymous) @ system.min.js:4
g.instantiate @ system.min.js:4
t.instantiate @ system.min.js:4
t.instantiate @ named-register.min.js:1
(anonymous) @ system.min.js:4
Promise.then (async)
t @ system.min.js:4
(anonymous) @ system.min.js:4
Promise.then (async)
g.import @ system.min.js:4
e.import @ system.min.js:4
t.import @ use-default.min.js:1
(anonymous) @ (index):42
(anonymous) @ single-spa.min.js:1
Promise.then (async)
(anonymous) @ single-spa.min.js:1
Promise.then (async)
tt @ single-spa.min.js:1
(anonymous) @ single-spa.min.js:1
Promise.then (async)
Ct @ single-spa.min.js:1
Tt @ single-spa.min.js:1
(anonymous) @ (index):40
Promise.then (async)
(anonymous) @ (index):33
(anonymous) @ (index):60
single-spa.min.js:1 Uncaught navbar: Application 'navbar' died in status LOADING_SOURCE_CODE: Error loading http://localhost:8080/js/app.js
at HTMLScriptElement. (https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/system.min.js:4:5825)

Is it okay to use vuex in a project by referring to vue-router?
Is there anything to pay attention to?

You mention that the newer example repo better reflects the micro frontend architecture and is encouraged to use.

Can you explain the primary architectural differences between this example and the newer example? What are some of the biggest or most significant changes?

Thank you

When I switched apps, the CSS and JS of other apps that used to be active remained in the head.

I think we should remove the CSS and JS of other apps and keep only the current active's

Multiple Vue instances in the same document need to avoid global variable pollution, global monitoring pollution, style pollution and so on. Access specifications need to be formulated.

codes can not be cloned

When dynamically loading vue cli app using import statement
singleSpa.registerApplication(' app-3', () => import (/* webpackIgnore: true */'http://localhost:8080/app.js'), pathPrefix('/app3'));

causes following exception:
Uncaught Error: 'app-3' died in status LOADING_SOURCE_CODE: "does not export an unmount function or array of functions"

My sample vue main.js file looks like this:
`import Vue from vue
import App from './App.vue'
import singleSpaVue from 'single-spa-vue';
Vue.config.productionTip = true
const vueLifecycles = singleSpaVue({
Vue,
appOptions: {
render: (h) => h(App)
},
});

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;
`

vue-cli version

Project options

Vue config

Console log errors

I've cloned the coexisting-vue-microfrontends project, and created a new "module" (app3) with vue-cli v4.x.x, got the settings recommended in the issues here and the application does not render the new module. can you help me?
Follow the forked project:
https://github.com/tvmota/coexisting-vue-microfrontends

Thank very much.

Is any way to share store by vuex?

Is it posible to coexist vue2 and vue3? This would be usefull to migrage progressively one application.

Error

app-errors.js:9 Uncaught navbar: Application 'navbar' died in status LOADING_SOURCE_CODE: Error loading http://localhost:8080/app.js
    at HTMLScriptElement.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/system.min.js:4:5825)

Expected

If port 8080 is dominant before start app1, app2, navbar, these port will be automatically use incremental port(that is ok), but shoud not occurs error.

hi
could you create an example of import map with vue 3 and vue-router 4 please?
thanks

How to pack and deploy to a server？

window.getPublicPath is not a function

Hi,

When I review the application demo.
each time app1 or app2 is clicked, it creates a new div element.

< div id="app1" >< /div >
< div id="app2" >< /div >
< div id="app1" >< /div >
< div id="app2" >< /div >
....

hello,how to config request in one app?

{ path: 'about', component: () => import(@/views/About.vue) },

and

{ path: 'about', component: () => import(/* webpackChunkName: "about" */@/views/About.vue) },

if there is no "/* webpackChunkName: "about" */" will be a error.

What error did you get?

i hava a similar doubt

when i commented out this code in ‘root-html-file/index.html’

// 'root-html-file/index.html'

Promise.all([System.import('single-spa'), System.import('vue'), System.import('vue-router')]).then(function (modules) {   
    //var singleSpa = modules[0];
    //var Vue = modules[1];
    //var VueRouter = modules[2];
    //Vue.use(VueRouter)

it will be error to use router in 'navbar/src/App.vue'

this.$router.push('/navbar')
// this.$router   is  undefined

but it works in vue-microfrontends[https://github.com/vue-microfrontends]

Originally posted by @mango-csl in #37 (comment)

Sorry to trouble you again. I have two problem.

1. I use vue-cli3 to make a project, modify according to app1, but error
   
2. I have deploy the app1 and app2 in the 3001 server, then click app1, make a error
   
   Only if I refresh my browser, the picture will appear.

Hi, I have same style class name like '.app' in app1 and app2.
But there are not Isolated, any ideas?

It prompts me for errors, and I have deployed and configured the same according to the demo

When I don't start the root service, but I start the app1 service
Address: http://localhost:8081

I did the following!

cd app1
npm i
npm run serve

The information I see is as follows, individual APP1 can not work, I understand it should be able to work independently, but it can not! When I start the root service at the same time, URL: http://localhost:5000/app1 It works

I tried this: https://github.com/joeldenning/coexisting-vue-microfrontends#local-development----one-app-at-a-time.

and the request http://localhost:8081/app1.js return a html page with the content: We're sorry but app1 doesn't work properly without JavaScript enabled. Please enable it to continue.

I could get the app1.js when I access it directly:

https://coexisting-vue-microfrontends.surge.sh/

could you tell me how to build this project and how to deploy it in production environment ?
thanks a lot , and waiting for you reply.

We should update this example to vue cli 4. I would love to accept a PR for this.

My current needs need to be able to communicate in various projects and pass data to each other for access. But the current functions should not be realized?

Is there a way to run subapps independently, via some scripts in package.json?

npm run build
production： use nginx
When the page is refreshed， Error occurred

can we just link the css file in the load function and unlink the file in the unmount hook function?

Hello,I built the app3 project with reference to APP2, but in both projects, when I clicked route about, an error occurred.

Because when you switch app2 or app3, the URL address of about.js does not change, but when you refresh it, it becomes the correct address.

Accessing a large subapp, I found that the problem caused by lazy routing loading prevented the handover from successfully switching to other apps.
If you don't use routing lazy loading, there's no problem.

Can we expect support for IE11 for coexisting-vue-microfrontend app ?

singleSpa.registerApplication(
'proj1',
() => System.import('proj1'),
location => location.hash.startsWith('#/jpro')
// location => true
)

when I use: location => location.hash.startsWith('#/jpro') , I get the error below，but it works fine when I use: location => true; I don't konw why? please help me. thanks a lot

Uncaught proj1: Application 'proj1' died in status LOADING_SOURCE_CODE: window.Vue.use is not a function
at Module../node_modules/vue-router/dist/vue-router.esm.js (http://localhost:8002/app.js:261976:14)
at webpack_require (http://localhost:8002/app.js:778:30)
at fn (http://localhost:8002/app.js:141:20)
at Module../src/router/index.js (http://localhost:8002/app.js:283598:68)
at webpack_require (http://localhost:8002/app.js:778:30)
at fn (http://localhost:8002/app.js:141:20)
at Module../src/main.js (http://localhost:8002/app.js:281169:67)
at webpack_require (http://localhost:8002/app.js:778:30)
at fn (http://localhost:8002/app.js:141:20)
at Object.2 (http://localhost:8002/app.js:284653:18)

If you have time please tell me how to solve it, thank you very much!

I did the following!

cd app1
npm i
npm run serve

{description: "", message: "Loading chunk about failed. (missing: http://coexisting-vue-microfrontends.surge.sh/app2/js/js/about.js)",

How to solve the above problems?

hello, thanks for your work. i cloned your repo and started it,. when i started app1, the console told me this, how can i fix this?

Hi,
When the individual app is invoked the logo/images from that module doesnt load it gives error as it takes the parent path for search and loading.

The same is seen in the sample app as well.

Can you please guide on this.

Thanks

Hello,

Have you tried to create a Vite version of this ?
I am struggle with this, I can't make the import works >_<

Regards,

Then






Then run root-html-file:


There are two solutions:
1:

Navbar address changed to "http://localhost:8080/js/app.js";
But the resource file address in it will be incorrect;

2:

Change packaging to UMD format

Please tell me your @vue-cli version or how to configure it. Thank you.

how to package microfrontends project

I'm now under the navbar project, I'm going to put an image and I'm going to reference it on the page, and then I'm going to run project 5000, and it's going to show me the image's load path is 5000 and I can't find that image. How do you solve this?

How can I import a component?
I'm trying to do that but always throw this anoying error:

Module not found: Error: Can't resolve '/components/home.vue' in 'D:\estudos\microfrontend\single-spa-app\src\vue'
 @ ./src/vue/main.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/vue/main.vue?vue&type=script&lang=js&) 4:0-40 7:10-14
 @ ./src/vue/main.vue?vue&type=script&lang=js&
 @ ./src/vue/main.vue
 @ ./src/vue/vue.app.js
 @ ./single-spa.config.js

If you could help me this is my repo.