Ref and reactive not working in vite federated module

[Dorkside]

Versions

• vite-plugin-federation: v1.1.14
• vite: 4.0.4

Reproduction

Reproduction repo : https://github.com/Dorkside/ref-reactive-federated

Steps to reproduce

npm run build:test-vue npm run preview:test-vue npm run dev:ui

What is Expected?

Have the ref and reactive variables increment every second

What is actually happening?

The ref and reactive variables seem to have NO reactivity.

This might be a limitation of the plugin, but it would be greatly appreciated not having to store every variable in pinia.

[T0miii]

Could also reproduce the issue, reactive variables does not seem to work

[Dorkside]

I'm willing to lend a hand on this, but feel a little lost as to where to start.

I have been experimenting with other solutions, and it seems that the same thing happens through exporting a Vue app as a lib, and importing it with Systemjs at runtime.

[Dorkside]

I've updated my reference repo for this, and it seems that the loaded plugin through vite-plugin-federation has no reference to the getCurrentInstance and does not trigger the onMounted event for the component.

[T0miii]

I'm willing to lend a hand on this, but feel a little lost as to where to start.

I have been experimenting with other solutions, and it seems that the same thing happens through exporting a Vue app as a lib, and importing it with Systemjs at runtime.

i wonder if it has to do something with vite 4, or if its some Vue internal change, cause i can remember that both reactivity and css leaking was not a problem in a previous version.

I also started parsing the library , so i can understand more what we are talking about here.

[Dorkside]

I have managed to reproduce the issue with vue-cli that relies on webpack under the hood. So it doesn't seem to be a vite issue.

Do you remember which version of Vue it used to work with ?

[ruleeeer]

The initial judgment is that it is caused by the failure of shared, which actually loads two vue instances

[Dorkside]

That could be a reason, I had a few difficulties in my webpack attempt as well in an error along those lines : "Shared module is not available for eager consumption: webpack/sharing/consume/default/vue/vue" when adding vue as a shared dep.

[liu351]

I've been seeing something similar and reproducible with my personal shared library that is no longer being shared between my remote apps and the host app anymore after the version update. When I downgrade to 1.1.13, the shared import code is generated and referenced in the federated files, but it does not look like the same is happening as of 1.1.14. I narrowed it down to it working after I revert the buildStart & outputOptions in shared-production.ts, but I don't grasp it well enough to further elaborate

i downloaded your repo and downgraded to 1.1.13 and the counter is incrementing again

[Dorkside]

I have just tested with 1.1.13 and the increment still doesn't work in the host app. Will try with a few versions and see if one of them solves the issue.

[Dorkside]

Even 1.0.0 and 0.0.1 present the same issue.

[liu351]

Even 1.0.0 and 0.0.1 present the same issue.

Maybe it's not reflecting the older package if you check package lock or node modules. I didn't change anything else in your repo when I tested it 🤷‍♂️

[T0miii]

the PR is already up, just need to be reviewed what i can tell.

[Dorkside]

Even 1.0.0 and 0.0.1 present the same issue.

Maybe it's not reflecting the older package if you check package lock or node modules. I didn't change anything else in your repo when I tested it 🤷‍♂️

Well I did delete my lock and node_modules each time... Not sure why it would not be updated in my env

[Dorkside]

Even 1.0.0 and 0.0.1 present the same issue.

Maybe it's not reflecting the older package if you check package lock or node modules. I didn't change anything else in your repo when I tested it 🤷‍♂️

I'm wondering which app did you test ? With default settings, the remote app runs on port 4173, whereas the host app runs on 5173. There is no issue with the remote in standalone. The issue that I am still facing is in the host app on 5173 where the counter does not increment (though there is a log in the console on each tick).

[liu351]

Even 1.0.0 and 0.0.1 present the same issue.

Maybe it's not reflecting the older package if you check package lock or node modules. I didn't change anything else in your repo when I tested it 🤷‍♂️

I'm wondering which app did you test ? With default settings, the remote app runs on port 4173, whereas the host app runs on 5173. There is no issue with the remote in standalone. The issue that I am still facing is in the host app on 5173 where the counter does not increment (though there is a log in the console on each tick).

Yeah that's weird. I hit the host running on 5173. I updated both the package.json with the below and reran npm install "@originjs/vite-plugin-federation": "1.1.13"

[ruleeeer]

PR has merged, I`ll check the status of this issue later after new release.

[ruleeeer]

Dorkside/ref-reactive-federated works in version 1.2.0 on my machine

[Dorkside]

Can confirm this solved the issue on a new computer. Will try again on my work computer monday ;-).

[Dorkside]

Back on my work computer and this seems still not to be working. Wondering if there are any globally installed packages that could affect this ?

[Dorkside]

OK, found that by using same domain on the module and on the host makes if functional (as opposed to localhost for the module and default 127.0.0.1 for the host).

[Dorkside]

This is potentially a problem, at least in my setup, as even on localhost using different virtual hosts (one per microfrontend), reactivity isn't working. Anything I might have misonfigured ?

[T0miii]

Might be a CORS issue?

[Dorkside]

Don't think so as that would appear in the network tab right ?

Also works fine outside of dev mode.

[blakerunyon09]

Was there ever a resolution to this issue? I'm hitting problems atm with getCurrentInstance()

[ruleeeer]

Don't think so as that would appear in the network tab right ?

Also works fine outside of dev mode.

This problem only occurs in the development mode, right?

[ruleeeer]

Was there ever a resolution to this issue? I'm hitting problems atm with getCurrentInstance()

What do you mean? Is the responsiveness not working or the problem of the host domain?

[blakerunyon09]

No this isn't working through build mode either. I spent the better part of last week finding a work around getting the composition API working.

I finally realized if I just export the bootstrap file, and mount the app somewhere on the host, that seems to work. But there is for sure an issue in here around Vue 2.7

[rudecigarette]

I also have the similar issue: my host app uses a remote component, the component loses its reactivity when my host app runs in dev mode. While I build and run my host app, everything works fine.

I think it has something to do with multiple vue instances because I get the error"Invalid vnode types Symbol()..."from console when running in dev mode.

I have already set the "shared" config in both host app and remote app, still not working.

[TDAK1509]

I ran into this issue. I found out that using run dev will not update ref in ui, but using preview does.

package.json

{
  "name": "reactive-ref-federated",
  "version": "1.0.0",
  "scripts": {
    "dev:ui": "npm run dev --workspace=ui",
    "build:ui": "npm run build --workspace=ui",
    "build:test-vue": "npm run build --workspace=test-vue",
    "preview:test-vue": "npm run preview --workspace=test-vue",
    "preview:ui": "npm run preview --workspace=ui"
  },
  "workspaces": [
    "packages/ui",
    "packages/test-vue"
  ]
}

Terminal 1

npm run build:test-vue && npm run preview:test-vue

Terminal 2

npm run build:ui && npm run preview:ui