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

Using TypeScript with React: Updating input value by accessing event.target.nodeValue

As a newcomer to TypeScript, I am in search of an elegant solution for the following dilemma. I have a state variable named emailAddress, which is assigned a value from an input field. Additionally, I need the input field to display and update its value ba ...

Error: req.flash() needs active user sessions to work

Being new to node, I have recently set up the middleware and express for flash messaging. However, despite my efforts, I am still encountering the following error: Error: req.flash() requires sessions My Setup //express.js var flash = require(&apos ...

What is the reason behind typescript not needing `undefined` with the ?: operator on arrays?

type Artifact = { a:string } const items : Artifact[] = []; // this will result in a syntax error let z?: Artifact; // assigning undefined to a variable of type Artifact is an error const b : Artifact = undefined; // despite expectations, this assi ...

Troubleshooting: NextJS Typescript getInitialProps returning null value

I am currently working with NextJS 'latest' and TypeScript to extract the token from the URL, but I am encountering an issue where it returns undefined. To achieve this, I am utilizing the getInitialProps method. The URL in question looks like th ...

Creating crawlable links in a React JS single-page application: A step-by-step guide

I'm currently working on a website using Next.js and React.js. The site I'm building is . However, when running the Lighthouse report, it shows an error stating that "links are not crawlable." This is due to the fact that it's a Single Page ...

minimize the size of the indigenous foundation input field

Currently incorporating this code snippet into my application: <Item fixedLabel> <Input style={{ width: 0.5 }}/> </Item> The fixedLabel element is extending the entire width of the screen. I have attempted adju ...

Retrieve the value of a property with a generic type

Within our angular6 project, we encountered an issue while using the "noImplicitAny": true setting. We realized that this caused problems when retrieving values from generic types. Currently, we retrieve the value by using current['orderBy'], bu ...

To successfully import files in Sveltekit from locations outside of /src/lib, make sure to include the .ts extension in the import statement

Currently, I am working on writing tests with Playwright within the /tests directory. I want to include some helper functions that can be placed in the /tests/lib/helpers folder. When the import does not specifically have a .ts extension, tests throw a mo ...

Update your mappings for the city of Istanbul when utilizing both TypeScript and Babel

Currently, I am facing the challenge of generating code coverage for my TypeScript project using remap Istanbul. The issue arises due to the usage of async/await in my code, which TypeScript cannot transpile into ES5 directly. To circumvent this limitation ...

Utilizing Google OAuth2 API within an Angular2 Typescript Application

Looking to incorporate the Google oauth2 API and Calender API into my Angular2 application. Struggling to find a working sample to guide me through the integration process. Has anyone come across a functioning example? Thanks, Hacki ...

Display a customized modal showcasing the data of a particular user

Seeking advice on how to pass data to a modal based on a specific user. I have an array with user information and would like to display their name and email in a modal when the user is clicked on. Any suggestions on how to accomplish this? ...

Top tips for handling HTML data in JSON format

I'm looking to fetch HTML content via JSON and I'm wondering if my current method is the most efficient... Here's a sample of what I'm doing: jsonRequest = [ { "id": "123", "template": '<div class=\"container\"&g ...

Tips for showing nested JSON data in a PrimeNG table within Angular version 7

I am struggling to display nested json data in a PrimeNG table. When I retrieve the data using an HTTP service, it appears as [object][object] when displayed directly in the table. What I want is to show the nested json data with keys and values separated ...

Getting an error that reads, "Unable to read properties of null (reading 'uid')," but surprisingly, the application continues to function properly

After logging out, I encounter the following error: (Uncaught TypeError: Cannot read properties of null (reading 'uid')). However, my application functions as intended. During the logout process, I delete an API access token from the user docume ...

Unable to access the POST value in the current context

I am having trouble retrieving the values from a simple form that consists of two files: APP.js and FORM.ejs. I am attempting to get the values submitted through the form. APP.js: const http = require('http'); const express = require("express"); ...

How to access a restricted page code chunk directly in NextJS

Is it considered safe for the NextJs server to return chunks through a direct link even when the user is not logged in? For instance, after deploying the application with iron session like this, I logged in and obtained a direct link to the chunk containi ...

The parameters in VueJS are malfunctioning on this webpage

I created my vue in an external file and included it at the bottom of my webpage, but I am encountering issues with its functionality. One specific problem arises when using v-model, resulting in a template error displayed on the page: Error compiling t ...

What is the necessity of an explicit return in ExpressJS?

Here is a snippet of code from one of my functions: tierRouter.get( '/:id', passport.authenticate('basic', { session: false }), function (req, res) { Tier.findById(req.params.id, function (err, tier) { if (err) { res.js ...

Tips for utilizing the express-uploadfiles package

I am encountering an issue when trying to print the name of a file to the console. When I provide the server path along with the file, I receive the following error message: TypeError: Cannot read properties of undefined (reading 'file') This i ...

Updating Angular 8 Component and invoking ngOninit

Within my main component, I have 2 nested components. Each of these components contain forms with input fields and span elements. Users can edit the form by clicking on an edit button, or cancel the editing process using a cancel button. However, I need to ...