ਵੈੱਬ ਐਪ ਵਿੱਚ ਚਿੱਟਾ ਖਾਲੀ ਪੰਨਾ ਕਿਵੇਂ ਠੀਕ ਕਰੀਏ
ਚਿੱਟਾ ਖਾਲੀ ਪੰਨਾ ਲਗਭਗ ਹਮੇਸ਼ਾ ਦੋ ਗੱਲਾਂ ਵਿੱਚੋਂ ਇੱਕ ਦਾ ਮਤਲਬ ਹੁੰਦਾ ਹੈ: ਐਪ ਦਾ 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 | ਗੁੰਮ ਇੰਪੋਰਟ, ਵੈਰੀਏਬਲ ਜਾਂ ਸੈਟਿੰਗ | ਕਦਮ 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 ਖੋਜੋ, ਜਾਂ AI ਨੂੰ ਪੁੱਛੋ:
ਪ੍ਰਕਾਸ਼ਿਤ ਐਪ ਖਾਲੀ ਪੰਨਾ ਦਿਖਾਉਂਦੀ ਹੈ। ਫਰੰਟ ਐਂਡ ਜੋ ਹਰ ਵਾਤਾਵਰਣ ਵੈਰੀਏਬਲ ਪੜ੍ਹਦਾ ਹੈ ਉਹ ਸੂਚੀਬੱਧ ਕਰੋ, ਜਾਂਚੋ ਕਿ ਲਾਈਵ ਬਿਲਡ ਵਿੱਚ ਕਿਹੜੇ ਗੁੰਮ ਜਾਂ ਖਾਲੀ ਹਨ, ਅਤੇ ਜਦੋਂ ਕੋਈ ਗੁੰਮ ਹੋਵੇ ਤਾਂ ਐਪ ਨੂੰ ਖਾਲੀ ਪੰਨੇ ਦੀ ਥਾਂ ਸਾਫ਼ ਗਲਤੀ ਸੁਨੇਹਾ ਦਿਖਾਉਣ ਦਿਓ।
ਕਦਮ 4: ਕਰੈਸ਼ ਠੀਕ ਕਰੋ
ਜੇ ਕੰਸੋਲ ਵਿੱਚ ਆਮ JavaScript ਗਲਤੀ ਹੈ, ਤਾਂ ਕੋਡ ਰੈਂਡਰ ਕਰਦੇ ਸਮੇਂ ਕਰੈਸ਼ ਹੋਇਆ। AI ਨਾਲ ਬਣੀਆਂ ਐਪਾਂ ਵਿੱਚ ਆਮ ਕਾਰਨ:
- ਡਾਟਾ ਅਜੇ ਲੋਡ ਨਹੀਂ ਹੋਇਆ। ਇੱਕ ਕੰਪੋਨੈਂਟ
userਆਉਣ ਤੋਂ ਪਹਿਲਾਂuser.nameਪੜ੍ਹਦਾ ਹੈ। ਹੱਲ ਹੈ ਲੋਡਿੰਗ ਹਾਲਤ, ਜਾਂ ਔਪਸ਼ਨਲ ਚੇਨਿੰਗ (user?.name)। - ਖਾਲੀ ਡਾਟਾ। ਨਵੇਂ ਖਾਤੇ ਵਿੱਚ ਕੋਈ ਰਿਕਾਰਡ ਨਹੀਂ, ਅਤੇ ਕੋਡ ਮੰਨਦਾ ਹੈ ਕਿ ਸੂਚੀ ਵਿੱਚ ਘੱਟੋ-ਘੱਟ ਇੱਕ ਆਈਟਮ ਹੈ।
- ਅਣਉਮੀਦਿਆ ਡਾਟਾ ਰੂਪ। API ਨੇ ਉਹ ਸੂਚੀ ਦੀ ਥਾਂ ਇੱਕ ਗਲਤੀ ਆਬਜੈਕਟ ਦਿੱਤਾ।
- ਗੁੰਮ ਇੰਪੋਰਟ ਜਦੋਂ ਫਾਈਲ ਦਾ ਨਾਮ ਬਦਲਿਆ ਜਾਂ ਥਾਂ ਬਦਲੀ ਗਈ।
- ਸਿਰਫ਼ ਬ੍ਰਾਊਜ਼ਰ ਵਾਲਾ API ਸਰਵਰ-ਸਾਈਡ ਰੈਂਡਰਿੰਗ ਵਿੱਚ ਵਰਤਣਾ, ਜਿਵੇਂ Next.js ਸਰਵਰ ਕੰਪੋਨੈਂਟ ਵਿੱਚ
windowਜਾਂlocalStorage।
AI ਨੂੰ ਪੂਰੀ ਗਲਤੀ, ਪੰਨਾ, ਅਤੇ ਤੁਸੀਂ ਕਿਸ ਖਾਤੇ ਨਾਲ ਲਾਗਇਨ ਸੀ ਦੱਸੋ:
ਡੈਸ਼ਬੋਰਡ ਪੰਨਾ ਨਵੇਂ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਖਾਲੀ ਹੈ। ਕੰਸੋਲ:
TypeError: Cannot read properties of undefined (reading 'map')ProjectList.tsx:18ਉੱਤੇ। ਇਹ ਮੇਰੇ ਖਾਤੇ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਪ੍ਰੋਜੈਕਟ ਹਨ। ਇਸਨੂੰ ਠੀਕ ਕਰੋ ਤਾਂ ਕਿ ਖਾਲੀ ਖਾਤਾ "ਅਜੇ ਕੋਈ ਪ੍ਰੋਜੈਕਟ ਨਹੀਂ" ਦਿਖਾਏ, ਅਤੇ ਪ੍ਰੀਵਿਊ ਵਿੱਚ ਨਵਾਂ ਖਾਤਾ ਜਾਂਚੋ।
ਕਦਮ 5: ਐਰਰ ਬਾਉਂਡਰੀ ਜੋੜੋ
React ਵਿੱਚ ਇੱਕ ਕਰੈਸ਼ ਹੋਣ ਵਾਲਾ ਕੰਪੋਨੈਂਟ ਪੂਰੀ ਐਪ ਨੂੰ ਹਟਾ ਸਕਦਾ ਹੈ, ਇਸੇ ਲਈ ਛੋਟੀ ਜਿਹੀ ਗਲਤੀ ਨਾਲ ਪੂਰਾ ਪੰਨਾ ਖਾਲੀ ਹੋ ਜਾਂਦਾ ਹੈ। ਐਰਰ ਬਾਉਂਡਰੀ ਇੱਕ ਅਜਿਹਾ ਕੰਪੋਨੈਂਟ ਹੈ ਜੋ ਹੇਠਾਂ ਦੀਆਂ ਰੈਂਡਰਿੰਗ ਗਲਤੀਆਂ ਫੜਦਾ ਹੈ ਅਤੇ ਉਨ੍ਹਾਂ ਦੀ ਥਾਂ ਇੱਕ ਬਦਲਵਾਂ ਸੁਨੇਹਾ ਦਿਖਾਉਂਦਾ ਹੈ।
ਮੁੱਖ ਰੂਟਾਂ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਇੱਕ ਐਰਰ ਬਾਉਂਡਰੀ ਜੋੜੋ ਜੋ "ਕੁਝ ਗਲਤ ਹੋ ਗਿਆ" ਅਤੇ ਇੱਕ Reload ਬਟਨ ਦਿਖਾਏ, ਅਤੇ ਗਲਤੀ ਨੂੰ ਕੰਸੋਲ ਵਿੱਚ ਲਾਗ ਕਰੇ। ਹੈਡਰ ਅਤੇ ਨੈਵੀਗੇਸ਼ਨ ਇਸਦੇ ਬਾਹਰ ਰੱਖੋ ਤਾਂ ਜੋ ਉਹ ਫਿਰ ਵੀ ਰੈਂਡਰ ਹੋਣ।
ਇਹ ਬੱਗ ਨੂੰ ਠੀਕ ਨਹੀਂ ਕਰਦਾ, ਪਰ ਵਿਜ਼ਿਟਰਾਂ ਨੂੰ ਖਾਲੀ ਸਕਰੀਨ ਦੀ ਥਾਂ ਇੱਕ ਸੁਨੇਹਾ ਦਿਖਦਾ ਹੈ, ਅਤੇ ਤੁਹਾਨੂੰ ਪਤਾ ਲੱਗਦਾ ਹੈ ਕਿ ਕਿੱਥੇ ਟੁੱਟਿਆ।
ਕਦਮ 6: ਕੋਈ ਗਲਤੀ ਨਹੀਂ, ਫਿਰ ਵੀ ਖਾਲੀ
ਜੇ ਕੰਸੋਲ ਸਾਫ਼ ਹੈ ਅਤੇ ਸਕ੍ਰਿਪਟਾਂ ਲੋਡ ਹੁੰਦੀਆਂ ਹਨ:
- Elements ਟੈਬ ਜਾਂਚੋ। ਕੀ
<div id="root">ਦੇ ਅੰਦਰ ਕੁਝ ਹੈ? ਜੇ ਹਾਂ, ਤਾਂ ਇਹ ਰੈਂਡਰ ਹੋ ਰਿਹਾ ਹੈ ਪਰ ਅਦਿੱਖ ਹੈ: ਚਿੱਟੇ ਉੱਤੇ ਚਿੱਟਾ ਟੈਕਸਟ,opacity: 0,display: none, ਜਾਂ ਕੋਈ ਪੂਰੀ-ਸਕਰੀਨ ਤੱਤ ਜੋ ਇਸਨੂੰ ਢਕ ਰਿਹਾ ਹੈ। - ਰਾਊਟਰ ਜਾਂਚੋ। ਜੇ ਮੌਜੂਦਾ URL ਨਾਲ ਕੋਈ ਰੂਟ ਮੇਲ ਨਹੀਂ ਖਾਂਦਾ ਅਤੇ "ਨਹੀਂ ਮਿਲਿਆ" ਵਾਲਾ ਰੂਟ ਨਹੀਂ, ਤਾਂ ਕੁਝ ਰਾਊਟਰ ਕੁਝ ਵੀ ਰੈਂਡਰ ਨਹੀਂ ਕਰਦੇ। ਇੱਕ ਕੈਚ-ਆਲ ਰੂਟ ਜੋੜੋ ਜੋ 404 ਪੰਨਾ ਦਿਖਾਏ।
- ਮਾਊਂਟ ਪੁਆਇੰਟ ਜਾਂਚੋ। ਕੋਡ ਨੂੰ ਉਸ ਐਲੀਮੈਂਟ ਵਿੱਚ ਮਾਊਂਟ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ ਮੌਜੂਦ ਹੈ। ਜੇ
index.htmlਵਿੱਚid="app"ਹੈ ਅਤੇ ਕੋਡrootਲੱਭਦਾ ਹੈ, ਤਾਂ ਕੁਝ ਨਹੀਂ ਦਿਖਦਾ (ਅਤੇ React ਆਮ ਤੌਰ ਉੱਤੇ ਗਲਤੀ ਲਾਗ ਕਰਦਾ ਹੈ)। - ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਜਾਂਚੋ। ਇੱਕ ਪ੍ਰਾਈਵੇਟ ਵਿੰਡੋ ਅਜ਼ਮਾਓ। ਐਡ ਬਲੌਕਰ ਕਈ ਵਾਰ
analyticsਜਾਂadsਵਰਗੇ ਨਾਮਾਂ ਵਾਲੀਆਂ ਸਕ੍ਰਿਪਟਾਂ ਬਲੌਕ ਕਰਦੇ ਹਨ।
ਕੀ ਸਿਰਫ਼ ਪੰਨਾ ਤਾਜ਼ਾ ਕਰਨ ਉੱਤੇ ਖਾਲੀ ਹੁੰਦਾ ਹੈ?
ਜੇ ਹੋਮ ਪੰਨਾ ਕੰਮ ਕਰਦਾ ਹੈ ਪਰ /dashboard ਤਾਜ਼ਾ ਕਰਨ ਉੱਤੇ ਖਾਲੀ ਜਾਂ 404 ਦਿਖਦਾ ਹੈ, ਤਾਂ ਸਰਵਰ ਨੂੰ ਪਤਾ ਨਹੀਂ ਕਿ ਐਪ ਰੂਟਾਂ ਲਈ index.html ਭੇਜਣਾ ਹੈ। ਇਹ ਰੂਟਿੰਗ ਫਾਲਬੈਕ ਦੀ ਸਮੱਸਿਆ ਹੈ, ਜੋ ਡਿਪਲੌਏ ਤੋਂ ਬਾਅਦ 404 ਗਲਤੀਆਂ ਕਿਵੇਂ ਠੀਕ ਕਰੀਏ ਵਿੱਚ ਦੱਸੀ ਗਈ ਹੈ।
ਆਮ ਗਲਤੀਆਂ
- ਆਖ਼ਰੀ ਗਲਤੀ ਪੜ੍ਹਨਾ, ਪਹਿਲੀ ਦੀ ਥਾਂ। ਪਹਿਲੀ ਲਾਲ ਲਾਈਨ ਆਮ ਤੌਰ ਉੱਤੇ ਕਾਰਨ ਹੁੰਦੀ ਹੈ।
- ਵਾਤਾਵਰਣ ਵੈਰੀਏਬਲ ਸੈੱਟ ਕਰਕੇ ਦੁਬਾਰਾ ਬਿਲਡ ਨਾ ਕਰਨਾ। ਫਰੰਟ ਐਂਡ ਵੈਰੀਏਬਲ ਬਿਲਡ ਸਮੇਂ ਤੈਅ ਹੁੰਦੇ ਹਨ।
- ਸਿਰਫ਼ ਆਪਣੇ ਖਾਤੇ ਨਾਲ ਟੈਸਟ ਕਰਨਾ। ਖਾਲੀ-ਖਾਤੇ ਦੇ ਕਰੈਸ਼ ਚਿੱਟੇ-ਪੰਨੇ ਦੇ ਸਭ ਤੋਂ ਆਮ ਕਾਰਨਾਂ ਵਿੱਚੋਂ ਹਨ।
- ਮੰਨਣਾ ਕਿ ਡਿਪਲੌਏ ਠੀਕ ਹੋਇਆ। ਕੋਡ ਡੀਬੱਗ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਬਿਲਡ ਲਾਗ ਜਾਂਚੋ।
- ਹਰ ਚੀਜ਼ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਕੈਸ਼ ਨੂੰ ਦੋਸ਼ ਦੇਣਾ। ਹਾਰਡ ਰਿਫ੍ਰੈਸ਼ ਇਸਨੂੰ ਸਕਿੰਟਾਂ ਵਿੱਚ ਰੱਦ ਕਰ ਦਿੰਦਾ ਹੈ; ਜੇ ਫਿਰ ਵੀ ਖਾਲੀ ਹੈ, ਤਾਂ ਕੁਝ ਹੋਰ ਹੈ।
Mythex ਵਿੱਚ ਖਾਲੀ ਪੰਨੇ
ਜੇ ਪ੍ਰੀਵਿਊ ਖਾਲੀ ਹੈ, ਤਾਂ ਪਹਿਲਾਂ ਜਾਂਚੋ ਕਿ ਐਪ ਚੱਲ ਰਹੀ ਹੈ (Code → terminal ਖੋਲ੍ਹੋ), ਫਿਰ ਮਿਥੇਕਸ ਨੂੰ ਸਹੀ ਸਰਵਰ ਚਾਲੂ ਕਰਨ ਲਈ ਕਹੋ, ਪ੍ਰੀਵਿਊ ਟੂਲਬਾਰ ਵਿੱਚ Refresh ਦਬਾਓ, ਜਾਂ /fix ਵਰਤੋ। ਜੇ ਪ੍ਰਕਾਸ਼ਿਤ URL ਖਾਲੀ ਹੈ, ਤਾਂ ਡੌਕਸ ਇੱਕ ਮਿੰਟ ਉਡੀਕਣ ਅਤੇ ਹਾਰਡ-ਰਿਫ੍ਰੈਸ਼ ਕਰਨ ਦਾ ਸੁਝਾਅ ਦਿੰਦੇ ਹਨ, ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਵਾਤਾਵਰਣ ਵੈਰੀਏਬਲ ਅਤੇ ਡੇਟਾਬੇਸ ਸੈੱਟ ਹੋਣ ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਅਤੇ ਆਪਣੀ ਹੋਸਟਿੰਗ ਹੱਦ ਜਾਂਚਣ ਲਈ। ਯਾਦ ਰੱਖੋ ਕਿ ਪ੍ਰਕਾਸ਼ਿਤ ਐਪ ਇੱਕ ਸਨੈਪਸ਼ਾਟ ਹੈ: ਕੁਝ ਠੀਕ ਕਰਨ ਤੋਂ ਬਾਅਦ ਦੁਬਾਰਾ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰੋ। ਜੇ ਕਿਸੇ ਤਬਦੀਲੀ ਨੇ ਇਹ ਕੀਤਾ, ਤਾਂ ਆਖ਼ਰੀ ਚੰਗੇ ਜਵਾਬ ਉੱਤੇ Revert to this point ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਪਿੱਛੇ ਲੈ ਜਾਂਦਾ ਹੈ। ਡੌਕਸ ਵਿੱਚ Troubleshooting ਅਤੇ Publish troubleshooting ਵੇਖੋ, ਅਤੇ ਸਾਡੀ ਆਮ ਗਾਈਡ AI ਨਾਲ ਬਣੀ ਐਪ ਵਿੱਚ ਗਲਤੀਆਂ ਲੱਭਣ ਵੇਖੋ।
ਚਿੱਟਾ ਪੰਨਾ ਚੈੱਕਲਿਸਟ
- ਕੰਸੋਲ ਵਿੱਚ ਪਹਿਲੀ ਲਾਲ ਗਲਤੀ ਪੜ੍ਹੀ
- Network ਟੈਬ ਵਿੱਚ
.js/.cssਫਾਈਲਾਂ ਜਾਂਚੀਆਂ ਜੋ 404 ਦਿੰਦੀਆਂ ਹਨ ਜਾਂ HTML ਦਿੰਦੀਆਂ ਹਨ - ਬੇਸ ਪਾਥ ਉਸ ਥਾਂ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ ਜਿੱਥੇ ਐਪ ਸਰਵ ਹੁੰਦੀ ਹੈ
- ਬਿਲਡ ਪੂਰਾ ਹੋਇਆ, ਅਤੇ ਪ੍ਰਕਾਸ਼ਿਤ ਫੋਲਡਰ ਬਿਲਡ ਆਉਟਪੁੱਟ ਹੈ
- ਲਾਈਵ ਬਿਲਡ ਉੱਤੇ ਸਾਰੇ ਫਰੰਟ ਐਂਡ ਵਾਤਾਵਰਣ ਵੈਰੀਏਬਲ ਸੈੱਟ, ਫਿਰ ਦੁਬਾਰਾ ਬਿਲਡ
- ਕਰੈਸ਼ ਠੀਕ ਕੀਤਾ, ਖਾਲੀ ਅਤੇ ਨਵੇਂ ਖਾਤਿਆਂ ਸਮੇਤ
- ਐਰਰ ਬਾਉਂਡਰੀ ਲੱਗੀ ਤਾਂ ਜੋ ਭਵਿੱਖ ਦੇ ਕਰੈਸ਼ ਸੁਨੇਹਾ ਦਿਖਾਉਣ
- ਨਾ-ਜਾਣੇ URL ਲਈ ਕੈਚ-ਆਲ ਰੂਟ
- ਹਾਰਡ ਰਿਫ੍ਰੈਸ਼ ਅਤੇ ਪ੍ਰਾਈਵੇਟ ਵਿੰਡੋ ਵਿੱਚ ਜਾਂਚਿਆ
ਸਵਾਲ
ਮੇਰੀ React ਐਪ ਚਿੱਟਾ ਖਾਲੀ ਪੰਨਾ ਕਿਉਂ ਦਿਖਾਉਂਦੀ ਹੈ?
ਆਮ ਤੌਰ ਉੱਤੇ ਇਸ ਲਈ ਕਿ JavaScript ਕੁਝ ਵੀ ਰੈਂਡਰ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਕਰੈਸ਼ ਹੋ ਗਈ, ਜਾਂ JavaScript ਫਾਈਲ ਕਦੇ ਲੋਡ ਨਹੀਂ ਹੋਈ। ਬ੍ਰਾਊਜ਼ਰ ਕੰਸੋਲ ਖੋਲ੍ਹੋ: ਉੱਥੇ ਲਾਲ ਗਲਤੀ ਦੱਸਦੀ ਹੈ ਕਿ ਕਿਹੜੀ, ਅਤੇ ਫਾਈਲ ਤੇ ਲਾਈਨ ਕਿੱਥੇ।
ਮੇਰੀ ਐਪ ਲੋਕਲ ਤੇ ਕੰਮ ਕਰਦੀ ਹੈ ਪਰ ਡਿਪਲੌਏ ਤੋਂ ਬਾਅਦ ਖਾਲੀ ਪੰਨਾ ਕਿਉਂ?
ਸਭ ਤੋਂ ਆਮ ਕਾਰਨ ਹਨ ਵਾਤਾਵਰਣ ਵੈਰੀਏਬਲ ਜੋ ਲਾਈਵ ਬਿਲਡ ਲਈ ਕਦੇ ਸੈੱਟ ਨਹੀਂ ਹੋਏ, JavaScript ਅਤੇ CSS ਫਾਈਲਾਂ ਗਲਤ ਪਾਥ ਤੋਂ ਮੰਗੀਆਂ ਜਾਣੀਆਂ (ਬੇਸ ਪਾਥ ਦਾ ਬੇਮੇਲ), ਅਤੇ ਪੁਰਾਣਾ ਕੈਸ਼ ਕੀਤਾ index.html ਜੋ ਹੁਣ ਮੌਜੂਦ ਨਾ ਹੋਣ ਵਾਲੀਆਂ ਫਾਈਲਾਂ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦਾ ਹੈ।
'Failed to load module script' ਦਾ ਕੀ ਮਤਲਬ ਹੈ?
ਬ੍ਰਾਊਜ਼ਰ ਨੇ ਇੱਕ JavaScript ਫਾਈਲ ਮੰਗੀ ਅਤੇ ਉਸਦੀ ਥਾਂ HTML ਪੰਨਾ ਮਿਲਿਆ, ਆਮ ਤੌਰ ਉੱਤੇ ਸਾਈਟ ਦਾ index.html ਜਾਂ ਕੋਈ ਗਲਤੀ ਪੰਨਾ। ਫਾਈਲ ਦਾ ਪਾਥ ਗਲਤ ਹੈ ਜਾਂ ਫਾਈਲ ਸਰਵਰ ਉੱਤੇ ਨਹੀਂ, ਇਸ ਲਈ ਬਿਲਡ ਆਉਟਪੁੱਟ ਅਤੇ ਐਪ ਦੀ ਬੇਸ ਪਾਥ ਸੈਟਿੰਗ ਜਾਂਚੋ।
ਇੱਕ ਗਲਤੀ ਨੂੰ ਪੂਰੇ ਪੰਨੇ ਨੂੰ ਖਾਲੀ ਕਰਨ ਤੋਂ ਕਿਵੇਂ ਰੋਕਾਂ?
ਇੱਕ ਐਰਰ ਬਾਉਂਡਰੀ ਜੋੜੋ। React ਵਿੱਚ ਐਰਰ ਬਾਉਂਡਰੀ ਇੱਕ ਅਜਿਹਾ ਕੰਪੋਨੈਂਟ ਹੈ ਜੋ ਹੇਠਾਂ ਵਾਲੇ ਹਿੱਸੇ ਦੀਆਂ ਰੈਂਡਰਿੰਗ ਗਲਤੀਆਂ ਫੜਦਾ ਹੈ ਅਤੇ ਹਰ ਚੀਜ਼ ਨੂੰ ਹਟਾਉਣ ਦੀ ਥਾਂ ਇੱਕ ਬਦਲਵਾਂ ਸੁਨੇਹਾ ਦਿਖਾਉਂਦਾ ਹੈ।