module-federation
CSS from federated modules are not loading
If you have CSS files in your federated module, they do not get loaded in run time (although they do get built).
Check base value in your vite config. Faced similar issue this fixed for me.
Check
basevalue 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 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 .
in preview for remote adding base to hostname for e.g. http://localhost:5173/ resolved my issue for css
in preview adding
baseto 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.
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.
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?
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 fromhttp://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.
can u check in network tab in devtools from which location browser is trying to load remote app css?
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.
can u confirm if PKG A dist folder has CSS files and these CSS files are getting imported in JS files in dist folder?
is style-CpnI5EpU.css being imported in any of JS files in this dist folder?
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?
@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 ..
Sorry but I am working in private repo of my org which I can't share here
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.
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?
For me I am not building a
libbut still css doesn't get injected by default inindex.html. are u using some plugin that is doing that?
Nah bruv. Whatever config I have. That's it.
Im also having problems with the css not being injectedon origin js i didnt have this problem
@gioboa https://github.com/rull3211/demo-cssbug hey this repo reporduces it :) the remote running by it self successfully injects the styling but when fetched with host the stylesheet isnt invoked.
I have tried with running the remote both with the server.js npm run preview:server and with running just the normal preview.
and same with the host i have run it both with server, preview and with run dev none of the alternatives work.
I have also tried with and without the baseurl. all of the alternatives have worked with origin js if u are wondering. :)
If ypu need anything from me you can also contact me on Discord.
i appreciate the help cheers! :)
I tested your app and the problem here is the hot module reload of the remote app. If I change the scss of the remote and then I refresh the host everything is working fine. The remote app is working great with HMR too. so it's a different issue.
Im a bit confused now i dont exactly understand. i have the problem when i serve the host and remote with the node server too o.O what am i doing wrong?
OHH snap! i havent tried that lol. yeahh when i serve the remote with npm run dev then the css works. but when i serve it after building the project then the css doesnt get sent with the component