Attempted import error: 'useRef' is not exported from 'react' (imported as 'React').

[mk965]

I'm developing a website using Next.js v13's "appDir" mode.

Always report "Attempted import error: 'useState' is not exported from 'react' (imported as 'React').".

I'm not sure if it's a "react-query" bug.

I am using React v18.2.0.

Online Demo：

// layout.tsx
import {
  Hydrate,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

export default function MyApp({ children, pageProps }) {
  const queryClient = new QueryClient();
  console.log(queryClient);
  return (
    <QueryClientProvider client={queryClient}>
      {/* <Hydrate>{children}</Hydrate> */}
      {children}
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}

// page.tsx
import { useQuery } from '@tanstack/react-query';
const { isLoading, error, data } = useQuery({
  queryKey: ['repoData'],
  queryFn: () =>
    fetch('https://api.github.com/repos/tannerlinsley/react-query').then(
      (res) => res.json()
    ),
});

export default function ExampleA() {
  if (isLoading) return 'Loading...';

  if (error) return 'An error has occurred: ' + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{' '}
      <strong>✨ {data.stargazers_count}</strong>{' '}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  );
}

[mk965]

I found a similar problem: #4933