TTC
Theo's Typesafe Cult•3y ago
Mordi

odd runtime error but just for mobile

The problem ONLY occurs when a mobile devices (touch devices) clicks on the filter select element and selects the default value while it already is set to the default value. In our case the default value is recent. Just to reiterate on the just "mobile" part of the title. If I'm using just the responsive mobile view in the dev tools everything works. If I select a device, say nexus 6p, and then try to select recent with it already being set to recent I receive the following error(or see screenshot): Unhandled Runtime Error TypeError: Converting circular structure to JSON I have the following: A trpc (v9) endpoint to an infinite react query, v3 if that matters 
const {
    data, ...<isLoading, etc>
  } = trpc.useInfiniteQuery(
    [
      "lineup.infiniteLineups",
      {
        limit: 20,
        filter: filter,
      },
    ],
    {
      getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
    }
  );
const {
    data, ...<isLoading, etc>
  } = trpc.useInfiniteQuery(
    [
      "lineup.infiniteLineups",
      {
        limit: 20,
        filter: filter,
      },
    ],
    {
      getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
    }
  );
I don't think this is the culprit The filter is tied to a Radix Select like this: 
const filterOptions = ["recent", "most-likes", "oldest"] as const
type FilterTypes = typeof filterOptions[number]

const Lineups = () => {
  const [filter, setFilter] = useState<FilterTypes>(filterOptions[0]);
  
  const onValChangeTest = (val: FilterTypes) => {
    setFilter(val);
  };
  
  const onItemClickTest = (val: FilterTypes) => {
    setFilter(val);
  };
  return (
...
<Select
  onValueChangeFx={(val: FilterTypes) => onValChangeTest(val)}
  onItemClickFx={(val: FilterTypes) => onItemClickTest(val)}
  defaultValue={filterOptions[0]}
  values={filterOptions.map((e) => e)}
/>
...
)
}
const filterOptions = ["recent", "most-likes", "oldest"] as const
type FilterTypes = typeof filterOptions[number]

const Lineups = () => {
  const [filter, setFilter] = useState<FilterTypes>(filterOptions[0]);
  
  const onValChangeTest = (val: FilterTypes) => {
    setFilter(val);
  };
  
  const onItemClickTest = (val: FilterTypes) => {
    setFilter(val);
  };
  return (
...
<Select
  onValueChangeFx={(val: FilterTypes) => onValChangeTest(val)}
  onItemClickFx={(val: FilterTypes) => onItemClickTest(val)}
  defaultValue={filterOptions[0]}
  values={filterOptions.map((e) => e)}
/>
...
)
}
The Select component is messy, I'll provide a code sandbox and say that my bets are on onValueChangeFx or onItemClickFx. https://codesandbox.io/s/laughing-orla-sgfc1t?file=/src/select.tsx Googling the err msg points to people using JSON.stringify() on objects that point to themselves. which afaik I didn't do
CodeSandbox
laughing-orla-sgfc1t - CodeSandbox
laughing-orla-sgfc1t using @radix-ui/react-select, autoprefixer, postcss-cli, react, react-dom, react-icons, react-scripts, tailwindcss, zod
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?