preload-helper uses wrong host

[ker-nicolaib]

Versions

• vite-plugin-federation: 1.3.1
• vite: 4.4.9

Reproduction

clone the code in the repository "modulefederation" => https://github.com/ker-nicolaib/modulefederation

To start the "Remote-Project" go to the folder "miniapp" and run "npm i". After that start "npm run build" and then "npm run preview" => Project should now run on "http://localhost:4173/"

To start the "Host-Project" go to the folder "shell" and run "npm i". After that start "npm run dev" => Project should now run on "http://localhost:5173/"

The Host-Project contains the "Remote-Project" => Navigate to "MiniApp" by clicking on the Hyperlink or just paste the following Url into your browser: http://localhost:5173/miniApp
After navigating there you can now see the Remote-Project and it's two hyperlinks "Home" and "About" within the Host-Project. In the Screenshot below i already navigated to about within the remote-project.

What is Expected?

When navigating to "about" it should display the AboutView within the Remote-Project (which is running within the Host-Project itself)

What is actually happening?

When navigating to "about" the preload-helper throws HTTP-404 Not Found Errors.

=> instead of using the Host from the Remote-App (http://localhost:4173/assets/AboutView...) it seems to try to load it from the Host-App (http://localhost:4173/assets/AboutView...) which won't work because it's not available there.

The Problem seems to be related to Lazy-Load the Component within the vue-router.
When the Component is loaded eagerly it just works fine (see HomeView.vue).

[Hookyns]

@ker-nicolaib
I had the same issue, but it is a Vite's "issue". See vite/src/node/plugins/importAnalysisBuild.ts#L199

You have to add base: "./" to your remote's vite.config file so the correct preload code (using import.meta.url) is generated.

[ker-nicolaib]

@Hookyns
It works now! Many thanks!! :-)

[arshithdev07]

@ker-nicolaib I had the same issue, but it is a Vite's "issue". See vite/src/node/plugins/importAnalysisBuild.ts#L199

You have to add base: "./" to your remote's vite.config file so the correct preload code (using import.meta.url) is generated.

Where should I add this? Can you please send a sample vite config

[Hookyns]

@ker-nicolaib I had the same issue, but it is a Vite's "issue". See vite/src/node/plugins/importAnalysisBuild.ts#L199
You have to add base: "./" to your remote's vite.config file so the correct preload code (using import.meta.url) is generated.

Where should I add this? Can you please send a sample vite config

See https://vite.dev/config/shared-options.html#base and https://vite.dev/guide/build.html#public-base-path.

It's Vite option. As I said, you have to add base: "./" to your remote's vite.config file.
Remote is remote, a.k.a. producer. https://module-federation.io/guide/start/glossary.html

EDIT:

Sample:

export default defineConfig({
    base: "./",
    plugins: [
        federation({ ... })
    ]
});