This API Endpoint code works fine in Express but gvies error when implemented in next js

Issue

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 using the same code in nextjs it gives error:

 ⨯ 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
    ...

I tried it in react also it is giving the same error

I am using the Gsm aren api from here : https://github.com/nordmarin/gsmarena-api

Solution

The error Cannot read properties of undefined (reading 'catalog') means that the value of gsmarena is undefined on line 4 of your next.js code.

Looking at the documentation for the gsmarena-api package, it looks like that package doesn't have a named export and you probably want the default export instead.

// Instead of import { gsmarena } from 'gsmarena-api';
import gsmarena from 'gsmarena-api';

Answered By - Jordan Burnett