single-spa minified message #31

[Hosam02]

Hello everyone,
i am a new qiankun user and when i set up the both application (host app and micro-frontend) and i try to access the micro-frontend from the host app i get the single-spa minified message #31 error and the app runs in standalone mode
i am using react 19 + vite for both apps
here is the host app's main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { registerMicroApps, start } from 'qiankun';
import './index.css';

// Register microfrontends
registerMicroApps([
  {
    name: 'micro-frontend-name',
    entry: '//localhost:3001',
    container: '#micro-frontend-container',
    activeRule: '/micro-frontend',
    props: {
      sandbox: {
        experimentalStyleIsolation: true,
      },
    },
  },
]);

// Configure and start Qiankun
const startQiankun = async () => {
  try {
    start({
      prefetch: 'all', // Change to 'all' for eager loading
      sandbox: {
        strictStyleIsolation: true,
      },
      singular: false, // Allow multiple micro apps
      // timeoutMs: 10000, // Increase timeout to 10 seconds
    });
    console.log('[Host] Qiankun started successfully');
  } catch (error) {
    console.error('[Host] Failed to start Qiankun:', error);
  }
};

// Mount host app first
const rootElement = document.getElementById('root');
if (!rootElement) {
  throw new Error('[Host] Root element not found');
}

const root = ReactDOM.createRoot(rootElement);
root.render(<App />);

// Start Qiankun after host app is mounted
startQiankun();

here is my micro-frontend's main.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

let rootInstance: ReactDOM.Root | null = null;

interface MicroFrontendProps {
  container?: Element;
}

// Remove the artificial delay in initialization
async function asyncInitialization() {
  try {
    // Add any necessary initialization here
    console.log("[Micro] Initialization started");
    // Remove setTimeout and perform actual initialization
    return true;
  } catch (error) {
    console.error('[Micro] Initialization failed:', error);
    throw error;
  }
}

function render(props: MicroFrontendProps = {}) {
  try {
    const { container } = props;
    const rootElement = container ? container : document.getElementById('root');
    
    if (!rootElement) {
      throw new Error("[Micro] Root element not found");
    }
    
    if (!rootInstance) {
      console.log('[Micro] Creating new root instance');
      rootInstance = ReactDOM.createRoot(rootElement);
    }
    
    rootInstance.render(<App />);
    console.log('[Micro] Render completed successfully');
  } catch (error) {
    console.error('[Micro] Render failed:', error);
    throw error;
  }
}

export async function bootstrap() {
  console.log('[Micro] Bootstrapping...');
  // Remove asyncInitialization from bootstrap
  console.log('[Micro] Bootstrap completed successfully');
  return Promise.resolve();
}

export async function mount(props: MicroFrontendProps) {
  console.log('[Micro] Mounting...');
  try {
    await asyncInitialization(); // Move initialization to mount
    render(props);
    console.log('[Micro] Mount completed successfully');
  } catch (error) {
    console.error('[Micro] Mount failed:', error);
    throw error;
  }
}

export async function unmount(props: MicroFrontendProps) {
  console.log('[Micro] Unmounting...');
  try {
    if (rootInstance) {
      rootInstance.unmount();
      rootInstance = null;
    }

    if (props.container) {
      props.container.innerHTML = '';
    }
    
    console.log('[Micro] Unmount completed successfully');
  } catch (error) {
    console.error('[Micro] Unmount failed:', error);
    throw error;
  }
}

// Standalone run
if (!window.__POWERED_BY_QIANKUN__) {
  console.log("[Micro] Running in standalone mode");
  render({});
}

and here is my micro-fronend's vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import * as cheerio from 'cheerio';
import vitePluginQiankun from 'vite-plugin-qiankun';  // Import the Qiankun plugin

const htmlRemoveFreshPlugin = () => {
  return {
    name: 'html-transform',
    transformIndexHtml(html: any) {
      const $ = cheerio.load(html);
      $('script').eq(0).remove();  // Removes the problematic React Refresh script
      html = $.html();
      return html;
    },
  };
};


export default defineConfig({
  plugins: [
    react(),
    vitePluginQiankun('micro-frontend-name', { useDevMode: true }),
    ...(process.env.NODE_ENV === 'development' ? [htmlRemoveFreshPlugin()] : []),
  ],
  base: './', // Ensures static assets resolve correctly under Qiankun
  server: {
    port: 3001, // Port to run the microfrontend
    cors: true, // Allow cross-origin requests
  },
  build: {
    target: 'esnext',
    outDir: 'dist',
    assetsDir: 'static',
  },
  define: {
    'process.env': {}, // Handle process.env usage in TypeScript
  },
});

and here is the console

[liujiayii]

try https://github.com/kotarella1110/vite-plugin-qiankun-lite