Module Federation + base url

[terragady]

Hi, starting from Vite5 the module federation plugin was not working properly with the Vite.

We are using baseUrl, lets say /base/url and we have this setting in vite config: base: "/base/url" which is fine but the whole app does not work in dev mode (local server) and we figured out it needed setting server: { origin: "/base/url } and then it starts and module federation works properly but the problem starts with images now, they are not found because double base url is applied like http://localhost:8080/base/url/base/url/assets/images/image.png so we have removed the origin and tried other fix and we had to use proxy for node_modules like this: '/node_modules': 'http://localhost:8080/base/url/',

I think this is because module federation is using the origin to build the path but the origin destroy somehow pathing for assets (I found it is only the images, the js and the rest works just fine).

but my gut feeling says it is a wrong solution and hardcoding port and url here but it works fine with dev, build, federation and images. Anyone knows what is best solution here and what we are doing wrong/ or good? 🙂

[an501920078]

try add server.origin

[terragady]

I am doing this but then the assets does not load as they have double base url

[an501920078]

Yes, I agree with you, and I also find that the new URL is problematic if you add server.origin

[AdityaSP]

Hi, did you find a solution to this? Can you please explain the proxy for node modules?

[an501920078]

base: /${name}/,

It's not good, but it has to be

[wuchunxu]

Since the base URL works well in the production mode, we can use enviroment variables to avoid this problem in development mode.

# .env.development
VITE_BASE_URL='/'

# .env.production
VITE_BASE_URL='/base/url'

// vite.config.js
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  return {
    base: env.VITE_BASE_URL,
    // ...
  }
}