T
TanStack•4w ago
fascinating-indigo

Error with useForm : Type instantiation is excessively deep and possibly infinite

Hy everyone, i have a error with useForm when i want to make a form and definite in a context the error throw : Type instantiation is excessively deep and possibly infinite. Do you say how to resolve the error and where she come ? Code : Form Context 
import React, { PropsWithChildren } from 'react';
import { createFormHook, createFormHookContexts, FormApi } from '@tanstack/react-form';
export const { fieldContext, formContext, useFieldContext } = createFormHookContexts();
export type AppFormType<TValues> = FormApi<
  TValues,
  any,
  any,
  any,
  any,
  any,
  any,
  any,
  any,
  any,
  any
>;

export const { useAppForm } = createFormHook({
  fieldContext,
  formContext,
  fieldComponents: {},
  formComponents: {},
});

type FormProviderProps<T> = PropsWithChildren<{
  defaultValues: T;
}>;

export function GlobalFormProvider<T>({ defaultValues, children }: FormProviderProps<T>) {
  const form = useAppForm({ defaultValues });

  return <formContext.Provider value={form}>{children}</formContext.Provider>;
}
import React, { PropsWithChildren } from 'react';
import { createFormHook, createFormHookContexts, FormApi } from '@tanstack/react-form';
export const { fieldContext, formContext, useFieldContext } = createFormHookContexts();
export type AppFormType<TValues> = FormApi<
  TValues,
  any,
  any,
  any,
  any,
  any,
  any,
  any,
  any,
  any,
  any
>;

export const { useAppForm } = createFormHook({
  fieldContext,
  formContext,
  fieldComponents: {},
  formComponents: {},
});

type FormProviderProps<T> = PropsWithChildren<{
  defaultValues: T;
}>;

export function GlobalFormProvider<T>({ defaultValues, children }: FormProviderProps<T>) {
  const form = useAppForm({ defaultValues });

  return <formContext.Provider value={form}>{children}</formContext.Provider>;
}
8 Replies
fascinating-indigo
fascinating-indigoOP•4w ago
*My context: * 
type ControllingType = {
  sortedForm: AppFormType<ControllingFilters>;
};

const ControllingContext = createContext<ControllingType | undefined>(undefined);

export const useControlling = () => {
  const context = useContext(ControllingContext);

  if (context === undefined) {
    throw new Error('useControlling must be used within a ControllingContextProvider');
  }

  return context;
};

export function ControllingProvider({ children }: { children: React.ReactNode }) {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [isError, setIsError] = useState<boolean>(false);

  const defaultValues: ControllingFilters = {
    project: null,
    profile: null,
    opportunity: null,
    todosOpportunity: null,
    profileProject: null,
    devis: null,
    beginMoment: null,
    endMoment: null,
  };
  const sortedForm = useAppForm({
    defaultValues,
  });

  const contextValue = useMemo(() => {
    return {
      sortedForm,
    };
  }, [isLoading, isError]);

  return <ControllingContext.Provider value={contextValue}>{children}</ControllingContext.Provider>;
}
type ControllingType = {
  sortedForm: AppFormType<ControllingFilters>;
};

const ControllingContext = createContext<ControllingType | undefined>(undefined);

export const useControlling = () => {
  const context = useContext(ControllingContext);

  if (context === undefined) {
    throw new Error('useControlling must be used within a ControllingContextProvider');
  }

  return context;
};

export function ControllingProvider({ children }: { children: React.ReactNode }) {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [isError, setIsError] = useState<boolean>(false);

  const defaultValues: ControllingFilters = {
    project: null,
    profile: null,
    opportunity: null,
    todosOpportunity: null,
    profileProject: null,
    devis: null,
    beginMoment: null,
    endMoment: null,
  };
  const sortedForm = useAppForm({
    defaultValues,
  });

  const contextValue = useMemo(() => {
    return {
      sortedForm,
    };
  }, [isLoading, isError]);

  return <ControllingContext.Provider value={contextValue}>{children}</ControllingContext.Provider>;
}
extended-salmon
extended-salmon•4w ago
1. We don't recommend shimming our types, as they are not considered breaking changes. See the Philosophy section and TypeScript section for more info. 2. Which part errors with the excessively deep type?
fascinating-indigo
fascinating-indigoOP•4w ago
ok but i not found natif generic types and i think this part 
const sortedForm = useAppForm({ defaultValues });
const sortedForm = useAppForm({ defaultValues });
my error appears on : 
  return <ControllingContext.Provider value={contextValue}>{children}</ControllingContext.Provider>;
  return <ControllingContext.Provider value={contextValue}>{children}</ControllingContext.Provider>;
