તમારી વેબ એપમાં ખાલી સફેદ પેજ કેવી રીતે ઠીક કરવું

ખાલી સફેદ પેજ લગભગ હંમેશાં બે બાબતોમાંથી એકનો અર્થ થાય છે: એપનું JavaScript કંઈ દોરે તે પહેલાં ક્રેશ થયું, અથવા JavaScript બિલકુલ લોડ જ ન થયું. બ્રાઉઝર કન્સોલ ખોલો (રાઇટ-ક્લિક → Inspect → Console) અને પહેલી લાલ ભૂલ વાંચો, પછી Network ટૅબમાં લોડ ન થયેલી ફાઇલો તપાસો. મોટાભાગના કારણો એન્વાયર્નમેન્ટ વેરિયેબલનો અભાવ, ખોટો બેઝ પાથ, અધૂરું બિલ્ડ, અથવા એક કમ્પોનન્ટમાં ક્રેશ હોય છે.

આ માર્ગદર્શિકા React, Vue કે સમાન ફ્રેમવર્કથી બનેલી સિંગલ-પેજ એપ આવરી લે છે (AI બિલ્ડરથી બનેલી એપ સહિત), જ્યાં ખાલી પેજ સૌથી વધુ જોવા મળે છે.

પેજ સફેદ કેમ છે

આધુનિક સિંગલ-પેજ એપ (SPA) બ્રાઉઝરને લગભગ ખાલી HTML ફાઇલ મોકલે છે, લગભગ આ રીતે:

<body>
  <div id="root"></div>
  <script type="module" src="/assets/index-a1b2c3.js"></script>
</body>

પછી JavaScript તે ખાલી div ની અંદર આખું પેજ બનાવે છે. જો સ્ક્રિપ્ટ લોડ ન થાય, અથવા રેન્ડર થતાં પહેલાં ભૂલ ફેંકે, તો div ખાલી રહે છે અને તમને સફેદ દેખાય છે. પેજ દેખાય તે રીતે “તૂટેલું” નથી; તે ફક્ત ક્યારેય દોરાયું જ નથી.

એટલે ઉકેલ હંમેશાં પેજમાં નહીં, ડેવલપર ટૂલ્સમાંથી શરૂ થાય છે.

પગલું 1: કન્સોલ વાંચો

ડેવલપર ટૂલ્સ ખોલો: પેજ પર રાઇટ-ક્લિક કરીને Inspect પસંદ કરો, અથવા F12 દબાવો (Mac પર Cmd+Option+I). Console ટૅબમાં જાઓ અને પેજ રીલોડ કરો.

પહેલી લાલ ભૂલ જુઓ; પછીની ઘણીવાર તેની આડઅસર હોય છે. તે શું કહે છે તે કારણ તરફ ઈશારો કરે છે:

કન્સોલ સંદેશ (સામાન્ય શબ્દો)	તેનો અર્થ	ક્યાં જવું
`Cannot read properties of undefined (reading '...')`	કોડ એવો ડેટા અપેક્ષિત કરે છે જે હાજર નથી	પગલું 4
`... is not defined` / `... is not a function`	ગુમ import, વેરિયેબલ કે સેટિંગ	પગલું 4 અથવા પગલું 3
`Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"`	સ્ક્રિપ્ટના URL એ JavaScript ને બદલે HTML પેજ પાછું આપ્યું	પગલું 2
`Uncaught SyntaxError: Unexpected token '<'`	એ જ વાત: જ્યાં JavaScript અપેક્ષિત હતું ત્યાં HTML	પગલું 2
`supabaseUrl is required`, `Missing API key`, અથવા સમાન	એક એન્વાયર્નમેન્ટ વેરિયેબલ ખાલી છે	પગલું 3
`Access to fetch ... has been blocked by CORS policy`	બીજા ડોમેનની વિનંતી અવરોધાઈ	જુઓ CORS ભૂલો ઠીક કરવી
કોઈ ભૂલ નથી	રેન્ડરિંગ ચાલ્યું પણ કશું બતાવતું નથી, અથવા CSS તેને છુપાવે છે	પગલું 6

