useAccordion thowing errror `type.getCollectionNode is not a function

[ffakira]

Hey, I've been looking into the source code for useAccordion and useAccordionItem, and was curious if there been any changes to the Node<T> or useTreeState changes that I am not aware of?

I have an error that is being thrown here, type.getCollectionNode is not a function:

TypeError: type.getCollectionNode is not a function
    at $eb2240fc39a57fa5$export$bf788dd355e3a401.getFullNode (chunk-GZUY3QM2.js?v=eb4d3974:75:29)
    at getFullNode.next (<anonymous>)
    at $eb2240fc39a57fa5$export$bf788dd355e3a401.iterateCollection (chunk-GZUY3QM2.js?v=eb4d3974:33:18)
    at iterateCollection.next (<anonymous>)
    at [Symbol.iterator] (chunk-GZUY3QM2.js?v=eb4d3974:147:16)
    at Generator.next (<anonymous>)
    at new $05ca4cd7c4a5a999$export$863faf230ee2118a (@react-stately_tree.js?v=eb4d3974:57:14)
    at @react-stately_tree.js?v=eb4d3974:473:110
    at chunk-GZUY3QM2.js?v=eb4d3974:174:12
    at mountMemo (chunk-M324AGAM.js?v=eb4d3974:12192:27)

Here is a the implementation of the Accordion and AccordionItem

import {
  type AriaAccordionProps,
  useAccordion,
  useAccordionItem,
} from "@react-aria/accordion";
import { mergeProps, useFocusRing, useHover } from "react-aria";
import { type TreeState, useTreeState } from "@react-stately/tree";
import { type Node } from "@react-types/shared";
import { useRef } from "react";

export function Accordion<T extends Record<string, unknown>>(
  props: AriaAccordionProps<T>
) {
  const state = useTreeState<T>(props);
  const ref = useRef(null);
  const { accordionProps } = useAccordion(props, state, ref);

  return (
    <div {...accordionProps}>
      {[...state.collection].map((item) => {
        return <AccordionItem<T> key={item.key} item={item} state={state} />;
      })}
    </div>
  );
}

interface AccordionItemProps<T> {
  item: Node<T>;
  state: TreeState<T>;
}

export function AccordionItem<T>(props: AccordionItemProps<T>) {
  const ref = useRef<HTMLButtonElement>(null);
  const { state, item } = props;
  const { buttonProps, regionProps } = useAccordionItem<T>(props, state, ref);

  const isOpen = state.expandedKeys.has(item.key);
  const isDisabled = state.disabledKeys.has(item.key);

  const { hoverProps } = useHover({ isDisabled });
  const { focusProps } = useFocusRing({ within: true });

  return (
    <div data-open={isOpen} data-disabled={isDisabled}>
      <button ref={ref} {...mergeProps(hoverProps, buttonProps, focusProps)}>
        {item.props.title}
      </button>
      <div {...regionProps} hidden={!isOpen}>
        {item.props.children}
      </div>
    </div>
  );
}

And the usage:

export default function App() {
  return (
    <ErrorBoundary>
      <Accordion>
        <AccordionItem key={1} title="title1">
          <p>Test</p>
        </AccordionItem>
        <AccordionItem key={2} title="title2">
          <p>Test</p>
        </AccordionItem>
      </Accordion>
    </ErrorBoundary>
  );
}

Additional information:
OS: Ubuntu 22.10
Node: v21.2.0

Depedencies:

{
  "dependencies": {
    "@react-aria/accordion": "^3.0.0-alpha.29",
    "@react-stately/tree": "^3.8.1",
    "@react-types/shared": "^3.23.1",
    "react": "^18.3.1",
    "react-aria": "^3.33.1",
    "react-dom": "^18.3.1"
  }
}

[snowystinger]

Accordion Item would need to implement the same interface as Item (which is a bit hidden as we didn't really support wrapping or creating your own Items for our older Collection implementation) but is here

react-spectrum/packages/@react-stately/collections/src/Item.ts

Line 21 in 14f324f

Item.getCollectionNode = function* getCollectionNode<T>(props: ItemProps<T>, context: any): Generator<PartialNode<T>> {

Creating this is discouraged, though; it's old and is an implementation detail for us.

However, all of that is somewhat irrelevant as Accordion is still in Alpha and is not a priority for us as summary and details provide good native support for accordions, including working with the browser 'search/find' capabilities.

Here are some relevant other discussions
#1989
#3882