but my error disappears if I update this type to any in ControllingType 
type ControllingType = {
  sortedForm: AppFormType<ControllingFilters>;
};
type ControllingType = {
  sortedForm: AppFormType<ControllingFilters>;
};
extended-salmon
extended-salmon•4w ago
What's the structure of the whole form? How "global" is this form state?
fascinating-indigo
fascinating-indigoOP•4w ago
I tried to make a global useForm for create easy a form with useForm and centralized all form, so in my ControllingContext i create a instance of GlobalForm
extended-salmon
extended-salmon•4w ago
The main issue with this is * You take away the typing written by us. The shim you provided is wrong, for example, and will break for any <form.Field />, <form.AppField />, <form.Subscribe />, withForm components and withFieldGroup components. * You break your code when upgrading TanStack Form. This section is very important to us in the previously linked docs:
No description
extended-salmon
extended-salmon•4w ago
I don't know how your page will be structured, so it's difficult to help out with a recommended way. The context provider you're making seems to always be made with useAppForm and defaultValues: ControllingFilters. Therefore, this might work: 
const defaultValues: ControllingFilters = {
    project: null,
    profile: null,
    opportunity: null,
    todosOpportunity: null,
    profileProject: null,
    devis: null,
    beginMoment: null,
    endMoment: null,
  };
function useControlling() {
  return useAppForm({ defaultValues })
}

export type ControllingForm = ReturnType<typeof useControlling>
const defaultValues: ControllingFilters = {
    project: null,
    profile: null,
    opportunity: null,
    todosOpportunity: null,
    profileProject: null,
    devis: null,
    beginMoment: null,
    endMoment: null,
  };
function useControlling() {
  return useAppForm({ defaultValues })
}

export type ControllingForm = ReturnType<typeof useControlling>
fascinating-indigo
fascinating-indigoOP•4w ago
okey i have make like this : *ControllingForm 😗 
import { useAppForm } from '@/context/FormContext';
import { ControllingFilters } from '@/sections/controlling/types';

const defaultValues: ControllingFilters = {
  project: null,
  profile: null,
  opportunity: null,
  todosOpportunity: null,
  profileProject: null,
  devis: null,
  beginMoment: null,
  endMoment: null,
};

export function useControllingForm() {
  return useAppForm({ defaultValues });
}

export type ControllingForm = ReturnType<typeof useControllingForm>;
import { useAppForm } from '@/context/FormContext';
import { ControllingFilters } from '@/sections/controlling/types';

const defaultValues: ControllingFilters = {
  project: null,
  profile: null,
  opportunity: null,
  todosOpportunity: null,
  profileProject: null,
  devis: null,
  beginMoment: null,
  endMoment: null,
};

export function useControllingForm() {
  return useAppForm({ defaultValues });
}

export type ControllingForm = ReturnType<typeof useControllingForm>;
type ControllingType = {
  sortedForm: ControllingForm;
};

const ControllingContext = createContext<ControllingType | undefined>(undefined);

export const useControlling = () => {
  const context = useContext(ControllingContext);

  if (context === undefined) {
    throw new Error('useControlling must be used within a ControllingContextProvider');
  }

  return context;
};

export function ControllingProvider({ children }: { children: React.ReactNode }) {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [isError, setIsError] = useState<boolean>(false);

  const sortedForm = useControllingForm();

  const contextValue = useMemo(() => {
    return {
      isLoading,
      isError,
      sortedForm,
    };
  }, [isLoading, isError]);

  return <ControllingContext.Provider value={contextValue}>{children}</ControllingContext.Provider>;
}
type ControllingType = {
  sortedForm: ControllingForm;
};

const ControllingContext = createContext<ControllingType | undefined>(undefined);

export const useControlling = () => {
  const context = useContext(ControllingContext);

  if (context === undefined) {
    throw new Error('useControlling must be used within a ControllingContextProvider');
  }

  return context;
};

export function ControllingProvider({ children }: { children: React.ReactNode }) {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [isError, setIsError] = useState<boolean>(false);

  const sortedForm = useControllingForm();

  const contextValue = useMemo(() => {
    return {
      isLoading,
      isError,
      sortedForm,
    };
  }, [isLoading, isError]);

  return <ControllingContext.Provider value={contextValue}>{children}</ControllingContext.Provider>;
}
This resolve my error, ty for ur help

Did you find this page helpful?