ફાઇલનું નામ અને લાઇન નંબર સહિત સંપૂર્ણ ભૂલ લખાણ કૉપી કરો. જો તમે AI બિલ્ડર વાપરો છો, તો તેને સીધું ચેટમાં પેસ્ટ કરો.

પગલું 2: ફાઇલો લોડ થઈ કે નહીં તે તપાસો

Network ટૅબ ખોલો, Disable cache ટિક કરો, અને રીલોડ કરો. .js અને .css ફાઇલોની વિનંતીઓ જુઓ.

JavaScript ફાઇલ પર સ્ટેટસ 404: પેજ એવી ફાઇલ માગે છે જે સર્વર પર નથી.
સ્ટેટસ 200 પણ પ્રકાર text/html: સર્વરે સ્ક્રિપ્ટને બદલે એક પેજ પાછું આપ્યું (ઘણીવાર index.html પોતે, SPA ફૉલબૅકને કારણે). મૂળ કારણ એ જ: ફાઇલ જ્યાં પેજ અપેક્ષિત કરે છે ત્યાં નથી.

સામાન્ય કારણો:

ખોટો બેઝ પાથ. જો એપ example.com/app/ જેવા પેટા-ફોલ્ડરમાંથી પીરસાય છે, પણ તે /assets/... માંથી ફાઇલો લોડ કરવા બિલ્ડ થઈ હોય, તો દરેક સ્ક્રિપ્ટ વિનંતી ચૂકી જાય છે. Vite માં આ vite.config નો base વિકલ્પ છે; Create React App માં તે homepage ફીલ્ડ છે; Next.js માં basePath. તે એપ ખરેખર જ્યાં પીરસાય છે ત્યાં સાથે મેળ ખાવો જોઈએ.

જૂનું index.html. બિલ્ડ ટૂલ ફાઇલોને કન્ટેન્ટ હૅશ સાથે નામ આપે છે, જેમ કે index-a1b2c3.js. નવા ડિપ્લોય પછી જૂની ફાઇલ ગાયબ થઈ જાય છે. જો બ્રાઉઝર કે CDN પાસે હજી જૂનું index.html કેશ થયેલું હોય, તો તે જૂની ફાઇલ માગે છે અને કશું મળતું નથી. હાર્ડ રીફ્રેશ (Cmd+Shift+R અથવા Ctrl+Shift+R) આની પુષ્ટિ કરે છે. લાંબા ગાળાનો ઉકેલ એ છે કે index.html ટૂંકા અથવા કોઈ-કેશ હેડર સાથે પીરસો, જ્યારે હૅશ થયેલી ફાઇલો લાંબા સમય માટે કેશ થાય.

બિલ્ડ પૂરું થયું નહીં કે ડિપ્લોય થયું નહીં. જો બિલ્ડ નિષ્ફળ ગયું, તો હોસ્ટ કદાચ જૂનું કે ખાલી આઉટપુટ ફોલ્ડર પીરસે છે. ભૂલો માટે બિલ્ડ લૉગ તપાસો.

ખોટું ફોલ્ડર પ્રકાશિત. હોસ્ટે બિલ્ડ આઉટપુટ (સામાન્ય રીતે dist કે build) પીરસવું જોઈએ, પ્રોજેક્ટનું સોર્સ ફોલ્ડર નહીં. સોર્સ પીરસવાથી તમને એવું index.html મળે છે જે /src/main.tsx તરફ નિર્દેશ કરે છે, જે બ્રાઉઝર ચલાવી શકતું નથી.

પગલું 3: એન્વાયર્નમેન્ટ વેરિયેબલ તપાસો

ફ્રન્ટએન્ડ એપ ઘણીવાર બિલ્ડ વખતે API URL અથવા પબ્લિક કી જેવી સેટિંગ વાંચે છે. જો લાઇવ બિલ્ડ પર વેરિયેબલ ગુમ હોય, તો createClient(undefined, undefined) જેવો કોડ તરત ફેંકે છે, અને પેજ સફેદ થઈ જાય છે.

જાણવા જેવી બાબતો:

