Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & ReactNode'

Question

Got this error here:

Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & ReactNode'.

export const withAppProvider = (Component: AppComponent) => {
  return function WrapperComponent(props: any) {
    return (
      <AppProvider> // <-- here
        <Component {...props} />
      </AppProvider>
    );
  };
};

Maybe something wrong with AppProvider declaration?

export const AppProvider = (children: ReactNode) => {
  const { width, height } = useWindowSize();
  const isClient = useClient();
  const isMobile = isClient ? width < 1200 : false;

  return (
    <AppContext.Provider
      value={{
        isClient,
        isMobile,
      }}
    >
      {children}
    </AppContext.Provider>
  );
};

---

got this with export const AppProvider = (children: React.ReactNode) => {

Type error: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & ReactNode'.
  Type '{ children: Element; }' is missing the following properties from type 'ReactPortal': key, type, props

Answer 1

If it is defined as children prop the problem goes away.

interface IProps {
  children: React.ReactNode;
}
export const AppProvider = ({children}: IProps ) => {}