error TS4058 caused by RawSymbol

[RomainLanz]

Vue version

3.2.41

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-f88icu?file=src/use-foo.ts

Steps to reproduce

Note: Similar to #2548

1. Create a project using TypeScript and Vue 3
2. Use the @vue/tsconfig config
3. Create a composable with markRaw

export function useFoo() {
  return markRaw({ foo: 'bar' })
}

What is expected?

TypeScript should be happy

What is actually happening?

TypeScript raises an error.

TS4058: Return type of exported function has or is using name 'RawSymbol' from external module "~/workspace/node_modules/.pnpm/@vue+reactivity@3.2.41/node_modules/@vue/reactivity/dist/reactivity" but cannot be named.

System Info

No response

Any additional comments?

No response

[baiwusanyu-c]

You can turn off composite to temporarily circumvent this problem 👀

[RomainLanz]

Hey there! 👋🏻

This was fixed in 3.2.41, but it seems to happen again in 3.2.45.

TS4058: Return type of exported function has or is using name 'RawSymbol' from external module "/workspace/node_modules/.pnpm/@vue+reactivity@3.2.45/node_modules/@vue/reactivity/dist/reactivity" but cannot be named.

[sxzz]

@RomainLanz Could you please provide a minimum reproduction repo?

[RomainLanz]

Sure, it happens when using a "complex" typing from @tanstack/vue-query.

async function fetchFoo() {
  return markRaw({ foo: 'bar' });
}

export function useFoo(options?: UseQueryOptions<Awaited<ReturnType<typeof fetchFoo>>>) {
  return useQuery({
    queryKey: ['foo'],
    queryFn: fetchFoo,
    ...options
  })
}

Without using UseQueryOptions, the issue disappears.

I created a Stackblitz here: https://stackblitz.com/edit/vitejs-vite-zwx4la?file=src%2Fuse-foo.ts

[sxzz]

It seems to be an issue with TypeScript, maybe. Bulit-in Awaited will break the Raw type.

Try this one:

+++ type Awaited<T> = T extends PromiseLike<infer U> ? U : T

export function useFoo(
  options?: UseQueryOptions<Awaited<Raw<{ foo: string }>>>
) {
  return useQuery({
    queryKey: ['foo'],
    queryFn: fetchFoo,
    ...options
  })
}

[RomainLanz]

Yes, it does fix it!

[klausXR]

So, are we supposed to copy-paste this code everywhere? I don't really like this solution

[sxzz]

@klausXR Awaited I provided is not the same as the TypeScript built-in one.