Vite માં, માત્ર VITE_ થી શરૂ થતા વેરિયેબલ બ્રાઉઝર કોડમાં ઉપલબ્ધ છે, અને તે import.meta.env.VITE_NAME તરીકે વંચાય છે. Create React App માં તે REACT_APP_ છે; Next.js માં, NEXT_PUBLIC_.
આ કિંમતો એપ બિલ્ડ થાય ત્યારે જ સમાવાય છે. બિલ્ડ પછી વેરિયેબલ ઉમેરવાથી ફરી બિલ્ડ અને ડિપ્લોય ન કરો ત્યાં સુધી કશું થતું નથી.
પ્રિવ્યૂ કે તમારા મશીન પર .env ફાઇલ હોઈ શકે છે જે પ્રોડક્શન બિલ્ડ પાસે નથી. હોસ્ટ પર એ જ વેરિયેબલ સેટ કરો.
આ પ્રિફિક્સવાળી કોઈ પણ વસ્તુ પબ્લિક JavaScript માં જાય છે. ત્યાં ફક્ત પબ્લિક કિંમતો મૂકો, ક્યારેય સિક્રેટ કી નહીં.

એક ઝડપી ટેસ્ટ: કન્સોલ ભૂલમાં કોઈ સેટિંગના નામ પાસે undefined શોધો, અથવા પૂછો:

પ્રકાશિત એપ ખાલી પેજ બતાવે છે. ફ્રન્ટએન્ડ વાંચે તે દરેક એન્વાયર્નમેન્ટ વેરિયેબલની યાદી બનાવો, તપાસો કે લાઇવ બિલ્ડમાં કયા ગુમ કે ખાલી છે, અને જ્યારે કોઈ ગુમ હોય ત્યારે ખાલી પેજને બદલે સ્પષ્ટ ભૂલ સંદેશ બતાવો.

પગલું 4: ક્રેશ ઠીક કરો

જો કન્સોલમાં સામાન્ય JavaScript ભૂલ હોય, તો રેન્ડરિંગ વખતે કોડ ક્રેશ થયો. AI વડે બનેલી એપમાં સામાન્ય કારણો:

ડેટા હજી લોડ થયો નથી. user આવ્યા પહેલાં કમ્પોનન્ટ user.name વાંચે છે. ઉકેલ લોડિંગ સ્થિતિ, અથવા optional chaining (user?.name).
ખાલી ડેટા. નવા ખાતામાં કોઈ રેકૉર્ડ નથી, અને કોડ ધારે છે કે સૂચિમાં ઓછામાં ઓછી એક વસ્તુ છે.
અપેક્ષા બહારનો ડેટા આકાર. API એ કોડ જે સૂચિ અપેક્ષિત કરે તેને બદલે ભૂલ ઑબ્જેક્ટ પાછું આપ્યું.
ગુમ import, ફાઇલનું નામ બદલાયા કે ખસેડાયા પછી.
સર્વર-સાઇડ રેન્ડરિંગ દરમિયાન ફક્ત બ્રાઉઝરમાં ચાલતી API વાપરવી, જેમ કે Next.js સર્વર કમ્પોનન્ટમાં window કે localStorage.

AIને સંપૂર્ણ ભૂલ, પેજ, અને તમે કયા ખાતા સાથે લૉગ ઇન હતા તે આપો:

નવા વપરાશકર્તાઓ માટે Dashboard પેજ ખાલી છે. કન્સોલ: ProjectList.tsx:18 પર TypeError: Cannot read properties of undefined (reading 'map'). મારા ખાતામાં, જેમાં પ્રોજેક્ટ છે, તે ચાલે છે. ખાલી ખાતામાં “No projects yet” બતાવે તેમ ઠીક કરો, અને પ્રિવ્યૂમાં નવું ખાતું તપાસો.

પગલું 5: એરર બાઉન્ડરી ઉમેરો

React માં, એક ક્રેશ થતો કમ્પોનન્ટ આખી એપને અનમાઉન્ટ કરી શકે છે, એટલે જ નાની બગ સંપૂર્ણ ખાલી પેજ બનાવે છે. એરર બાઉન્ડરી એક એવો કમ્પોનન્ટ છે જે તેની નીચેની રેન્ડરિંગ ભૂલો પકડે છે અને તેના બદલે ફૉલબૅક બતાવે છે.

