Module '"react-hook-form"' has no exported member 'FieldPath'.ts(2305)

Question

I am writing a data provider for a react admin. While writing the function for the getList function in the data provider. I am getting these error:\

Property 'page' does not exist on type 'PaginationPayload | undefined'.ts(2339)
Property 'perPage' does not exist on type 'PaginationPayload | undefined'.ts(2339)

Furthur I went to the PaginationPayload defination in types.ts it was also alright as below:

export interface PaginationPayload {
    page: number;
    perPage: number;
}

There in the types.ts file i saw an import error like this:\

Module '"react-hook-form"' has no exported member 'FieldPath'.ts(2305)

What should I do?Please help me out.

import { stringify } from "query-string";
import { DataProvider, fetchUtils} from "react-admin";

const httpsClient = fetchUtils.fetchJson;
const url = process.env.API_URL;

const dataProvider : DataProvider = {
  getList: async (resource, params) => {
    const {page, perPage} = params.pagination;
    const {field, order} = params.sort;

    const response = await httpsClient(`${url}/${resource}?offset=${page}&limit=${perPage}&sort_by=${field}&order_by=${order}`);

    return {
      data: response.json,
      total: parseInt(response.headers.get("x-total-count") || '', 10), //replace with the header field which represents the total count in our api
    };
  },

  getOne: async (resource , params) => {
    const response = await httpsClient(`${url}/${resource}/${params.id}`);
    return { data: response.json };
  },

  getMany: async (resource, params) => {
    const query = {
      filter: JSON.stringify({ids: params.id}),
    };
    const response = await httpsClient(`${url}/${resource}?${stringify(query)}`);

    return{
      data: response.json,
    };
  },

  getManyReference: async (resource, params) => {
    const {page, perPage} = params.pagination;
    const {field, order} = params.sort;
    const query = {
      sort : JSON.stringify([field, order]),
      range : JSON.stringify([page, page + perPage]),
      filter : JSON.stringify({
        ...params.filter,
        [params.target] : params.id,
      }),
    };

    const response = await httpsClient(`${url}/${resource}?${stringify(query)}`);
    return {
      data: response.json,
      total: parseInt(response.headers.get('x-total-count') || '', 10),
    };
  },

  create: async(resource, params)=>{
    const response = await httpsClient(`${url}/${resource}`, {
      method:'POST',
      body: JSON.stringify(params.data),
    });
    
    return {data: response.json};
  },  

  update: async(resource, params) =>{
    const response = await httpsClient(`${url}/${resource}/${params.id}`, {
      method:'PUT',
      body: JSON.stringify(params.data),
    });

    return {data: response.json};
  },

  updateMany: async(resource, params) => {
    const query = {
      filter: JSON.stringify({ids: params.ids}),
    };

    const response = await httpsClient(`${url}/${resource}/${query}`,{
      method: 'PUT',
      body: JSON.stringify(params.data),
    });

    return {data: response.json};
  },

  delete: async(resource, params) =>{
    const response = await httpsClient(`${url}/${resource}/${params.id}`, {
      method:'DELETE'
    });

    return { data:response.json };
  },

  deleteMany: async(resource, params) => {
    const query = {
      filter: JSON.stringify({ids: params.ids}),
    };

    const response = await httpsClient(`${url}/${resource}/${query}`, {
      method: 'DELETE'
    });

    return{
      data: response.json,
    };

  },

};

export default dataProvider;

Answer 1

I believe the error Module '"react-hook-form"' has no exported member 'FieldPath is unrelated, and originates from you opening a react-admin source file without having installed the required dependencies first.

If I had to take a wild guess, I'd say your original error Property 'page' does not exist on type 'PaginationPayload | undefined' comes from the fact that you are destructuring params.pagination without verifying if it is defined first.

You should probably do something like that instead:

const { page, perPage } = params.pagination || { page: 1, perPage: 10 };