99 lines
2.8 KiB
TypeScript
99 lines
2.8 KiB
TypeScript
import { createRoot } from "react-dom/client";
|
|
import App from "./App";
|
|
import "./index.css";
|
|
|
|
// Type declaration for global callback
|
|
declare global {
|
|
interface Window {
|
|
appLoaded?: () => void;
|
|
}
|
|
}
|
|
|
|
console.log('🎬 main.tsx starting...');
|
|
|
|
// Force immediate execution - no waiting for DOM
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('📄 DOM Content Loaded');
|
|
});
|
|
|
|
// Disable Service Worker for now - can cause caching issues
|
|
// if ('serviceWorker' in navigator) {
|
|
// window.addEventListener('load', () => {
|
|
// navigator.serviceWorker.register('/sw.js')
|
|
// .then((registration) => {
|
|
// console.log('SW registered: ', registration);
|
|
// })
|
|
// .catch((registrationError) => {
|
|
// console.log('SW registration failed: ', registrationError);
|
|
// });
|
|
// });
|
|
// }
|
|
|
|
// Force immediate execution function
|
|
function initApp() {
|
|
try {
|
|
const rootElement = document.getElementById("root");
|
|
console.log('🎯 Root element found:', rootElement);
|
|
|
|
if (!rootElement) {
|
|
throw new Error('Root element not found');
|
|
}
|
|
|
|
console.log('🚀 Creating React root...');
|
|
const root = createRoot(rootElement);
|
|
|
|
console.log('🎭 Rendering App component...');
|
|
root.render(<App />);
|
|
|
|
console.log('✅ React app mounted successfully');
|
|
|
|
// Call global callback to clear timeout
|
|
if (window.appLoaded) {
|
|
window.appLoaded();
|
|
}
|
|
|
|
// Remove preloader once React app has mounted
|
|
setTimeout(() => {
|
|
const preloader = document.getElementById('app-preloader');
|
|
if (preloader) {
|
|
preloader.style.opacity = '0';
|
|
preloader.style.transition = 'opacity 0.5s ease-out';
|
|
setTimeout(() => {
|
|
preloader.remove();
|
|
console.log('🎨 Preloader removed');
|
|
}, 500);
|
|
}
|
|
}, 100);
|
|
} catch (error) {
|
|
console.error('❌ Failed to mount React app:', error);
|
|
|
|
// Fallback error display
|
|
const rootElement = document.getElementById("root");
|
|
if (rootElement) {
|
|
rootElement.innerHTML = `
|
|
<div style="color: red; padding: 20px; font-family: Arial; text-align: center; background: #000; height: 100vh; display: flex; align-items: center; justify-content: center;">
|
|
<div>
|
|
<h1>Critical Error: React app failed to start</h1>
|
|
<p>Error: ${error instanceof Error ? error.message : 'Unknown error'}</p>
|
|
<p>Refreshing automatically in 3 seconds...</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Auto-refresh on error
|
|
setTimeout(() => {
|
|
location.reload();
|
|
}, 3000);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Try to initialize immediately
|
|
if (document.readyState === 'loading') {
|
|
// DOM still loading
|
|
document.addEventListener('DOMContentLoaded', initApp);
|
|
} else {
|
|
// DOM already loaded
|
|
initApp();
|
|
}
|