મુખ્ય રૂટની આસપાસ એરર બાઉન્ડરી ઉમેરો જે “Something went wrong” અને Reload બટન બતાવે, અને ભૂલ કન્સોલમાં લૉગ કરે. હેડર અને નેવિગેશન તેની બહાર રાખો જેથી તે હજી રેન્ડર થાય.

તે બગ ઠીક કરતું નથી, પણ મુલાકાતીઓ ખાલી સ્ક્રીનને બદલે સંદેશ જુએ છે, અને તમે જુઓ છો કે તે ક્યાં તૂટ્યું.

પગલું 6: કોઈ ભૂલ નથી, છતાં ખાલી

જો કન્સોલ સ્વચ્છ હોય અને સ્ક્રિપ્ટ લોડ થાય:

Elements ટૅબ તપાસો. <div id="root"> ની અંદર કન્ટેન્ટ છે? જો હા, તો તે રેન્ડર થાય છે પણ દેખાતું નથી: સફેદ પર સફેદ ટેક્સ્ટ, opacity: 0, display: none, અથવા તેને ઢાંકતું પૂર્ણ-સ્ક્રીન તત્ત્વ.
રાઉટર તપાસો. જો વર્તમાન URL સાથે કોઈ રૂટ મેળ ન ખાય અને “not found” રૂટ ન હોય, તો કેટલાક રાઉટર કશું રેન્ડર કરતા નથી. 404 પેજ બતાવતો કૅચ-ઑલ રૂટ ઉમેરો.
માઉન્ટ પૉઇન્ટ તપાસો. કોડ એવા તત્ત્વમાં માઉન્ટ થવો જોઈએ જે અસ્તિત્વમાં છે. જો index.html માં id="app" હોય અને કોડ root શોધે, તો કશું દેખાતું નથી (અને React સામાન્ય રીતે ભૂલ લૉગ કરે છે).
બ્રાઉઝર એક્સ્ટેન્શન તપાસો. પ્રાઇવેટ વિન્ડો અજમાવો. Ad blocker ક્યારેક analytics કે ads જેવા નામવાળી સ્ક્રિપ્ટ અવરોધે છે.

શું પેજ રિફ્રેશ કર્યા પછી જ ખાલી થાય છે?

જો હોમ પેજ ચાલે પણ /dashboard રિફ્રેશ કરવાથી ખાલી પેજ કે 404 બતાવે, તો સર્વરને એપના રૂટ માટે index.html મોકલવાની ખબર નથી. તે રાઉટિંગ ફૉલબૅકની સમસ્યા છે, જે ડિપ્લોય પછી 404 ભૂલો કેવી રીતે ઠીક કરવીમાં આવરી લેવાઈ છે.

સામાન્ય ભૂલો

પહેલી નહીં, છેલ્લી ભૂલ વાંચવી. પહેલી લાલ લીટી સામાન્ય રીતે કારણ હોય છે.
બિલ્ડ કર્યા વિના એન્વાયર્નમેન્ટ વેરિયેબલ સેટ કરવા. ફ્રન્ટએન્ડ વેરિયેબલ બિલ્ડ વખતે નક્કી થાય છે.
ફક્ત તમારા પોતાના ખાતાથી ટેસ્ટ કરવું. ખાલી ખાતામાં ક્રેશ એ ખાલી-પેજના સૌથી સામાન્ય કારણોમાંનું એક છે.
ડિપ્લોય કામ કર્યું એવું માનવું. કોડ ડિબગ કરતાં પહેલાં બિલ્ડ લૉગ તપાસો.
બધા માટે બ્રાઉઝર કેશને દોષ આપવો. હાર્ડ રીફ્રેશ સેકન્ડોમાં તેને નકારે છે; જો પેજ હજી ખાલી હોય, તો કારણ કંઈક બીજું છે.

Mythex માં ખાલી પેજ

