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 errors:

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

Further I went to the PaginationPayload definition 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?

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;

• Jayce444: Can you please add the code that's throwing the errors?

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 };

• Pandiri Veeresh Kumar: thanks I also follwed similar step ``` const {page = 0, perPage = 10} = params.pagination || {}; ```