ChartJs 在 Vercel 上部署期间不呈现折线图

Question

我使用 React JS 和 Node Js 创建了一个 Web 应用程序。我已经使用图表 JS 从从我的后端获取的数据中呈现折线图。当我在本地通过应用程序运行时，图表正在呈现，但当我将它部署在 Vercel 上时，它没有运行。正在获取所需的数据，但未获取图表。

本地环境：

在 Vercel 上部署后：

你可以看到数据正在被完全获取但是图表没有被渲染。 这是我的 js 文件的一部分：

 const[profile,setProfile]=useState([]);
  const [Xaxis, setXaxis]=useState([]);
  const [Yaxis, setYaxis]=useState([]);
  const [contestName, setContestName]=useState([]);
  const [rank, setRank]=useState([]);
  const [data, setData]= useState()

  //Fetch codeforces stats
  const[profile2,setProfile2]=useState([]);
  const [Xaxis2, setXaxis2]=useState([]);
  const [Yaxis2, setYaxis2]=useState([]);
  const [contestName2, setContestName2]=useState([]);
  const [rank2, setRank2]=useState([]);
  const [data2, setData2]= useState()



  useEffect(()=>{
    const getProfile=async()=>{
      //Fetch Leetcode stats
      const response=await axios.get('https://ayushman-sinha-yc4d.vercel.app/api/routes/leetcode').then((response)=>{
        setProfile(response.data); 
       // window.localStorage.setItem('leetcode',JSON.stringify(response.data));
      });
      //Fetch codeforces stats
      const response2 = await axios.get('https://ayushman-sinha-yc4d.vercel.app/api/routes/leetcode/codeforces').then((response2)=>{
        setProfile2(response2.data);     
        console.log("Fetching Codeforces");
        //window.localStorage.setItem('codeforces',JSON.stringify(response2.data));      
      });
    }    
    getProfile();
   
  },[]);
  //Fire this useEffect only when profile is updated
  useEffect(() => {
    console.log("UseEffect 2");
    if(profile.data){
      let flag=false;
      console.log("UseEffect 2a");
        for(let i=0;i<profile.data.userContestRankingHistory.length;i++){
          if(profile.data.userContestRankingHistory[i].contest.startTime===1632623400)
            flag=true;
          //console.log(profile.data.userContestRankingHistory[i].rating);
          if(flag===true){
            let date = new Date(profile.data.userContestRankingHistory[i].contest.startTime*1000);
            let newDate = monthName[date.getMonth()] + "," + date.getFullYear();
           
            setXaxis((Xaxis)=>[...Xaxis,profile.data.userContestRankingHistory[i].rating]);            
            setYaxis((Yaxis)=>[...Yaxis,newDate]);
            setContestName((contestName)=>[...contestName,profile.data.userContestRankingHistory[i].contest.title]);
            setRank((rank)=>[...rank,profile.data.userContestRankingHistory[i].ranking]);}
          
        }
        setData(
          {
            labels:Yaxis,
            datasets:[
              {
                label:"My Leetcode Ratings",
                data:Xaxis,
                backgroundColor:'false',
                borderColor:'#fa1776',
                tension:0.4,                              
                pointStyle:'false',
                pointBorderColor:'rgba(0, 0, 0, 0.01)',
                pointBackgroundColor:'rgba(0, 0, 0, 0.01)',
                showLine:true
              }
            ]
          }
        )
       
    }
  }, [profile]);