Im having an issue when deploying my react app, ive used firebase hosting before with no problems. Im making a simple news app using react, the app works 100% fine when running it on a local host. but when i try to use firebase or even netlifly i get the same error. The page instantly crashes on load and it returns a type error r undefined. Not sure what is causing it to crash only when using hosting but not on a local host.

function App() {

  const [first, setFirst] = useState([])
  const[query, setQuery] = useState('')
  const [userNews, setUserNews] = useState([])
  const[show, setShow] = useState(true)
  

function handleClick(e){

   
  getNews()
  setShow(false)

    e.preventDefault()
}


useEffect(()=> {
  async function news(){
    const response = await fetch('https://newsapi.org/v2/top-headlines?country=us&apiKey=')
    const newsData = await response.json();
    setFirst(newsData.articles)
    
  }
  news();
  
},  [])



  async function getNews(){
    const answer = await fetch('https://newsapi.org/v2/everything?q='  query  '&from=2022-03-01&sortBy=popularity&language=en&apiKey=')
    const data = await answer.json();
    setUserNews(data.articles)
    //console.log(data)
    }
  
  

  function createCard(first, n){
    return(
      <Article
      key={n}
      title = {first.title}
      author={first.author}
      time={first.publishedAt}
      content={first.description}
      link={first.url}
      photo={first.urlToImage}
      
       />

       
    )
  }

  function createUserCard(userNews, i){
    return(
      <UserArticle
        key={i}
        title = {userNews.title}
        author={userNews.author}
        time={userNews.publishedAt}
        content={userNews.description}
        link={userNews.url}
        photo={userNews.urlToImage}
      

      />
    )
  }

  
  
  return (
    <div>
    <Header />
    <form onSubmit={handleClick} className='input'>
    <input type="text" placeholder='Search.' onChange={ e => setQuery(e.target.value)} />
    <button >search.</button>
    </form>
     { show &&<div className='container'>
        {first.map(createCard)}
    </div>}

       <div className='container'>
        {userNews.map(createUserCard)}
       </div>

    <Footer />
    </div>
  );
}

CodePudding user response：

I can't be sure without seeing the error happen in real time, but it looks like it tries to access a property on something, but gets undefined. r is likely an alias for whichever object that you named but was renamed by the webpacker minification of the code in production.

My guess is that your api call is receiving a bad result, but you aren't properly handling unexpected results from the api. If the result of your api query is anything but the object you expect, then you won't receive an articles property to call, thus an error. Consider using trycatch to cover yourself:

async function getNews(){
  try {
    const answer = await fetch('https://newsapi.org/v2/everything?q='  query  '&from=2022-03-01&sortBy=popularity&language=en&apiKey=')
    const data = await answer.json();
    setUserNews(data.articles)
  } catch(error) {
     console.log(error)
  }
}

This will protect you when getting a bad response from your fetch, and your page won't crash.

Being in a production environment, especially if the backend is managed by a 3rd party provider like firebase, can lead you into possible cors issues, and you may not be getting the same results you would on localhost.

Use the trycatch on both your getNews and news functions (or anywhere you make an external api call, it's just good practice), so you can see if you're getting an error from that api call. Make use of console.log in your catch blocks with the error object. This will reveal right away if you're having issue with the fetch request. Otherwise the code looks fine, and there aren't any issues with it at face value.