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

I have the same problem, could you find a solution? – Edwin Aquino Jan 23 '23 at 20:01 — Edwin Aquino, Jan 23 '23 at 20:01

score 0 · Answer 1 · answered Feb 23 '23 at 21:05

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.

score 0 · Answer 2 · answered Mar 16 '23 at 20:38

I'm having a similar issue, but I'm using nx in addition to vite. My problem is that vite build will generate remoteEntry.js in the dist directory, but it doesn't run the remote server (as mentioned in the docs). But, while vite preview does start a server for the remote, and it serves out of the dist directory, it triggers a build again, but in dev mode, which doesn't seem to use the vite-plugin-federation plugin...because it overwrites the dist directory with the same set of files I see when running in dev mode (i.e. it doesn't produce remoteEntry.js). This may be an nx thing, as nx preview defaults to building with the development configuration. If I update nx's project.json to use the production configuration, it does produce remoteEntry.js and serves the project successfully.

So, pdro_99, first check your dist directory while running in preview mode, and see if there is actually a remoteEntry.js. Second, try running vite preview in production mode, to see if that'll produce the module federation files.

How to publish webpack on Vite properly

2 Answers2