જો Preview ખાલી હોય, તો પહેલાં તપાસો કે એપ ચાલે છે (Code → terminal ખોલો), પછી Mythex ને સાચો સર્વર શરૂ કરવા કહો, પ્રિવ્યૂ ટૂલબારમાં Refresh ક્લિક કરો, અથવા /fix વાપરો. પ્રકાશિત URL ખાલી હોય તો ડૉક્સ સૂચવે છે કે એક મિનિટ રાહ જુઓ અને હાર્ડ-રીફ્રેશ કરો, પ્રકાશિત કરતાં પહેલાં એન્વ વેરિયેબલ અને ડેટાબેઝ સેટ થયાં છે તેની ખાતરી કરો, અને તમારી હોસ્ટિંગ મર્યાદા તપાસો. યાદ રાખો કે પ્રકાશિત એપ એક સ્નેપશોટ છે: કંઈક ઠીક કર્યા પછી ફરી પ્રકાશિત કરો. જો કોઈ ફેરફારને કારણે આ થયું, તો છેલ્લા સારા જવાબ પર Revert to this point પ્રોજેક્ટને પાછો લાવે છે. ડૉક્સમાં Troubleshooting અને Publish troubleshooting જુઓ, અને AI વડે બનેલી એપ ડિબગ કરવી માર્ગદર્શિકા પણ.

ખાલી પેજ ચેકલિસ્ટ

કન્સોલમાં પહેલી લાલ ભૂલ વાંચી
Network ટૅબમાં 404 આપતી અથવા HTML પાછી આપતી .js/.css ફાઇલો તપાસી
બેઝ પાથ એ જગ્યા સાથે મેળ ખાય છે જ્યાં એપ પીરસાય છે
બિલ્ડ પૂરું થયું, અને બિલ્ડ આઉટપુટ ફોલ્ડર જ પ્રકાશિત થાય છે
લાઇવ બિલ્ડ પર બધા ફ્રન્ટએન્ડ એન્વાયર્નમેન્ટ વેરિયેબલ સેટ, પછી ફરી બિલ્ડ
ક્રેશ ઠીક, ખાલી અને નવા ખાતા માટે પણ
ભવિષ્યના ક્રેશ સંદેશ બતાવે તે માટે એરર બાઉન્ડરી
અજાણ્યા URL માટે કૅચ-ઑલ રૂટ
હાર્ડ રીફ્રેશ પછી અને પ્રાઇવેટ વિન્ડોમાં ટેસ્ટ

પ્રશ્નો

મારી React એપ ખાલી સફેદ પેજ કેમ બતાવે છે?

સામાન્ય રીતે કારણ કે કંઈ પણ રેન્ડર થાય તે પહેલાં JavaScript ક્રેશ થયું, અથવા JavaScript ફાઇલ બિલકુલ લોડ થઈ નહીં. બ્રાઉઝર કન્સોલ ખોલો: ત્યાંની લાલ ભૂલ કહે છે કે કયું, અને ક્યાં ફાઇલ તથા લાઇનમાં થયું.

મારી એપ લોકલ પર ચાલે પણ ડિપ્લોય પછી ખાલી પેજ કેમ બતાવે છે?

સૌથી સામાન્ય કારણો: લાઇવ બિલ્ડ માટે ક્યારેય સેટ ન થયેલા એન્વાયર્નમેન્ટ વેરિયેબલ, ખોટા પાથ પરથી માગાયેલી JavaScript અને CSS ફાઇલો (બેઝ પાથનો મેળ ન ખાવો), અને જૂનું કેશ થયેલું index.html જે હવે અસ્તિત્વમાં ન હોય તેવી ફાઇલો તરફ નિર્દેશ કરે છે.

'Failed to load module script' નો અર્થ શું છે?

બ્રાઉઝરે JavaScript ફાઇલ માગી પણ તેને બદલે HTML પેજ મળ્યું, સામાન્ય રીતે સાઇટનું index.html અથવા ભૂલ પેજ. ફાઇલનો પાથ ખોટો છે અથવા સર્વર પર ફાઇલ નથી, એટલે બિલ્ડ આઉટપુટ અને એપની બેઝ પાથ સેટિંગ તપાસો.

એક બગને આખા પેજને ખાલી થતું કેવી રીતે અટકાવું?

એરર બાઉન્ડરી ઉમેરો. React માં, એરર બાઉન્ડરી એક કમ્પોનન્ટ છે જે તેની નીચેના પેજના ભાગમાં રેન્ડરિંગની ભૂલો પકડે છે અને બધું અનમાઉન્ટ કરવાને બદલે ફૉલબૅક સંદેશ બતાવે છે.