Vue Bridge package lacks dist

[HUST-SE-LY]

Describe the bug

After executing pnpm add @module-federation/bridge-vue3@latest , I found that there is no dist directory in the bridge-vue3 package in node_modules, so I cannot import createBridgeComponent.


In addition, I found that vue3-bridge uses vue-router@3 instead of vue-router@4, so dependency conflicts are easy to occur.Is there any reason for this?

Reproduction

https://github.com/HUST-SE-LY/mf-vue3-demo

Used Package Manager

pnpm

System Info

System:
    OS: macOS 14.4.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1.39 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.1 - ~/.nvm/versions/node/v18.20.1/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v18.20.1/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.182
    Safari: 17.4.1

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[zackarychapple]

Just talked to @ScriptedAlchemy he will get a fix out ASAP.

[danpeen]

try this version: @module-federation/bridge-vue3@0.0.0-next-20240718040714, i think it should be fixed

[HUST-SE-LY]

try this version: @module-federation/bridge-vue3@0.0.0-next-20240718040714, i think it should be fixed

thx, it works.
I still have some questions. I use webpack and the second way below which is from official site will cause an error. it throws TypeError: t.loader is not a function. The first way below looks good.

// right way
const container = bridge.createRemoteComponent({
  loader: () => loadRemote('container/export-app'),
});

// wrong way in https://module-federation.io/practice/bridge/vue-bridge.html
const Remote2 = bridge.createRemoteComponent(() =>
  loadRemote('container/export-app'),
);

And vue-router reports a warning

[Vue Router warn]: Component "default" in record with path "/container/:pathMatch(.*)*" is defined using "defineAsyncComponent()". Write "() => import('./MyPage.vue')" instead of "defineAsyncComponent(() => import('./MyPage.vue'))".

[danpeen]

Yes, sorry, it should pass the loader parameter, I will fix this. Thank you~