The type 'never' does not have a property named 'map'

Whenever I try to make an axios get request within a next.js getServerSideProps function, I encounter a persistent TypeScript error underline on the map method. Despite troubleshooting extensively, I have not been able to resolve it. The request successfully retrieves data, but I am keen on eliminating the error. Any ideas on how to tackle this issue?

 export const getServerSideProps: GetServerSideProps = async () => {

  const { data } = await api.get("/users/index", { //axios api
    params: {
      _limit: 12
      _sort: "created_at", 
      _order: "desc"
    }
  })

  
  const users = data.map(user => { // <-error line under map method
    return {
      id: user.id,
      name: user.name,
      created_at: user.created_at,
  
    }
  });

Answer №1

It appears that in version 0.22 or 0.23 of axios, there was a change to the Typescript signature that now requires casting the data object. Refer to the changelog for more details. One way to fix this is by passing a generic:

type User = {
   id: string
   name: string
   created_at: string
}

const { data } = await api.get<User[]>("/users/index", { //axios api
    params: {
      _limit: 12,
      _sort: "created_at",
      _order: "desc"
    }
})

Alternatively, you can typecast directly:

const users = (data as User[]).map(user => { // <-error line under map method
    return {
      id: user.id,
      name: user.name,
      created_at: user.created_at
    }
  });

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

The MDX blog was set up to showcase markdown content by simply displaying it without rendering, thanks to the utilization of the MDXProvider from @mdx-js/react within Next JS

I'm currently in the process of setting up a blog using MDX and Next.js, but I've encountered an issue with rendering Markdown content. The blog post seems to only display the markdown content as plain text instead of rendering it properly. If y ...

How to configure mat-sort-header in Angular Material for mat-table

My current table is created using Angular Material: <mat-table *ngIf="!waiting" class="table-general table-summary" #table [dataSource]="dataSource" matSort> <mat-header-row class="header_row" *matHeaderRowDef="headerKeys"></mat-header ...

I'm encountering hydration exceptions in Next.js when I try to set a property in a component

"use client"; const CustomComponent = ({ className }) => { const [open, setOpen] = useState(false); const [showNewOrganizationDialog, setShowNewOrganizationDialog] = useState(false); return ( <Modal open={showNewOrgani ...

Creating an external link in Angular with query parameters

I have created an app where users have their addresses listed, and I want to implement a feature that allows me to open Google Maps when clicking on the address. However, I am currently facing an issue where instead of getting the actual value of {{ this. ...

Experiencing a problem with NextAuth on Vercel, I'm encountering a server error that needs to be resolved

I utilized Google as an authentication provider with NextAuth. I set up all necessary environment variables for both production and development environments. While it functions flawlessly in development mode on my local machine, I encounter the error "Serv ...

Guide on deploying a NextJs frontend with Golang (Go) and gorilla/mux

After following a guide to serve a NextJs front-end single-page application using Golang and the native net/http package, I decided to switch to using gorilla/mux. Here is my updated main function: func main() { // Root at the `dist` folder generated ...

Mastering the Art of Injecting Objects from the Server

Utilizing Angular Universal, I am serving my Angular application through an Express server. The objective is to embed an environment object (from the server) into my application. To achieve this, I have created an InjectionToken export const ENVIRONMENT ...

Exploring the TypeScript handbook: Utilizing rootDirs for Virtual Directories

Exploring the concept of Virtual Directories with rootDirs in the handbook, we find an interesting example demonstrating how modules can be imported from different source folders by combining multiple rootDirs. // File Structure src └── views ...

Is there a way to extract various pieces of data from a single object and implement them in a NextJs 13 application directory?

My Django RESTapi is providing output data in the following format: { "count": 1000, "next": "http://127.0.0.1:8000/store/products/?page=2", "previous": null, "results": [ { "id": 648, ...

What causes parameters to be undefined when making a DELETE request in my Next.js application running on version 14.1.4?

I am encountering an issue with my DELETE mapping export async function DELETE({params} : {params: {id: string}}) { try { const loanToDelete = await prisma.loan.findUnique({ where: { id: parseInt(params.id) } }) if (!loanToDelete ...

Poorly packaged library - Custom Angular library - Node Package Manager

Recently, I've been delving into the process of publishing a simple Angular library on NPM. Despite following various tutorials (like those found here, here, and here), I faced difficulties when attempting to use it in a test project. MY JOURNEY In s ...

Utilizing JavaScript libraries in a TypeScript project: A step-by-step guide

Currently, I am working on an existing TypeScript AngularJS project and looking to incorporate d3js. However, due to restrictions with the corporate proxy, I am unable to use tools for downloading or managing dependencies. As a result, I have opted for man ...

Bypassing disputes in a TypeScript function

I attempted to implement the solution provided by Pacerier in response to the question about skipping arguments in a JavaScript function. However, it doesn't seem to be working for me. The function I am dealing with has numerous arguments. this.servi ...

Check if the input values are already in the array and if not, then add

Within my React application, I am displaying an Array and each entry in the Array is accompanied by an input element. These input elements are assigned a name based on the entry's ID, allowing users to enter values. To handle the changes in these inp ...

What is the correct way to specify the data type for the useState hook when I intend to store an array of objects?

My dilemma involves storing an array of objects using the useState hook, but I am struggling with the syntax required to describe the expected type. The type that I want to store is Array<Updates>. Below is the code I have: const [messages, setMessa ...

Error: Unable to locate module: '../components'

I decided to organize my project by creating a components folder in the root directory of the project. Here's how the structure looks now: project |______components | |___________Sidebar.jsx |______pages |___________index.jsx In ...

What is the reason for the typescript check failing?

When attempting to check for the existence of an attribute using if statement, I encountered an error. Can anyone explain why this happened? I would appreciate any insights on this issue. ...

How can I ensure my function waits for a promise to be resolved using Async / Await?

I'm running into an issue where I want my function to keep executing until the nextPageToken is null. The problem occurs when the function runs for the first time, it waits for the promise to resolve. However, if there is a nextPageToken present in th ...

Unable to transfer object from Angular service to controller

I am currently utilizing a service to make a $http.get request for my object and then transfer it to my controller. Although the custom service (getService) successfully retrieves the data object and saves it in the responseObj.Announcement variable when ...

Experience the dynamic bouncing marker feature in Next.js React-Leaflet with the powerful tool Leaflet.SmoothMarkerB

I'm a beginner in front-end development and I'm attempting to create a bouncing marker in React-leaflet using the leaflet.smooth_marker_bouncing plugin version 1.3.0 available at this link. Unfortunately, I couldn't find enough documentation ...