error TS4058 caused by RawSymbol
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 https://github.com/vuejs/core/pull/2548
- Create a project using TypeScript and Vue 3
- Use the
@vue/tsconfig
config - 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
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.
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
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
})
}