Interesting problem with a root and mife where only some in component scoped css comes through on build

[amalvivek]

I have a very simple Yarn + Vite + Vue 3 root and mife set up as in the Documentation for this plugin, including the mounting and unmounting of css (despite my only css coming from tailwind classes and in component scoped class styling). From my test-mife HomeView.vue, it seems like the flexbox and alignment styling is working as expected, however the bg-black and text-white are not. This is my most straightforward mife so I have shared this however after integrating another one of my projects, I can see a similar issue where some css is not coming through and affecting the built application. In serve mode, everything works as expected!

https://github.com/amalvivek/portfolio
https://github.com/amalvivek/test-mife

[webJose]

Hello. I'll have a look if you can help me resolve the following error while running npm i (don't use yarn):

npm ERR! Cannot read properties of null (reading 'edgesOut')

npm ERR! A complete log of this run can be found in: C:\Users\webJo\AppData\Local\npm-cache\_logs\2024-02-17T04_34_36_280Z-debug-0.log

Any ideas? This happens in the test-mife repository.

[webJose]

Nevermind, I seem to have been able to install.

[webJose]

Ok, so I'm currently running the two projects, but I don't know what I'm seeing. Please update with screenshots that describe the styling issue.

[amalvivek]

Ah apologies, let me clarify and thank you for your help!

So the url for my root is http://localhost:5173 and my microfrontend (test-mife) is at '/test' - below are the screenshots when running it in serve mode.

And here is a screenshot of the mife when I build it, as you can see the background is white and text black instead of being swapped like in serve mode above:

Note URLs:
Serve root - http://localhost:5173/
Serve mife - http://localhost:5173/test/
Build root - http://localhost:4173/
Build mife - http://localhost:4173/test/

[webJose]

Please see the contents returned by this CSS URL (in preview mode):

As you can see, it is incorrect. It is not CSS.

This is because you must set Vite's base property. Previous versions of this plug-in used to set this, but not anymore. You need to set your expected base path before building.

In your test-mife project, try this for configuration:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginSingleSpa from 'vite-plugin-single-spa';


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(), vitePluginSingleSpa({
      type: "mife",
      serverPort: 3001
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    hmr: false
  },
  base: 'http://localhost:3001' // <------------ THIS
})

This will screw up your router, so the router code needs modification:

const basePath = new URL(import.meta.env.BASE_URL).pathname; // <----------  Get rid of the absolute part of the base URL
console.log('Base path: %s', basePath);
const router = (base: string) => createRouter({
  history: createWebHistory(basePath + base), // <------ This could still give you some grief if you don't take care of potentially double-slashing when concatenating

Summarizing: I believe the problem you have is the missing base.

[amalvivek]

Wow, perfect - thank you so much. This issue is gone! Great to know about needing to set the base!