Error: Not found: /fa.svelte

[AdrienLF]

Hi,

I have this very weird error that I would like to share.

Sometimes, randomly, I get this error:

Error: Not found: /fa.svelte
    at resolve (/Users/adrienlefalher/CODE/SvelteBase/node_modules/@sveltejs/kit/src/runtime/server/respond.js:473:13)
    at resolve (/Users/adrienlefalher/CODE/SvelteBase/node_modules/@sveltejs/kit/src/runtime/server/respond.js:282:5)
    at Object.handle (/Users/adrienlefalher/CODE/SvelteBase/src/hooks.server.ts:20:10)
    at Module.respond (/Users/adrienlefalher/CODE/SvelteBase/node_modules/@sveltejs/kit/src/runtime/server/respond.js:279:40)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

the component is showned properly. The icons display with no issues. In fact, it would just be an annoying error on the terminal if it was just that.

However, the issue I have it that it pollutes my forms. Whenever I have the issue mentionned, and I submit a form, I get two queries: my proper query, and, first, fa.svelte. This completely breaks my site, and I have no idea what to do to resolve it.

Here's an example component what this issue arrises:

<script>
    import { avgLuma } from '$lib/stores';
    
  
    let searchQuery = '';
  
    
  let textColor;

  // reactive statement to update textColor each time avgLuma changes
  $: {
    let avgLumaValue = $avgLuma;
    textColor = avgLumaValue < 0.7 ? "white" : "black";
  }

</script>

<div class="search-bar">
  <form action="/search" method="POST" >
      
      <input id="my-input"
             type="search"
             name="search"
             bind:value={searchQuery}
             placeholder=""
             class="input input-bordered w-full" />
      <button type="submit" class="btn">Search</button>
  </form>
</div>

Some more info:

The search page redirects to the [search] with +page.server.ts:

import { redirect } from '@sveltejs/kit'
import type { Actions } from './$types'

export const actions = {
	default: async ({ request }) => {
        console.log("routes/search/+page.server.ts")
		const data = await request.formData()
		const dataurl = data.url
		const search = data.get('search')
		console.log({search})
		
		throw redirect(302, `/search/${search}`)
		// throw redirect
	},
   
} satisfies Actions

Here the search is the right data, no issue whatsoever.

And then I have the +layout.server.ts

import type { LayoutServerLoad } from './$types'
import type { ExtendedResult } from '$lib/server/icono'


let query = ""


export const load = (async ({ url }) => {
	console.log({ url })
	query = url.pathname.split('/')[2] || ''
	
	query = decodeURIComponent(query)
	console.log("Getting query from url")
	
	
	if (!query) return {}
	if (query != "fa.svelte") {
		return {
			query,
			awaited: {
				results: search(query)
			}
		}
	}
	else {
		console.log("Query is fa.svelte, returning empty object")
		return {}
	}
	
}) satisfies LayoutServerLoad

Here, the load triggers twice, with two different urls:

url: URL {
    href: 'http://localhost:5173/search/a%20kid%20doing%20sick%20skateboard%20tricks',
    origin: 'http://localhost:5173',
    protocol: 'http:',
    username: '',
    password: '',
    host: 'localhost:5173',
    hostname: 'localhost',
    port: '5173',
    pathname: '/search/a%20kid%20doing%20sick%20skateboard%20tricks',
    search: '',
    searchParams: URLSearchParams {},
    hash: ''
  }

AND

url: URL {
  href: 'http://localhost:5173/search/fa.svelte',
  origin: 'http://localhost:5173',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'localhost:5173',
  hostname: 'localhost',
  port: '5173',
  pathname: '/search/fa.svelte',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}

I have no idea why.

[Cweili]

I think perhaps you can get some help from SvelteKit.

[dmnhld]

same error here

edit: i just restarted my laptop and it looks like the error isn't displaying any more. I don't really know the reason why it appeared in first place but yeah :/

[AdrienLF]

edit: i just restarted my laptop and it looks like the error isn't displaying any more. I don't really know the reason why it appeared in first place but yeah :/

Unfortunately it's very random for me too, I didn't find a solution yet.

[Cweili]

Try v4.x which is built with SvelteKit.