I am getting a blank white website build while deploying or running build, I am using Clerk and React VITE also I am not getting any errors in the console. Anyone is aware of this error. I think so it might be a clerk error. Even after deploying it shows a blank page
My App.jsx
import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from ‘react-router-dom’;
import { SignedIn, SignedOut, RedirectToSignIn } from ‘@clerk/clerk-react’;
import Home from ‘./pages/Home.jsx’;
import Chat from ‘./pages/Chat.jsx’;
import { Toaster } from ‘react-hot-toast’;
import TalktoCode from ‘./pages/TalktoCode.jsx’;
import { CodeProvider } from ‘./hooks/CodeContext.jsx’;
const router = createBrowserRouter(
createRoutesFromElements(
<Route index element={} />
<Route
path=“chat”
element={
<>
</>
}
/>
<Route
path=“talktocode”
element={
<>
</>
}
/>
)
);
function App() {
return (
<Toaster
position=“top-right”
toastOptions={{
style: {
borderRadius: ‘20px’,
background: ‘#242323’,
color: ‘#fff’,
},
success: {
theme: {
primary: ‘#65A0FB’,
},
},
}}
/>
);
}
export default App;
Main.jsx
// import React from ‘react’;
// import ReactDOM from ‘react-dom/client’;
// import App from ‘./App.jsx’;
// import ‘./index.css’;
// import { ClerkProvider } from ‘@clerk/clerk-react’;
// // More defensive environment variable handling
// const publishableKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
// // Log for debugging
// console.log(‘Environment check:’, {
// hasClerkKey: !!publishableKey,
// nodeEnv: import.meta.env.MODE
// });
// // Show a helpful error if the key is missing
// if (!publishableKey) {
// ReactDOM.createRoot(document.getElementById(‘root’)).render(
// <div style={{ color: ‘white’, padding: ‘20px’ }}>
//
Configuration Error
//
Missing Clerk publishable key. Check environment variables.
//
// );
// } else {
// ReactDOM.createRoot(document.getElementById(‘root’)).render(
// <React.StrictMode>
//
//
//
// </React.StrictMode>
// );
// }
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
import App from ‘./App.jsx’;
import ‘./index.css’;
import { ClerkProvider } from ‘@clerk/clerk-react’;
// Defensive environment variable handling
const publishableKey = VITE_CLERK_PUBLISHABLE_KEY || import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
// Log for debugging
console.log(‘Environment check:’, {
hasClerkKey: !!publishableKey,
nodeEnv: import.meta.env.MODE
});
ReactDOM.createRoot(document.getElementById(‘root’)).render(
<React.StrictMode>
</React.StrictMode>
);