Encountering timeout issues with Next.JS fetch and Axios requests on Vercel production environment

I've been encountering an issue where I am unable to fetch a specific JSON data as it times out and fails to receive a response on Vercel deploy. The JSON data I'm trying to fetch is only 18KB in size and the fetch request works perfectly fine in development on localhost. However, once deployed to Vercel, the fetching process stops abruptly. I even attempted using axios, but faced the same problem. Here is the URL of the JSON data I'm attempting to fetch:

Below is a snippet of the code located inside the api routes folder:

/api/checkUpdates.tsx

const url = 'https://www.canada.ca/content/dam/ircc/documents/json/ee_rounds_123_en.json'
export default async (req: NextApiRequest, res: NextApiResponse) => {

    console.log('before fetch request')
    console.time('fetch')
    
    const data = await fetch(url)
    
    // Everything after this point only executes successfully on localhost
    console.timeEnd('fetch')
    console.log('fetch success')

    const json = await data.json();
    console.log('success')
    const thisDraw = json.rounds[0]
    res.send(thisDraw?.drawNumber)
}

Whenever I attempt to load the page from a Vercel deploy, it seems to hang indefinitely and never loads. The same issue arises when trying to utilize axios. Strangely, everything functions normally on localhost. It appears to be a problem specifically related to that particular page, since I have successfully fetched other JSONs from the internet without any trouble.

Next.JS v13.2.3

Answer №1

  • It appears that the server node version is 16 or lower, so in order to resolve this issue, you will need to install node-fetch
  • Alternatively, you can update the vercel node version to 18
yarn add node-fetch

or

npm install node-fetch
import fetch from 'node-fetch';
const data = await fetch(url)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue.js is throwing an error stating that a component template must have only one main element

I am currently troubleshooting an issue with file upload functionality, but I am unsure of the specific error. In an attempt to track changes, I have been using console logs. Upon running $ npm run watch, an error message is displayed: "Webpack is watchi ...

React Alert: "Unable to modify while in the middle of a state transition"

Currently, I am working on developing an application that involves utilizing a toastr component. However, I am encountering an error when attempting to dispatch a redux action within this particular component. The error message displayed in the console is ...

Troubleshooting issue with getServerSideProps not functioning in Next.js while utilizing Next-redux-wrapper and TypeScript

When attempting to trigger an action as outlined in the documentation using the getServerSideProps function with the help of next-redux-wrapper store and redux-thunk, I am encountering the following TypeScript error: ts(2322): Type '({ req }: GetServe ...

Using Angular JS for Traditional Multi-page Websites

Lately, I've been diving into Angular 2 and I have to admit, it's an impressive framework for building single-page applications. But here's the thing - how would one go about integrating Angular with a traditional website (maybe using codei ...

Learning how to interpret and implement this particular syntax within JavaScript Redux Middleware can be a valuable skill

Currently, I am diving into the world of redux middleware by referring to this informative article: http://redux.js.org/docs/advanced/Middleware.html The code snippet presented below serves as an illustration of how a logging middleware works. const log ...

Exploring the benefits of integrating Apache Thrift with TypeScript

After running the apache thrift compiler, I now have generated .js and .d.ts files. How do I incorporate these files into my current Angular2/Typescript project? I attempted to do so with the following lines of code: ///<reference path="./thrift.d.ts"/ ...

Uniting 2 streams to create a single observable

I am in the process of merging 2 different Observables. The first Observable contains a ShoppingCart class, while the second one holds a list of ShoppingItems. My goal is to map the Observable with shopping cart items (Observable<ShoppingItems) to the i ...

Steps for iterating over the "users" list and retrieving the contents of each "name" element

I'm attempting to iterate over the "users" array and retrieve the value of each "name". Although the loop seems to be functioning correctly, the value of "name" is returning as "undefined" four times. JavaScript: for(var i = 0; i < customer.users ...

JavaScript will continue to run uninterrupted even after refreshing the webpage

Has anyone else encountered the issue of a javascript on a page continuing to run even after the page is refreshed? From what I understand, javascript is single-threaded and should stop running when the page is refreshed. Just to provide some background, ...

Is there a way in javascript, jquery, and plupload to dynamically pass a parameter to the URL without needing to reload the page or object?

I've recently taken over a project that utilizes plupload. I am encountering an issue where I need to change the URL of the object after it has been loaded. However, I'm unsure if this is possible and what steps I would need to take to achieve th ...

Show a dynamic Swiper carousel upon selecting a thumbnail in an image gallery

I am in the process of creating a thumbnail gallery that includes a slider feature using Swiper. The default setup has the slider hidden, and once an image is clicked, the slider should appear with the selected image. To close the slider and return to the ...

Manipulating state in React

Currently, I am enrolled in Samer Buna's Lynda course titled "Full-Stack JavaScript Development: MongoDB, Node and React." While working on the "Naming Contests" application, I encountered a piece of code within the App component that has left me puzz ...

Adding a dynamic form to each row in a table: A step-by-step guide

Hey there! I'm facing a challenge with dynamically generated rows in a form. I want to send only the inputs from the selected row when a checkbox is clicked. Can you help me figure this out? I tried using let rowForm = $(event.currentTarget).closest( ...

Having difficulty implementing interval to a maximum of 2 minutes or until a certain condition is fulfilled in Angular

In my current scenario, I am working with two APIs - apiOne and apiTwo. When I call apiOne, it should return a response. If the response is successful, then I need to pass this response as a parameter to apiTwo. ApiTwo will then provide another response wh ...

Determine the associated value for a given key within a TypeScript object

I have a structure like this: type newsItem = { img: string; slug: newsSlug; text: newsText; }; derived from an enum like this: export const newsEnum = { interesting: "Interesting", regions: "Regions", contradictory: " ...

"Encountering an error with the any type in the useLocation feature while using React Router version 6

https://i.sstatic.net/0YcS9.png What steps should I take to resolve this particular type of error issue? My attempt at passing a custom type did not yield successful results. ...

Tips for showcasing an item with the chosen value in a dropdown menu

Below is the object I created: export default { data() { return { language: { "en": { welcomeMsg: "Welcome to New York City" }, "de": { ...

Incorporating jsbi into a TypeScript project while adhering to strict mode

I have been developing a TypeScript library that relies on native BigInts. While it functions perfectly in Chrome, I encountered some issues with Safari. After some research, I stumbled upon the jsbi "polyfill" that seems to solve this problem. Unfortunat ...

What is the most effective way to extract content values from different divs for calculation using jQuery?

I am working on creating a function that retrieves the content values from the <div class="rowtabela"> div and reads the nodes of <div class="item v_...">. Check out my code below: <div class="adicionados" id=& ...

Struggling to make PayPal Cordova Plugin function properly in both production and sandbox modes

While using the cordova paypal plugin and switching to sandbox mode, I encountered an error. The plugin can be found at https://github.com/paypal/PayPal-Cordova-Plugin https://i.stack.imgur.com/lD2EH.png Running the plugin in PayPalEnvironmentNoNetwork m ...