CF Adapter breaks URL.searchParams

[cheesycod]

Describe the bug

Method searchParams called on incompatible receiver [object Object]
TypeError: Method searchParams called on incompatible receiver [object Object]

Reproduction

	import { fetchFates } from "$lib/request"
	export const prerender = false;
	/** @type {import('@sveltejs/kit@next').Load} */
	export async function load({ url }) {
		//console.log("url is:", url)
		let tag = url.searchParams.get("tag")
		let targetType = url.searchParams.get("target_type")
        console.log(tag)
		const searchUrl = `/api/v2/search/tags?target_type=${targetType}&tag=${tag}`;
		const res = await fetchFates(searchUrl);

		if (res.ok) {
            let data = await res.json()
			return {
				props: {
					data: data,
                    targetType: targetType,
                    tag: tag
				}
			};
		}

		return {
			status: res.status,
			error: new Error(`Tag Search Error`)
		};
	}
</script>
<script lang="ts">
    import CardContainer from "$lib/cards/CardContainer.svelte"
    import BotCard from "$lib/cards/BotCard.svelte"
    import SearchBar from "$lib/base/SearchBar.svelte"
    import Tag from "$lib/base/Tag.svelte";
import { session } from "$app/stores";
    export let data: any;
    export let targetType: string;
</script>
<section>
	<h1>Fates List</h1>
	<h2 class="best-bots">Find the best bots for your servers!</h2>
</section>
<SearchBar type={targetType} query=""></SearchBar>
<Tag targetType={targetType} tags={data.tags_fixed}></Tag>
<CardContainer>
	{#each data.search_res as bot}
		<BotCard data={bot} type={targetType} rand={false}/>
	{/each}
</CardContainer>

<style>
	h1 {
		font-size: 50px;
		margin: 0px;
	}

	h2 {
		font-size: 40px;
		margin: 0px;
	}

	.best-bots {
		opacity: 0.6;
	}
	section {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
		overflow: hidden;
	}
</style>

This code will give:

Method searchParams called on incompatible receiver [object Object]
TypeError: Method searchParams called on incompatible receiver [object Object]

Logs

No logs are reported

System Info

System:
    OS: Linux 5.15 Fedora Linux 35 (Cloud Edition)
    CPU: (2) x64 DO-Regular
    Memory: 688.41 MB / 3.82 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.13.0 - /usr/bin/node
    npm: 8.1.0 - /usr/bin/npm
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.7 
    @sveltejs/adapter-cloudflare: ^1.0.0-next.4 => 1.0.0-next.5 
    @sveltejs/adapter-node: ^1.0.0-next.57 => 1.0.0-next.58 
    @sveltejs/kit: next => 1.0.0-next.212 
    svelte: ^3.44.0 => 3.44.3 

issue itself is with cf pages

Severity

blocking all usage of SvelteKit

Additional Information

No response

[jahir9991]

same problem

[cheesycod]

I found a workaround for this:

In hooks, create a getSession, and then set all the stuff you need from url in session, then use the session in load:

export function getSession(request) {
    console.log("getSession called")

   // Bypass dumb cloudflare bug
   let query = {}
   request.url.searchParams.forEach((v, k) => {
        query[k] = v
   })

   return {
      "url": request.url.toJSON(), // CF adpter workaround, hopefully works?
     "query": query
   }
}

[jahir9991]

I found a workaround for this:

In hooks, create a getSession, and then set all the stuff you need from url in session, then use the session in load:

export function getSession(request) {
    console.log("getSession called")

   // Bypass dumb cloudflare bug
   let query = {}
   request.url.searchParams.forEach((v, k) => {
        query[k] = v
   })

   return {
      "url": request.url.toJSON(), // CF adpter workaround, hopefully works?
     "query": query
   }
}

it make some more complexity on another change in frontend

if i change the url with goto getsession dosen't call on frontend

[Giggiux]

+1 on this.
In my experience the site is breaking when loading from "direct access" to the page using searchParams, so when doing server side rendering, but if you load a page that doesn't use searchParams and then use a link with prefetch, using client side hydration, it works flawlessly.

This bug is absolutely non spottable/reproducible neither using dev command or build+ preview, furthermore I personally didn't find any logs on Cloudflare Pages.

[cheesycod]

I think this issue actually has to do with binding of url. The url object itself is sent but doesn’t appear to be properly bound which results in the bug in cf pages.

[b3ngg]

Same with accessing pathname on the url object. Cloudflare shows a 500 with: Method pathname called on incompatible receiver [object Object].

Using hooks works, but this still really sucks.

[stephane]

Another workaround a bit less intrusive:

In hooks, handle():

request.locals.fixedUrl = request.url.toJSON();

In hooks, getSession():

return {
    fixedUrl: locals.fixedUrl
};

In the load functions:

export async function load({ session }) {
    const url = new URL(session.fixedUrl);
}

[Rich-Harris]

Can you check if this is still happening with the latest versions of everything? 'method called on incompatible receiver' makes me think this is proxy-related — we used to use a proxy indiscriminately to prevent illegal query access during prerendering, but as of #3314 we only create the proxy when prerendering is true

[b3ngg]

With the latest version of adapter-auto and kit it works for me now! Thanks!

[Giggiux]

It now works for me on SvelteKit version 1.0.0-next.241 and adapter-cloudflare version 1.0.0-next.8.

Thanks a lot!

[cheesycod]

One second, let me test