`parent` in load functions receive `@typescript-eslint/unbound-method` error

[rakuzen25]

Describe the bug

My +page.ts looks like something like this:

export const load: PageLoad = async ({ fetch, parent }) => {
    const { uid } = (await parent()).session?.user ?? {};
    if (!uid) {
        throw new TypeError("User ID not found");
    }

    // Do something
};

However, eslint seems not very happy about the parent function reference and throws

Avoid referencing unbound methods which may cause unintentional scoping of `this`.
If your function does not access `this`, you can annotate it with `this: void`, or consider using an arrow function instead. eslint(@typescript-eslint/unbound-method)

Docs on unbound-method

Reproduction

MRE on Stackblitz

Run pnpm eslint ./src to see the errors.

Logs

/home/projects/stackblitz-starters-1y7qpk/src/routes/sum/+layout.ts
  3:42  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`.
If your function does not access `this`, you can annotate it with `this: void`, or consider using an arrow function instead  @typescript-eslint/unbound-method

/home/projects/stackblitz-starters-1y7qpk/src/routes/sum/+page.ts
  3:40  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`.
If your function does not access `this`, you can annotate it with `this: void`, or consider using an arrow function instead  @typescript-eslint/unbound-method

✖ 2 problems (2 errors, 0 warnings)

System Info

System:
  OS: Linux 5.0 undefined
  CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 0 Bytes / 0 Bytes
  Shell: 1.0 - /bin/jsh
Binaries:
  Node: 18.20.3 - /usr/local/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 10.2.3 - /usr/local/bin/npm
  pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
  @sveltejs/adapter-auto: ^3.0.0 => 3.2.4 
  @sveltejs/kit: ^2.0.0 => 2.5.25 
  @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.1.2 
  svelte: ^4.2.7 => 4.2.19 
  vite: ^5.0.3 => 5.4.2

Severity

annoyance

Additional Information

Patrick in the server mentioned that perhaps

kit/packages/kit/types/index.d.ts

Lines 776 to 782 in 45cb8c5

	/**
	* `await parent()` returns data from parent `+layout.js` `load` functions.
	* Implicitly, a missing `+layout.js` is treated as a `({ data }) => data` function, meaning that it will return and forward data from parent `+layout.server.js` files.
	*
	* Be careful not to introduce accidental waterfalls when using `await parent()`. If for example you only want to merge parent data into the returned output, call it _after_ fetching your other data.
	*/
	parent(): Promise<ParentData>;

and

kit/packages/kit/types/index.d.ts

Lines 1201 to 1206 in 45cb8c5

	/**
	* `await parent()` returns data from parent `+layout.server.js` `load` functions.
	*
	* Be careful not to introduce accidental waterfalls when using `await parent()`. If for example you only want to merge parent data into the returned output, call it _after_ fetching your other data.
	*/
	parent(): Promise<ParentData>;

needs to be changed to parent(this: void): Promise<ParentData>; or parent: () => Promise<ParentData>;, but it seems like this file is auto-generated…

[Stadly]

This also applies to other functions, such as resolve in Handle. I created an issue in the svelte repo for it, but it obviously belongs here in the kit repo.

Just posting the relevant details here, as it is the exact same issue as the OP is describing.

Describe the bug

When destructuring a function out of a function argument, for example like this:

// `resolve` is a function that is destructured out of the function argument
async function handle({ event, resolve }) {
  // ...
}

ESLint yells at me:

error  Avoid referencing unbound methods which may cause unintentional scoping of `this`.
If your function does not access `this`, you can annotate it with `this: void`, or consider using an arrow function instead  @typescript-eslint/unbound-method

Destructuing the function argument is very common, and is the way it's done in both the Docs and Tutorial for the handle hook.

I don't think resolve uses this, so I think the issue would be solved by declaring Handle like this (using arrow function for resolve):

export type Handle = (input: {
  event: RequestEvent;
  resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;
}) => MaybePromise<Response>;

or this (annotating resolve with this: void):

export type Handle = (input: {
  event: RequestEvent;
  resolve(this: void, event: RequestEvent, opts?: ResolveOptions): MaybePromise<Response>;
}) => MaybePromise<Response>;

instead of this (resolve is a regular function):

export type Handle = (input: {
  event: RequestEvent;
  resolve(event: RequestEvent, opts?: ResolveOptions): MaybePromise<Response>;
}) => MaybePromise<Response>;

Note: The same issue applies to some other functions. At least parent in LayoutLoad and PageLoad comes to mind.

Reproduction

Set up SvelteKit with ESLint and @typescript-eslint/recommended-type-checked.

Set up a handle hook:

// src/hooks.server.js
import type { Handle } from "@sveltejs/kit";

export const handle: Handle = async ({ event, resolve }) => {
  return await resolve(event);
}

[eltigerchino]

This is strange because those functions are arrow functions although it reports otherwise. Adding the this: void annotation in public.d.ts and turning it into an arrow function doesn't help either.

[Stadly]

This is strange because those functions are arrow functions although it reports otherwise. Adding the this: void annotation in public.d.ts and turning it into an arrow function doesn't help either.

Strange indeed! I also did a little test making changes to public.d.ts inside the node_modules folder of my project without getting it to work 🤔

[Stadly]

Any idea who might be able to look into this, @eltigerchino?

[eltigerchino]

Any idea who might be able to look into this, @eltigerchino?

Not at the moment. The team is still busy with the post-launch of Svelte 5.