CODEWITHSUNDEEP
javascriptreactjsnext.jsproduction-environment
nreh
nreh

Reputation: 506

NextJS - Application Error: A client side exception has occurred

I've never received an error like this before,

I have a file that defines functions for making API calls, currently I'm reading the endpoint base URLs from the environment variables:

/**
 * Prepended to request URL indicating base URL for API and the API version
 */
 const VERSION_URL = `${process.env.NEXT_PUBLIC_API_BASE_URL}/${process.env.NEXT_PUBLIC_API_VERSION}`

I tried to make a quick workaround because environment variables weren't being loaded correctly, by hardcoding the URLS incase the variable wasn't defined.

/**
 * Prepended to request URL indicating base URL for API and the API version
 */
 const VERSION_URL = `${process.env.NEXT_PUBLIC_API_BASE_URL || 'https://hardcodedURL.com'}/${process.env.NEXT_PUBLIC_API_VERSION || 'v1'}`

In development and production mode when running on my local machine it works fine (docker container). However, as soon as it's pushed to production, I then get the following screen:

Application Error

This is the console output:

framework-bb5c596eafb42b22.js:1 TypeError: Path must be a string. Received undefined
    at t (137-10e3db828dbede8a.js:46:750)
    at join (137-10e3db828dbede8a.js:46:2042)
    at J (898-576b101442c0ef86.js:1:8158)
    at G (898-576b101442c0ef86.js:1:10741)
    at oo (framework-bb5c596eafb42b22.js:1:59416)
    at Wo (framework-bb5c596eafb42b22.js:1:68983)
    at Ku (framework-bb5c596eafb42b22.js:1:112707)
    at Li (framework-bb5c596eafb42b22.js:1:98957)
    at Ni (framework-bb5c596eafb42b22.js:1:98885)
    at Pi (framework-bb5c596eafb42b22.js:1:98748)
cu @ framework-bb5c596eafb42b22.js:1
main-f51d4d0442564de3.js:1 TypeError: Path must be a string. Received undefined
    at t (137-10e3db828dbede8a.js:46:750)
    at join (137-10e3db828dbede8a.js:46:2042)
    at J (898-576b101442c0ef86.js:1:8158)
    at G (898-576b101442c0ef86.js:1:10741)
    at oo (framework-bb5c596eafb42b22.js:1:59416)
    at Wo (framework-bb5c596eafb42b22.js:1:68983)
    at Ku (framework-bb5c596eafb42b22.js:1:112707)
    at Li (framework-bb5c596eafb42b22.js:1:98957)
    at Ni (framework-bb5c596eafb42b22.js:1:98885)
    at Pi (framework-bb5c596eafb42b22.js:1:98748)
re @ main-f51d4d0442564de3.js:1
main-f51d4d0442564de3.js:1 A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred
re @ main-f51d4d0442564de3.js:1

Viewing the source at t (137-10e3db828dbede8a.js:46:750)

Source at t

I'm completely at a lost at what this means or what is happening. Why would hardcoding in a string for the path result in this client error? The lack of a readable source code is making this impossible for me to understand what's happening.

Quick googling suggests that I should upgrade some package, but the error is so vague, I'm not even sure what package is giving the issue.

This is the roughly the how the version URL path is being used

 /**
  * Send a get request to a given endpoint
  *
  * **Returns a Promise**
  */
 function GET(token, data, parent, api) {
   return new Promise((resolve, reject) => {
     try {
       let req = new XMLHttpRequest()
 
       let endpoint = `${VERSION_URL}/${parent}/${api}` // base url with the params not included
       let params = new URLSearchParams() // URLSearchParams used for adding params to url

       // put data in GET request params
       for (const [key, value] of Object.entries(data)) {
         params.set(key, value)
       }
 
       let query_url = endpoint + "?" + params.toString() // final query url
 
       req.open("GET", query_url, true)
       req.setRequestHeader("token", token) // put token into header
  
       req.onloadend = () => {
         if (req.status === 200) {
           // success, return response
           resolve([req.response, req.status])
         } else {
           reject([req.responseText, req.status])
         }
       }
 
       req.onerror = () => {
         reject([req.responseText, req.status])
       }
 
       req.send()
     } catch (err) {
       reject(["Exception", 0])
     }
   })
 }

Upvotes: 2

Views: 10928

Answers (2)

Long.H
Long.H

Reputation: 61

It happened to me when I changed [locale] path to en while my middleware.js had configure for locale during debugging. Hope this helps!

Upvotes: 0

Mahadi Hassan
Mahadi Hassan

Reputation: 1016

From my experience, this problem can happen for multiple reasons. The most common one is because you didn't put the data accessing checker properly when data comes from an API. Sometimes this things we don't see in browser but it gives such error when you deploy.

For example:

const response = fetch("some_url");
const companyId = response.data.companyId; ❌
const companyId = response?.data?.companyId; ✔️

Upvotes: 6

Related Questions