How to publish webpack on Vite properly

Question

Im trying to publish locally a webpack on Vite to test micro front ends, but when I run my host app, it doesn't find the remoteEntry.js, and thats because when I try to access my remoteEntry.js, it doesn't exist. Does anyone know why?

This is my vite.conf on the remote

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/

// vite.config.js
import federation from "@originjs/vite-plugin-federation";
export default defineConfig({
  server: {
    port: 8080,
  },
  plugins: [
    vue(),
    federation({
      name: "myLib",
      filename: "remoteEntry.js",
      // Modules to expose
      exposes: {
        "./Counter": "./src/components/Counter.vue",
      },
      remotes: {},
      shared: ["vue"],
    }),
  ],
});

And this is the config on the remote side:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  server: {
    port: 8081,
  },
  plugins: [
    vue(),
    federation({
      name: "myApp",
      remotes: {
        myLib: "http://localhost:8080/assets/remoteEntry.js",
      },
      shared: ["vue"],
    }),
  ],
});

When i try to access my dependencies on the host side, this error pops on the console:

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:8080/assets/remoteEntry.js

Thank you very much

Answer 1

The remoteEntry.js file is not built if you are starting your remote server by running the vite command. To get around this you can run vite preview to launch a development server using the actual bundle.

The docs mention this briefly here: https://github.com/originjs/vite-plugin-federation#vite-dev-mode

They suggest you run vite build --watch if you want your changes to hot update. You can also specify a development build by adding the --mode=development argument.