Sveltekit: "Error: Request. Query Has Been Replaced by Request. Url. searchParams"

I wanted to try out SvelteKit on MacOs 11.5.2. Using node v16.13.1, npm 8.1.2.

I have installed the SvelteKit as per original guidance:

npm init svelte@next my-app
cd my-app
npm install
npm run dev -- --open

Then, when localhost:3000 opens, I get this error:

**Error: request.query has been replaced by request.url.searchParams**
    at Object.get (file:///Web/Svelte_30-12-21/my-app/node_modules/@sveltejs/kit/dist/ssr.js:1753:12)
    at Object.handle (/Web/Svelte_30-12-21/my-app/src/hooks.ts:10:30)
    at respond (file:///Web/Svelte_30-12-21/my-app/node_modules/@sveltejs/kit/dist/ssr.js:1764:30)
    at svelteKitMiddleware (file:///Web/Svelte_30-12-21/my-app/node_modules/@sveltejs/kit/dist/chunks/index.js:4577:28)

What could be the problem?

4 Answers

I ran into the same problem. In src/hooks.js replace

const method = request.query.get('_method');

with

const method = request.method;

If you are using npm init svelte@next my-app and using the demo app, you are also going to run into a problem in Header.svelte.

replace

<li class:active={$page.path === '/'}><a sveltekit:prefetch href="/">Home</a></li>
<li class:active={$page.path === '/about'}><a sveltekit:prefetch href="/about">About</a></li>
<li class:active={$page.path === '/todos'}><a sveltekit:prefetch href="/todos">Todos</a></li>

with

<ul>
  <li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
  <li class:active={$page.url.pathname === '/about'}>
   <a sveltekit:prefetch href="/about">About</a>
  </li>
  <li class:active={$page.url.pathname === '/todos'}>
    <a sveltekit:prefetch href="/todos">Todos</a>
  </li>
</ul>
1

The issue has been introduced in a commit made earlier today and reported. It has been fixed already, run npm update or delete your node_modules directory and reinstall.

0

In my case (SvelteKit next 160) it was different than in @klequis answer. The src/hooks.js contained this block of code

The solution to this is actually removing this if block altogether.

I removed it and I confirmed that this assignment is not needed anymore by logging the output console.log(request.method) output: GET

Untested code.

// TODO 
const searchParams = new URL(event.request.url).searchParams;
if (searchParams.has('_method')) {
    event.request = new Request({ ...event.request, method: searchParams.get('_method').toUpperCase()||''}) ;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Elena Rostova

Elena Rostova

Lead Health, Wellness & Medical Journalist

Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.

Share this article
Twitter Facebook Pinterest