Pagination example fails in CRA with "'useSWR' cannot be called inside a callback" error

I’m having trouble using (either) pagination example in a Create React App project. As far as I can see my code tracks with the examples, reduced some here:

import useSWR, { useSWRPages } from 'swr';

function List({ query }) {
  const {
    pages,
    isLoadingMore,
    isReachingEnd,
    loadMore
  } = useSWRPages(
    'example',

    ({ offset, withSWR }) => {
      const { data: resource, error } = withSWR(
        useSWR('/data')
      );

      if (!resource) return null;
      if (error) throw new Error(error);

      return resource.data.map(item => (
        <Item key={item.id} {...item} />
      ));
    },

    (SWR, index) => {
      return 1;
    },

    []
  );

  return pages;
}
...

Running this I get an error overlay:

./src/app/example.js
 Line 71:9:   React Hook "useSWR" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

---

• swr@0.1.10
• react@16.12.0
• react-scripts@3.2.0

[pushred]

@quietshu thank you for the quick response!

I had to move the eslint comment but confirming this works for now:

const { data: resource, error } = withSWR(
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useSWR('/data')
);

[FrankFang]

Is there a plan to fix this? To temporarily avoid the error, I rename useSWR to swr.

import swr, {useSWRPages} from 'swr';

It’s tricky.