White Blank Screen Issue After Deploying React Application in Firebase




We often get a white screen after deploying our react application in firebase. 

কেন এই সমস্যাঃ 

এটয়া আমাদের auto import extension ভুল ইম্পোর্ট এর কারণে হয়।

Iআপনি আপনার লাইভ লিঙ্ক এ গিয়ে ব্রাইজার এর কন্সোল ট্যাব ওপেন করলে এই Object(...) is not a function error. দেখতে পাবেন



সমাধানের উপায়?

Step-1:

লম্বা একটা শ্বাস নিন

Step-2:

cltr + shift + f press করুন । আপনি VS Code এর বামপাশে একটা সার্চ বক্স দেখতে পাবেন।


Step-3:

 সার্চ বক্স এ লিখুন  import  আপনি অনেকগুলো কম্পোনেন্ট দেখবেন যেগুলোতে import ব্যবহার করা  হয়েছে।




Step-4: 

সব কম্পোনেন্টে এক এক করে ইম্পোর্টগুলো চেক করবেন  ।

ইম্পোর্টগুলো  চেক করার সময় যদি from "react/cjs/react.development"  এরকম কিছু দেখেন তাহলে এটি রিপ্লেস করে   from "react"   করে দিন এবং  from "react-router" দেখলে  এটি রিপ্লেস করে "react-router-dom"  করে দিন 




Step-5:

build folder  ডিলিট করে দিন ।

Step-8:
 npm run build দিয়ে আবার নতুনভাবে  build  করুন

Step-9: 

git add, commit, push করে এরপর firebase deploy দিন

Step-10: 
লাইভ লিঙ্ক্টি ব্রাউজার এ ওপেন করে রিলোড দিন।  ব্রাউজার console tab ওপেন করে দেখুন  Object(...) is not a function error. এই এরর আছে কিনা যদি থাকে তাহলে Step 1 থেকে আবার শুরু করবেন । না থাকলে পরের স্টেপ ফলো করবেন।

Step-11: 

৩ minute পর আপনার লাইভ লিঙ্ক chrome browser  গিয়ে আপনার লাইভ লিঙ্ক হিট করুন ।  console tab ওপেন রেখে reload button এ মাউস  চেপে ধরে empy cache and hard reload করেন কয়েকবার। সার্ভার আপডেট হতে একটু সময় লাগে তাই ৩ মিনিট কমপক্ষে অপেক্ষা করবেন।






If your problem is solved, listen to music and dance 

                                              💃💃💃💃💃💃💃













Comments

Post a Comment

Popular posts from this blog

Firebase Hosting Setup Complete Issue

Image
ফায়ারবেইজের এই সমস্যটি আমাদের সবচেয়ে  বেশি মাথা খারাপ করে দেয় । 😠 সমস্যার কারণঃ আমরা  যখন হোস্টিং এর কমান্ডগুলো  চালায় , ভুলে  What do you want to use as your public directory?  y      দিয়ে ফেলি । সমাধানের উপায়ঃ Step 1:  প্রথমেই build folder এবং  .firebase , .firebaserc , firebase.json , package-lock.json , yarn.lock ( if exist )  ডিলিট করে দিন। Step 2 :  firebase init এই কমান্ড টি দিন।  নিচের স্টেপ্সগুলো ঠিকমত দিন 👀  What do you want to use as your public directory?    build       Configure as a single-page app (rewrite all urls to /index.html)?   Yes  Set up automatic builds and deploys with GitHub?   No  File build/index.html already exists. Overwrite?    Yes Step 3:  ৩ minute পর আপনার লাইভ লিঙ্ক chrome browser  গিয়ে আপনার লাইভ লিঙ্ক হিট করুন ।  console tab ওপেন রেখে reload button এ মাউস  চেপে ধরে empy cache and hard re...
Read more

Page 404 Not Found After Reloading React Application that is hosted in Firebase

Image
   ফায়ারবেইজে আমদের React Application হোস্ট করলে আমরা  বেশিরভাগ সময় এই এরর দেখে থাকি    😑 সমস্যার কারণঃ   🤔 ফায়ারবেইজে হোস্টিং স্টেপ এ আমরা    Configure as a single-page app (rewrite all urls to /index.html)? (y/N)  No দেওয়ার কারণে  আমাদের এপ্লিকেশন single page  হিসেবে কাজ করছে না। সমাধান এর উপায়ঃ 😀 Step-1:    VS  Code  থেকে আপনার    firebase.json ফাইল ওপেন করুন ।  এটি নিচের মত দেখাবে Step-2:   নিচের  json  দিয়ে  এটা রি-প্লেস করে দিন । { "hosting": { "public": "build", "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } Replace  করার পর এমন দেখাবে --> Step-3:  build folder  delete করে দিয়ে আবার npm run build দিন । আপনার নতুন করে build folder  তৈরি  হবে ।  Step-4:   এবার  firebase deploy কমা...
Read more