The API endpoint code functions perfectly in Express, but encounters an error when integrated into Next.js

Express Code:

app.get('/', async (req, res) => {
    const devices = await gsmarena.catalog.getBrand("apple-phones-48");
    const name = devices.map((device) => device.name);
    res.json(name);
}) 

Nextjs Code:

import {gsmarena} from "gsmarena-api"

export async function GET() {
  const devices = await gsmarena.catalog.getBrand("apple-phones-48");
  const name = devices.map((device: any) => device.name);
   
    return Response.json({ data: any })
  }

When attempting to use the same code in Next.js, an error is encountered:

 ⨯ TypeError: Cannot read properties of undefined (reading 'catalog')
    at GET (webpack-internal:///(rsc)/./src/app/api/phonelist/route.ts:9:78)
    at D:\WEB D\specsync\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:63815
    at D:\WEB D\specsync\node_modules\next\dist\server\lib\trace\tracer.js:133:36
    ...

The same error persists when attempting to implement the code in React.

I am utilizing the Gsm arena API available at: https://github.com/nordmarin/gsmarena-api

Answer №1

If you're encountering the

Cannot read properties of undefined (reading 'catalog')
error, it indicates that the variable gsmarena is not defined on line 4 of your next.js script.

After reviewing the documentation for the gsmarena-api library, it appears that this package does not utilize a named export and may require the default export instead.

// Change import statement from: import { gsmarena } from 'gsmarena-api';
import gsmarena from 'gsmarena-api';

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

When attempting to send a token from an account to a marketplace in ERC721, the transfer caller must either be the owner

Currently, I am in the process of transferring my NFT to a marketplace pragma solidity ^0.8.7; import "@openzeppelin/contracts/utils/Counters.sol"; import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol"; import & ...

Encountering [object, Object] while attempting to display JSON object retrieved from req.body in the console

While attempting to insert a product's details into my API's PostgreSQL database using Postman, I encountered an issue where the values of the specs key were displayed as [object Object] instead of showing the complete data. As a result, even in ...

What is the reason for IE displaying null when the model does not exist?

Why does IE 11 render 'null' if my model does not exist? For instance: <tr> <td [innerHTML]="model?.prop1 | my-pipe"></td> </tr> Imagine this scenario: When the page loads, a request is sent to the server and the res ...

I'm curious about the Next.js type that corresponds to the Redirect object

It's possible to set up redirection in Next.js by configuring it like this: module.exports = { async redirects() { return [ { source: '/about', destination: '/', permanent: true, }, ] ...

Tips for removing a row from a DataGrid column with the click of a button

I am facing a challenge with my data table that contains users. I am trying to implement a delete button for each row, but it seems like the traditional React approach may not work in this situation. Currently, I am utilizing the DataGrid component in the ...

The npm local server is serving up the incorrect project

As someone who is new to JavaScript development, I am seeking guidance on running a next.js project on my local machine. Within my /projects folder, there are multiple projects... /projects/project1 (SvelteKit) /projects/project2 (Next.js) Upon navigat ...

Unable to invoke a function in TypeScript from a Kendo template within the Kendo TreeList component

In my TypeScript file for class A, I am encountering an issue with the Kendo TreeList code. I am trying to call a function from the Kendo template. export class A{ drillDownDataSource: any; constructor() { this.GetStatutoryIncomeGrid ...

Having trouble displaying real-time camera RTSP streaming using Angular

I am currently in the process of developing a web application using Angular and I need to incorporate a window that displays live RTSP streaming. Upon conducting research, I discovered that this can be achieved by utilizing the JSMpeg JavaScript library. ...

Modify animation trigger when mouse hovers over

I am looking to create a feature where a slide overlay appears from the bottom of a thumbnail when the user hovers over it, and retracts when the user is not hovering. animations: [ trigger('overlaySlide', [ state(&ap ...

Pausing in a NodeJS HTTP request listener until receiving another response before proceeding

Essentially, this is a web proxy. Within a request listener, I am creating another http request, reading its response, and passing it to the main response. But I have the challenge of needing to wait for the secondary request to complete before continuing. ...

Looking to retrieve HTML elements based on their inner text with queryselectors?

I am looking to extract all the HTML divs that contain specific HTML elements with innerText = ' * ' and save them in an array using Typescript. If I come across a span element with the innerText= ' * ', I want to add the parent div to ...

Methods to close the currently active ngx-modal when a new modal is triggered within the same Angular 8 component

I am currently working on developing a versatile modal component that has the ability to be called from within the same modal itself. Is there any way to configure the component and modal in such a manner that when the reusable component is triggered, it ...

Encountered an ERROR when attempting to deploy a next.js app to Azure Static Webapp using GitHub actions for

I am encountering an issue that is causing some frustration. The problem only arises during my github actions build. Interestingly, when I run the build locally, everything works perfectly and I can access the route handler without any issues. However, eve ...

What is the best way to programmatically route or navigate to a specific route within a Next.js class component?

tag: In the process of creating my app with next.js, I primarily use functional components. The sole exception is a class component that I utilize to manage forms. Upon form submission, my goal is to redirect back to the home page. However, when I attemp ...

Can the GitHub URL be utilized for installing TypeScript npm dependencies?

When working with an npm library written in TypeScript, the usual process involves writing the source code in TypeScript, pushing it to GitHub, then converting it to JavaScript and pushing the resulting JavaScript code to the npm repository. When adding ...

I am facing the dilemma of having an identical button appearing in two separate locations. How can I determine which button has been clicked?

I am currently using ng2-smart-table and have implemented a custom filter with the same button in both filters. However, I am unsure of how to determine which button is being clicked. https://i.stack.imgur.com/b1Uca.png Below is the component code for th ...

What methods are available to expedite webpack compilation (or decouple it from server restart)?

My current setup includes the following configurations: import path from 'path' import type {Configuration} from 'webpack' const config: Configuration = { mode: 'development', entry: path.join(__dirname, '../..&apos ...

Guide to redirecting data from an external POST request to a customer through a GET request

Within my Express application, I am currently dealing with both incoming POST requests containing a payload from an external source and GET requests sent by my client: router.post('/liveReleaseStore', (req, res) => { let data = req.body.m ...

Unable to access the backend function as it returned a 404 error

I am currently running an Express application with Node in the backend. Within a component in NodeJS, I have defined two functions that I am attempting to access from my service. The link for both functions is the same in the service, but there seems to be ...

Exploring the intricacies of defining Vue component props in TypeScript using Vue.extend()

Here is a simple example to illustrate my question When I directly define my props inside the component, everything works fine <script lang="ts"> import Vue, { PropType } from "vue"; export default Vue.extend({ props: { col ...