TS2345: Argument of type '{ id: string; }' is not assignable to parameter of type 'Arguments'.

[1Gokul]

I was following the documentation here to create a list of horizontally arranged draggable pages. The error below is shown when using the useSortable() hook like the documentation instructs, passing the page's id.

TS2345: Argument of type '{ id: string; }' is not assignable to parameter of type 'Arguments'.
  Object literal may only specify known properties, and 'id' does not exist in type 'Arguments'.
    15 |     transform,
    16 |     transition,
  > 17 |   } = useSortable({ id: pageData._id });
       |                     ^^^^^^^^^^^^

The code is as follows:

Page list component

const RenderModule = ({
    moduleData,
  }: {
    moduleData: ModuleDetail;
  }) => {
    const [pages, setPages] = useState<ModulePage[]>(
      moduleData.pages,
    );
    const sensors = useSensors(useSensor(PointerSensor));
    return (
      <DndContext
        sensors={sensors}
        collisionDetection={closestCenter}
      >
        <SortableContext
          items={pages.map(page => page._id)} // _id is a string
          strategy={horizontalListSortingStrategy}
        >
          {pages.map((page: ModulePage) => (
            <PageView key={page._id} pageData={page} />
          ))}
        </SortableContext>
      </DndContext>
    );
  };

Page component

const PageView = ({ pageData }: { pageData: ModulePage }) => {
    const {
      attributes,
      listeners,
      setNodeRef,
      transform,
      transition,
    } = useSortable({ id: pageData._id }); 
    return (
      <div
        ref={setNodeRef}
        {...attributes}
        {...listeners}
        
        //... rest of component

Not sure what's going wrong here, so any help would be appreciated!

[sebastianservat]

I'm assuming if you console log pageData._id you get the string id you're expecting right? If you upload your code to CodeSandbox, it's easier to take a look and debug.

[1Gokul]

Hey @sebastianservat, I came back to this issue after a while and tried to reproduce this but did not see the same error. Cross-checking with my project, everything was the same except the jsx property in the tsconfig, and changing it from react to react-jsx made the error go away.

I really don't know how that made a difference, but it did. Thanks anyway!

Codesandbox reproduction attempt link