suspense did not read rewrites proxy path

[ww8007]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.4.0: Mon Feb 21 20:35:58 PST 2022; root:xnu-8020.101.4~2/RELEASE_ARM64_T6000
Binaries:
  Node: 18.0.0
  npm: 8.6.0
  Yarn: 1.22.19
  pnpm: 7.14.0
Relevant packages:
  next: 12.3.1
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome 107.0.5304.110

How are you deploying your application? (if relevant)

not deployed

Describe the Bug

I'm using reacdt query + next for suspense
I tried dynamic import and setting off ssr option

I think this error is caused by suspense did not read next.config rewrites paths
How can i solve it?

Expected Behavior

I don't want to see Invalid URL

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/ww8007/next_issue

To Reproduce

React Query setting

    const queryClientRef = useRef<QueryClient>()
    const getLayout = Component.getLayout || ((page) => page)
    if (!queryClientRef.current) {
        queryClientRef.current = new QueryClient({
            defaultOptions: {
                queries: {
                    retry: false,
                    suspense: true,
                    useErrorBoundary: true,
                    cacheTime: 1000 * 60 * 5,
                    staleTime: 1000 * 60 * 3,
                },
            },
        })
    }

next.config.js

/** @type {import("next").NextConfig} */
const nextConfig = {
	async rewrites() {
		return [
			{
				destination: process.env.CHANNEL_LIST_DESTINATION_URL,
				source: process.env.CHANNEL_LIST_SOURCE_PATH
			}
		];
	},
	reactStrictMode: true
};
module.exports = nextConfig;

Code

import { QueryErrorResetBoundary } from '@tanstack/react-query';
import { Suspense, useRef } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import DataList from '../src/components/DataList';
import Loading from '../src/components/Loading';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
/** Add your relevant code here for the issue to reproduce */
export default function Home() {
	const queryClientRef = useRef<QueryClient>();
	if (!queryClientRef.current) {
		queryClientRef.current = new QueryClient({
			defaultOptions: {
				queries: {
					retry: false,
					suspense: true,
					useErrorBoundary: true,
					cacheTime: 1000 * 60 * 5,
					staleTime: 1000 * 60 * 3
				}
			}
		});
	}
	return (
		<QueryClientProvider client={queryClientRef.current}>
			<QueryErrorResetBoundary>
				{({ reset }) => (
					<ErrorBoundary
						onReset={reset}
						fallbackRender={({ resetErrorBoundary }) => (
							<div>
								There was an error!
								<button onClick={() => resetErrorBoundary()}>Try again</button>
							</div>
						)}
					>
						<Suspense fallback={<Loading />}>
							<DataList />
						</Suspense>
					</ErrorBoundary>
				)}
			</QueryErrorResetBoundary>
		</QueryClientProvider>
	);
}

[vercel-release-bot]

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.