Align crm-app MSW setup with todo-app pattern and improve vite config

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

examples/crm-app/src/main.tsx

@@ -1,3 +1,9 @@
+/**
+ * Main Entry Point
+ * 
+ * Initializes MSW and renders the CRM application.
+ */
+
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
@@ -8,10 +14,8 @@ import { initClient } from './client';
 
 async function bootstrap() {
   // 1. Start MSW Mock Server (Critical: Must be first)
-  if (process.env.NODE_ENV === 'development') {
-    console.log('🛑 Bootstrapping Mock Server...');
-    await startMockServer();
-  }
+  console.log('🛑 Bootstrapping Mock Server...');
+  await startMockServer();
 
   // 2. Initialize Clients (Must happen AFTER MSW is ready)
   // This ensures discovery requests (/api/v1/metadata) are intercepted by MSW

examples/crm-app/vite.config.ts

@@ -25,6 +25,34 @@ export default defineConfig(({ mode }) => ({
       '@object-ui/example-crm': path.resolve(__dirname, '../../examples/crm/src'),
     },
   },
+  optimizeDeps: {
+    include: [
+      'msw',
+      'msw/browser',
+      '@objectstack/spec',
+      '@objectstack/spec/data',
+      '@objectstack/spec/system',
+      '@objectstack/spec/ui'
+    ]
+  },
+  build: {
+    commonjsOptions: {
+      include: [/node_modules/, /packages/],
+      transformMixedEsModules: true
+    },
+    rollupOptions: {
+      onwarn(warning, warn) {
+        // Suppress warnings for optional dynamic imports
+        if (
+          warning.code === 'UNRESOLVED_IMPORT' &&
+          warning.message.includes('@objectstack/driver-memory')
+        ) {
+          return;
+        }
+        warn(warning);
+      }
+    }
+  },
   test: {
     globals: true,
     environment: 'jsdom',

examples/msw-todo/src/main.tsx

@@ -9,7 +9,6 @@ import ReactDOM from 'react-dom/client';
 import { App } from './App';
 import { startMockServer } from './mocks/browser';
 
-// Start MSW before rendering the app
 async function bootstrap() {
   // Initialize Mock Service Worker
   await startMockServer();
@@ -22,4 +21,7 @@ async function bootstrap() {
   );
 }
 
-bootstrap();
+bootstrap().catch(err => {
+  console.error("FATAL: Application failed to start", err);
+  document.body.innerHTML = `<div style="color:red; padding: 20px;"><h1>Application Error</h1><pre>${err.message}</pre></div>`;
+});