Cannot read properties of "viteMetadata"

[hector-jaraba-NWSE]

Hello, first of all thanks for this incredible work!

I'm having issues with the version 0.4.0

I'm getting the following error when building,

✓ 3106 modules transformed.
[vite-plugin-single-spa] Cannot read properties of undefined (reading 'viteMetadata')
✓ built in 5.54s
error during build:
TypeError: Cannot read properties of undefined (reading 'viteMetadata')
    at collectCssFiles (file:///node_modules/vite-plugin-single-spa/plugin-factory.js:303:38)
    at collectCssFiles (file:///node_modules/vite-plugin-single-spa/plugin-factory.js:309:33)
    at Object.handler (file:///node_modules/vite-plugin-single-spa/plugin-factory.js:312:25)
    at file:///node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:18605:40

I'm using:

"react": "18.2.0",
"react-dom": "18.2.0",
"vite": "5.0.2"

and also styled components, any idea?

Thanks!

[webJose]

Hello! I haven't tested with Vite v5 yet. If you can reproduce this with Vite v4.5.0, then I'll have a look. Otherwise, I would conclude this is a Vite v5 problem that will be addressed once I upgrade this package for it. Sounds good?

[hector-jaraba-NWSE]

Sure! I downgraded to vite 4.5.0 and I still getting the same issue.

[webJose]

Ok, then. I'll have a look at night. I am planning on doing npm create vite@latest, choose React + TS + SWC and then make a micro-frontend out of it. Let me know if this is not enough to reproduce the issue. Otherwise, I'll come back with the results.

[webJose]

Ok, as promised, I looked. Spoiler: Could not reproduce.

My Test

1. Create new project using npm create vite@latest. Select React + TS + SWC. I got Vite v5.0.3.
2. Install dependencies using npm i.
3. Install the needed single-spa packages to make the project a micro-frontend project: npm i vite-plugin-single-spa single-spa-react --force. The --force switch is needed because this plug-in is not yet tested with Vite v5. This makes npm reject installation unless this switch is used.
4. Modify vite.config.ts. See below for code.
5. Add src/spa.tsx. See below for code.
6. Run npm run build. Success. See below for the result.

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import vitePluginSingleSpa from 'vite-plugin-single-spa'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), vitePluginSingleSpa({
    serverPort: 4555,
    spaEntryPoints: "src/spa.tsx"
  })],
})

// src/spa.tsx

import React from 'react';
import ReactDOMClient from 'react-dom/client';
import App from './App';
// @ts-expect-error
import singleSpaReact from 'single-spa-react';

export const { bootstrap, mount, unmount } = singleSpaReact({
    React,
    ReactDOMClient,
    rootComponent: App,
    errorBoundary(err: any, _info: any, _props: any) {
        return <div>Error!<br />{err}</div>
    }
});

PS C:\...\VpssBugTest> npm run build

> vpssbugtest@0.0.0 build
> tsc && vite build

vite v5.0.3 building for production...
✓ 32 modules transformed.
dist/assets/react-h3aPdYU7.svg                   4.13 kB │ gzip:  2.14 kB
dist/assets/vpss(vpssbugtest)spa-cfVfczdt.css    0.48 kB │ gzip:  0.31 kB
dist/spa.js                                    149.92 kB │ gzip: 47.84 kB
✓ built in 559ms

If you can provide a project that reproduces the issue, it is welcome.

[hector-jaraba-NWSE]

Thanks for the quick reply! I will try to create the same POC as yours and add all the plugins and the vite config that I'm using to try to reproduce the issue, I will let you know!

[hector-jaraba-NWSE]

There you go: https://github.com/hector-jaraba/mfe-example

I created this repo with the bug, if you run yarn build you should be able to reproduce it

[webJose]

Hello, I'll try it out, but I don't use yarn. I guess I should ask repro's with npm.

[webJose]

Fixed in v0.5.2.