Subscribe on changes!

error TS4058 caused by RawSymbol

avatar
Nov 7th 2022

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

  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

avatar
Nov 7th 2022

You can turn off composite to temporarily circumvent this problem 👀

avatar
Jan 11th 2023

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.
avatar
Jan 11th 2023

@RomainLanz Could you please provide a minimum reproduction repo?

avatar
Jan 11th 2023

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

avatar
Jan 11th 2023

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
  })
}
avatar
Jan 11th 2023

Yes, it does fix it!

avatar
Jan 30th 2023

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

avatar
Jan 30th 2023

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