Unable to resolve issue " Type '{ children: undefined; horizontal: true; }' is not assignable to type 'IntrinsicAttributes & { children: ReactNode; sizes?: number[] | undefined; vertical?: boolean | undefined; onChange?: ((sizes: number[]) => void) | undefined; } & CommonProps'. Property 'horizontal' does not exist on type 'IntrinsicAttributes & { children: ReactNode; sizes?: number[] | undefined; vertical?: boolean | undefined; onChange?: ((sizes: number[]) => void) | undefined; } & CommonProps'."

[Aishwaryakakade]

I have just started coding in react and I am unable to resolve this issue while using Allotment package .

I am trying to use , but stuck as I am not able to resolve this issue :
Type '{ children: undefined; horizontal: true; }' is not assignable to type 'IntrinsicAttributes & { children: ReactNode; sizes?: number[] | undefined; vertical?: boolean | undefined; onChange?: ((sizes: number[]) => void) | undefined; } & CommonProps'.
Property 'horizontal' does not exist on type 'IntrinsicAttributes & { children: ReactNode; sizes?: number[] | undefined; vertical?: boolean | undefined; onChange?: ((sizes: number[]) => void) | undefined; } & CommonProps'.

This is how my App.tsx looks

import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import { Allotment } from "allotment";
import * as React from "react";
import "allotment/dist/style.css";

export default function App() {
  type Panel = {
    label: string;
    id: string;
  };

 return (
    <React.Fragment>
      <Container>
        <Box sx={{ bgcolor: "#cfe8fc", height: "80vh" }}>
          <Allotment horizontal>
            <Allotment.Pane maxSize={200} minSize={200}></Allotment.Pane>
          </Allotment>
        </Box>
      </Container>
    </React.Fragment>
  );
}

How do I resolve this? Kindly help

[johnwalley]

Could you try removing the horizontal prop from the Allotment component? It should default to a horizontal layout (and pass vertical={true} for a vertical layout.