CSS from federated modules are not loading

[rodoabad]

If you have CSS files in your federated module, they do not get loaded in run time (although they do get built).

[rubiks-cube]

Check base value in your vite config. Faced similar issue this fixed for me.

[rodoabad]

Check base value in your vite config. Faced similar issue this fixed for me.

What did you setup yours with? The default is / which is why I just left mine as is.

[rubiks-cube]

Are you exposing remote after doing build/preview or in dev mode?

[gioboa]

@rodoabad have you solved this issue?

[rodoabad]

@rubiks-cube I'm running vite preview on both host and remote.

@gioboa I haven't resolved this issue.

Another issue I'm having and is probably another issue is for some reason, some random tests fail if the build is with federation and if I remove it from plugins, it passes. I will try and create a test repository outside of our private organization .

[rubiks-cube]

in preview for remote adding base to hostname for e.g. http://localhost:5173/ resolved my issue for css

[rodoabad]

in preview adding base to hostname for e.g. http://localhost:5173/ resolved my issue for css

@rubiks-cube Let me try that right now. I literally got to office and starting my IDE. LOL. Will bring you results as I go through them.

[rodoabad]

Let me share our config.

HOST

// CORE

import {defineConfig} from 'vite';
import {federation} from '@module-federation/vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig(({mode}) => {
    return {
+        base: 'http://localhost:8080/',
        build: {
            cssCodeSplit: false, // Error: Unable to preload CSS
            minify: false,
            modulePreload: false, // Prevents 403/404 errors when preloading in network tab
            target: 'esnext'
        },
        plugins: [
            federation({
                name: 'host',
                remotes: {
                    PKGA: {
                        type: 'module', // Set to `var` for Webpack and Rspack federated modules
                        name: 'PKGA',
                        entry:  mode === 'production' ? '/assets/pkg-a/remote.js' : 'http://localhost:8081/remote.js'
                    },
                    PKGB: {
                        type: 'module', // Set to `var` for Webpack and Rspack federated modules
                        name: 'PKGB',
                        entry: mode === 'production' ? '/assets/pkg-b/remote.js' : 'http://localhost:8082/remote.js'
                    },
                },
                filename: 'remote.js',
                shared: ['react', 'react-dom', 'react-intl', 'react-router-dom']
            }),
            react()
        ]
    }
});

REMOTES

// PKG A
import {defineConfig} from 'vite';
import {federation} from '@module-federation/vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
+    base: 'http://localhost:8081/',
    build: {
        cssCodeSplit: false, // Error: Unable to preload CSS
        minify: false,
        modulePreload: false, // Prevents 403/404 errors when preloading in network tab
        target: 'esnext'
    },
    plugins: [
        federation({
            exposes: {
                './app': './src/app.tsx'
            },
            filename: 'remote.js',
            name: 'PKGA',
            shared: ['react', 'react-dom', 'react-intl', 'react-router-dom']
        }),
        react()
    ]
});

// PKG B
import {defineConfig} from 'vite';
import {federation} from '@module-federation/vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig(async ({command}) => ({
+    base: 'http://localhost:8082/',
    build: {
        cssCodeSplit: false, // Error: Unable to preload CSS
        minify: false,
        modulePreload: false, // Prevents 403/404 errors when preloading in network tab
        target: 'esnext'
    },
    plugins: [
        federation({
            exposes: {
                './app': './src/app.tsx'
            },
            filename: 'remote.js',
            name: 'PKGB',
            shared: ['react', 'react-dom', 'react-intl', 'react-router-dom']
        }),
        react()
    ],
    test: {
        coverage: {
            enabled: true
        },
        css: {
            modules: {
                classNameStrategy: 'non-scoped'
            }
        },
        environment: 'happy-dom',
        globals: true,
        include: ['**/__tests__/unit/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
        setupFiles: [
            '__tests__/unit/__helpers__/setup-test-framework.ts'
        ]
    }
}));

@rubiks-cube With this setup, PKG A and PKG B CSS still doesn't get loaded.

[rubiks-cube]

entry: mode === 'production' ? '/assets/pkg-a/remote.js' : 'http://localhost:8081/remote.js' in preview (production mode) host will fetch remoteentry from '/assets/pkg-a/remote.js'. I think in this case css for remote is trying to load from http://localhost:8080/. Can you add hostname for remote in which preview is running like you have done for development mode in host config?

[rodoabad]

entry: mode === 'production' ? '/assets/pkg-a/remote.js' : 'http://localhost:8081/remote.js' in preview (production mode) host will fetch remoteentry from '/assets/pkg-a/remote.js'. I think in this case css for remote is trying to load from http://localhost:8080/. Can you add hostname for remote in which preview is running like you have done for development mode in host config?

Update! Still doesn't work, @rubiks-cube. I basically replaced entry with just http://localhost:8081/remote.js and http://localhost:8082/remote.js respectively for PKG A and PKG B, since I'm running local servers for preview.

[rubiks-cube]

can u check in network tab in devtools from which location browser is trying to load remote app css?

[rodoabad]

can u check in network tab in devtools from which location browser is trying to load remote app css?

It's not requesting any of the CSS files.

Notice in PKG A and PKG B the CSS is messed up? That's the missing CSS not loading.

PKG A for example is supposed to look like this.

[rubiks-cube]

can u confirm if PKG A dist folder has CSS files and these CSS files are getting imported in JS files in dist folder?

[rodoabad]

@rubiks-cube It's there.

[rubiks-cube]

is style-CpnI5EpU.css being imported in any of JS files in this dist folder?

[rodoabad]

@rubiks-cube Yup!

If I go to localhost:8081/pkg-a I see the CSS loading.

[rubiks-cube]

For me same thing was happening css was loading fine for remote in isolation but not when used inside host. After debugging I find out host was trying to load remote css from its own hostname, updating base fixed for me. Can you check which JS file in dist is importing this CSS file and try debugging that JS file in devtools if it is making request for that CSS?

[gioboa]

Can you share your repo @rubiks-cube ? This will definitely help

[rodoabad]

@rubiks-cube , @gioboa I think I HAVE AN IDEA. The suggestion to look at the dist to actually check if it's being loaded was an awesome suggestion. Because, when I looked, it was being loaded in the development index.html file for PKG A. That file is never loaded in CORE. CORE has it's own index.html file.

Note: BTW, if you're not seeing "/assets", I change assets directory to jus ..

[rubiks-cube]

Sorry but I am working in private repo of my org which I can't share here

[rodoabad]

So yeah, I think that's the problem. If we're not building a lib, Vite needs an index.thml and if we are importing CSS, it will add that style tag in the index.html of the package. However, since it's federated, it won't be using the index.html from PKG A. It will however use the index.html from CORE. But Core is being built elsewhere and has no idea it needs to add that CSS file, unless PKG A will add it later on.

[rubiks-cube]

For me I am not building a lib but still css doesn't get injected by default in index.html. are u using some plugin that is doing that?

[rodoabad]

For me I am not building a lib but still css doesn't get injected by default in index.html. are u using some plugin that is doing that?

Nah bruv. Whatever config I have. That's it.