वेब ऐप में सफ़ेद पेज (blank white page) कैसे ठीक करें
ज़्यादातर मामलों में वेब ऐप का खाली सफ़ेद पेज दो में से एक वजह से होता है: ऐप का JavaScript कुछ भी बनाने से पहले crash हो गया, या JavaScript लोड ही नहीं हुआ। Browser console खोलें (right-click → Inspect → Console) और पहली लाल एरर पढ़ें, फिर Network tab में उन files को देखें जो लोड नहीं हुईं। ज़्यादातर कारण होते हैं: environment variable की कमी, गलत base path, build का पूरा न होना, या किसी एक component में crash।
यह गाइड React, Vue या ऐसे ही frameworks से बने single-page apps (SPA) के बारे में है, जिसमें AI builders से बनी ऐप भी शामिल हैं। खाली पेज सबसे ज़्यादा इन्हीं में होते हैं।
पेज सफ़ेद क्यों होता है
एक आधुनिक SPA browser को लगभग खाली HTML फ़ाइल भेजती है, कुछ ऐसी:
<body>
<div id="root"></div>
<script type="module" src="/assets/index-a1b2c3.js"></script>
</body>
इसके बाद JavaScript उस खाली div के अंदर पूरा पेज बनाता है। अगर script लोड नहीं होती, या render से पहले कोई error फेंकती है, तो div खाली रह जाता है और आपको सफ़ेद दिखता है। पेज देखने में "टूटा" नहीं लगता; बस कभी बन ही नहीं पाता।
इसीलिए समाधान हमेशा developer tools से शुरू होता है, पेज को सीधे देखने से नहीं।
चरण 1: Console पढ़ें
Developer tools खोलें: पेज पर right-click करके Inspect चुनें, या F12 दबाएं (Mac पर Cmd+Option+I)। Console tab पर जाएं और पेज रीलोड करें।
पहली लाल एरर देखें; बाद वाली अक्सर उसी का असर होती हैं। उसका मैसेज कारण की ओर इशारा करता है:
| Console मैसेज (आम शब्द) | इसका मतलब | कहां जाएं |
|---|---|---|
Cannot read properties of undefined (reading '...') | कोड को ऐसा डेटा चाहिए था जो मौजूद नहीं था | चरण 4 |
... is not defined / ... is not a function | कोई गायब import, variable या setting | चरण 4 या चरण 3 |
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html" | किसी script का URL JavaScript की जगह HTML लौटा रहा है | चरण 2 |
Uncaught SyntaxError: Unexpected token '<' | वही बात: JavaScript की जगह HTML मिला | चरण 2 |
supabaseUrl is required, Missing API key, या इससे मिलता-जुलता | कोई environment variable खाली है | चरण 3 |
Access to fetch ... has been blocked by CORS policy | दूसरे domain की request ब्लॉक हुई | CORS एरर कैसे ठीक करें |
| कोई एरर नहीं | Render हुआ लेकिन कुछ दिख नहीं रहा, या CSS उसे छुपा रही है | चरण 6 |
पूरी एरर का टेक्स्ट कॉपी करें, file का नाम और line number सहित। अगर AI builder इस्तेमाल कर रहे हैं, तो उसे सीधे chat में चिपका दें।
चरण 2: जांचें कि files लोड हुईं या नहीं
Network tab खोलें, Disable cache पर टिक करें और रीलोड करें। .js और .css files की requests देखें।
- JavaScript file पर Status 404: पेज ऐसी file मांग रहा है जो server पर नहीं है।
- Status 200 लेकिन type
text/html: server ने script की जगह एक पेज लौटाया (अक्सरindex.htmlखुद, SPA fallback की वजह से)। मूल कारण एक ही है: file वहां नहीं है जहां पेज उसे ढूंढ रहा है।
आम कारण:
गलत base path। अगर ऐप example.com/app/ पर चल रही है, लेकिन build /assets/... से files लोड करने के लिए बनाया गया था, तो हर script request गलत जगह जाएगी। Vite में यह vite.config का base option है; Create React App में homepage field; Next.js में basePath। यह उसी path से मेल खाना चाहिए जहां ऐप असल में चल रही है।
पुराना index.html। Build tools फ़ाइलों के नाम में content hash डालते हैं, जैसे index-a1b2c3.js। नई deploy के बाद पुरानी file हट जाती है। अगर browser या CDN में पुराना index.html cached है, तो वह पुरानी file मांगेगा और उसे कुछ नहीं मिलेगा। Hard refresh (Cmd+Shift+R या Ctrl+Shift+R) इसकी पुष्टि करता है। लंबे समय का हल यह है कि index.html को छोटे या बिना cache वाले header के साथ दिया जाए, जबकि hashed files लंबे समय तक cache हो सकें।
Build पूरा नहीं हुआ या deploy नहीं हुआ। अगर build फेल हो गया, तो host शायद पुराना या खाली output folder दे रहा है। Build log में errors देखें।
गलत folder publish हो रहा है। Host को build output (आमतौर पर dist या build) देना होता है, project का source folder नहीं। Source folder देने पर index.html /src/main.tsx की ओर इशारा करेगा, जिसे browser नहीं चला सकता।
चरण 3: Environment variables जांचें
Frontend ऐप अक्सर build के समय API URL या public key जैसी settings पढ़ती हैं। अगर live build पर कोई variable नहीं है, तो createClient(undefined, undefined) जैसा कोड तुरंत throw करता है, और पेज सफ़ेद हो जाता है।
ध्यान रखने की बातें:
- Vite में केवल
VITE_से शुरू होने वाले variables browser code में उपलब्ध होते हैं, और इन्हेंimport.meta.env.VITE_NAMEके रूप में पढ़ा जाता है। Create React App में यहREACT_APP_है; Next.js मेंNEXT_PUBLIC_। - ये values build के समय अंदर डाल दी जाती हैं। Build के बाद variable जोड़ने से कुछ नहीं होता, जब तक आप फिर से build और deploy न करें।
- Preview या लोकल मशीन पर
.envfile हो सकती है, जो production build के पास नहीं है। वही variables host पर सेट करें। - इन prefixes वाली हर चीज़ public JavaScript में चली जाती है। सिर्फ़ सार्वजनिक values डालें, कभी secret keys नहीं।
एक त्वरित जांच: console की एरर में किसी setting के नाम के पास undefined खोजें, या पूछें:
Published ऐप पर खाली पेज दिख रहा है। Frontend जितने भी environment variables पढ़ता है, उन सबकी सूची बनाओ, जांचो कि live build में कौन से गायब या खाली हैं, और जब कोई गायब हो तो खाली पेज की जगह एक साफ़ error message दिखाओ।
चरण 4: Crash ठीक करें
अगर console में सामान्य JavaScript एरर है, तो कोड render के दौरान crash हुआ। AI-built apps में आम कारण:
- डेटा अभी लोड नहीं हुआ। कोई component
userआने से पहलेuser.nameपढ़ता है। हल: loading state, या optional chaining (user?.name)। - खाली डेटा। नए account में कोई record नहीं है, और कोड मानता है कि सूची में कम से कम एक आइटम है।
- अलग तरह का डेटा। API ने सूची के बजाय एरर object लौटाया, और कोड उसी की उम्मीद कर रहा था।
- गायब import, file का नाम बदलने या उसे दूसरी जगह ले जाने के बाद।
- Server-side rendering के दौरान browser-only API इस्तेमाल करना, जैसे Next.js server component में
windowयाlocalStorage।
AI को पूरी एरर, पेज और यह बताएं कि आप किस account से लॉगिन थे:
Dashboard पेज नए users के लिए खाली है। Console:
TypeError: Cannot read properties of undefined (reading 'map')ProjectList.tsx:18पर। यह मेरे account के लिए काम करता है, जिसमें projects हैं। इसे ठीक करो ताकि खाली account पर "अभी कोई project नहीं है" दिखे, और preview में नया account जांचो।
चरण 5: Error boundary जोड़ें
React में एक crash करता component पूरी ऐप को unmount कर सकता है, इसीलिए छोटी सी बग से पूरा पेज खाली हो जाता है। Error boundary एक component है जो उसके नीचे होने वाली render errors पकड़ लेता है और उनकी जगह fallback दिखाता है।
मुख्य routes के चारों ओर एक error boundary जोड़ो जो "कुछ गड़बड़ हो गया" दिखाए, साथ में Reload बटन हो, और error को console में लॉग करे। Header और navigation boundary के बाहर रखो ताकि वे दिखते रहें।
यह बग को ठीक नहीं करता, लेकिन visitors को खाली स्क्रीन की जगह एक मैसेज दिखता है, और आपको पता चलता है कि कहां टूटा।
चरण 6: कोई एरर नहीं, फिर भी खाली
अगर console साफ़ है और scripts लोड हो रही हैं:
- Elements tab जांचें। क्या
<div id="root">के अंदर कुछ है? अगर हां, तो वह render हो रहा है, लेकिन दिख नहीं रहा: सफ़ेद पर सफ़ेद टेक्स्ट,opacity: 0,display: none, या कोई पूरी-स्क्रीन element उसे ढक रही है। - Router जांचें। अगर मौजूदा URL से कोई route मेल नहीं खाता और कोई "not found" route नहीं है, तो कुछ routers कुछ भी render नहीं करते। एक catch-all route जोड़ें जो 404 पेज दिखाए।
- Mount point जांचें। कोड को ऐसे element में mount होना चाहिए जो मौजूद हो। अगर
index.htmlमेंid="app"है और कोडrootढूंढ रहा है, तो कुछ नहीं दिखेगा (और React आमतौर पर एरर लॉग करता है)। - Browser extension जांचें। Private window में आज़माएं। Ad blockers कभी-कभी
analyticsयाadsजैसे नाम वाली scripts ब्लॉक कर देते हैं।
क्या पेज सिर्फ़ रीफ़्रेश करने पर खाली होता है?
अगर होम पेज काम करता है, लेकिन /dashboard को रीफ़्रेश करने पर खाली पेज या 404 दिखता है, तो server को नहीं पता कि ऐप के routes के लिए index.html भेजना है। यह routing fallback की समस्या है, जो deploy के बाद 404 एरर कैसे ठीक करें में कवर है।
आम गलतियां
- पहली के बजाय आखिरी एरर पढ़ना। पहली लाल लाइन अक्सर असली कारण होती है।
- Build को दोबारा किए बिना environment variables सेट करना। Frontend variables build के समय तय हो जाते हैं।
- सिर्फ़ अपने account से टेस्ट करना। खाली account पर crash सबसे आम खाली-पेज कारणों में से एक है।
- मान लेना कि deploy सफल रहा। कोड debug करने से पहले build log जांचें।
- हर चीज़ के लिए browser cache को दोष देना। Hard refresh इसे कुछ सेकंड में खारिज कर देता है; अगर फिर भी पेज खाली है, तो कारण कुछ और है।
Mythex में खाली पेज
अगर Preview खाली है, तो पहले जांचें कि ऐप चल रही है (Code → terminal खोलें), फिर Mythex से सही server शुरू करने को कहें, preview toolbar में Refresh पर क्लिक करें, या /fix इस्तेमाल करें। अगर published URL खाली है, तो डॉक्स सुझाते हैं कि एक मिनट रुकें और hard-refresh करें, publish करने से पहले env vars और database सेटअप की पुष्टि करें, और अपनी hosting सीमा जांचें। याद रखें कि published ऐप एक snapshot है: कुछ ठीक करने के बाद फिर से publish करें। अगर किसी बदलाव से यह हुआ है, तो आखिरी अच्छे reply पर Revert to this point से project वापस ले जाएं। डॉक्स में Troubleshooting और Publish troubleshooting देखें, और सामान्य गाइड AI से बने app को debug कैसे करें।
सफ़ेद पेज चेकलिस्ट
- Console में पहली लाल एरर पढ़ी
- Network tab में
.js/.cssfiles जांचीं जो 404 दे रही हैं या HTML लौटा रही हैं - Base path उस जगह से मेल खाता है जहां ऐप चल रही है
- Build पूरा हुआ, और publish हो रहा folder वही build output है
- Live build पर सभी frontend environment variables सेट हैं, फिर rebuild किया
- Crash ठीक हुआ, खाली और नए accounts के लिए भी
- Error boundary है ताकि आगे की crashes मैसेज दिखाएं
- अज्ञात URLs के लिए catch-all route है
- Hard refresh और private window में टेस्ट किया
सवाल
मेरी React ऐप में खाली सफ़ेद पेज क्यों दिख रहा है?
आमतौर पर इसलिए कि JavaScript कुछ भी render होने से पहले crash हो गया, या JavaScript फ़ाइल लोड ही नहीं हुई। Browser console खोलें: वहां लाल रंग की एरर बताती है कि कौन सी समस्या है, और किस file और line पर हुई।
मेरी ऐप लोकल पर चलती है, लेकिन deploy के बाद खाली पेज क्यों दिखता है?
सबसे आम कारण हैं: live build के लिए environment variables सेट नहीं किए गए, JavaScript और CSS files गलत path से मांगी जा रही हैं (base path की गड़बड़ी), और पुराना cached index.html ऐसी files की ओर इशारा कर रहा है जो अब मौजूद नहीं हैं।
'Failed to load module script' का क्या मतलब है?
Browser ने एक JavaScript file मांगी, लेकिन उसे JavaScript की जगह HTML पेज मिला, आमतौर पर साइट का index.html या कोई error पेज। File का path गलत है या server पर file मौजूद नहीं है, इसलिए build output और ऐप की base path सेटिंग जांचें।
एक bug पूरे पेज को खाली होने से कैसे रोकूं?
Error boundary जोड़ें। React में error boundary एक ऐसा component है जो उसके नीचे के हिस्से में render होने वाली errors को पकड़ लेता है और पूरे पेज को हटाने के बजाय एक fallback message दिखाता है।