Argument of type 'Ref<null>' is not assignable to parameter of type 'MaybeElementRef<MaybeElement>'.

[rich1e]

Describe the bug

What is the cause of this problem? How to solve it?

Argument of type 'Ref<null>' is not assignable to parameter of type 'MaybeElementRef<MaybeElement>'.
  Property '[RefSymbol]' is missing in type 'Ref<null>' but required in type 'Ref<MaybeElement>'.ts(2345)
reactivity.d.ts(458, 5): '[RefSymbol]' is declared here.

code

import { onClickOutside } from '@vueuse/core';

const target = ref(null);
onClickOutside(target, () => {
  isShowCandidate.value = false;
});

return () => (
  <div ref={target}></div>
);

package.json

  "dependencies": {
    "@vueuse/components": "^10.2.1",
    "@vueuse/core": "^9.13.0",
    "vue": "3.2.47",
  },

Ref

Solved without doing anything? #405

Reproduction

https://stackblitz.com/

System Info

System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1
    Memory: 106.36 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.20.0/bin/yarn
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Firefox: 114.0.1
    Safari: 16.5.2
  npmPackages:
    @vueuse/core: ^9.13.0 => 9.13.0

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[rich1e]

The problem is solved, but I still want to know, how did this type of problem cause it?

Is it just TypeScript Type Gymnastics? 😂

How can I avoid these kinds of problems? 🤔️

Everyone's tsconfig.json is different, can the official website provide a standard typescript development example? Thank you.

import { onClickOutside } from '@vueuse/core';
import type { MaybeElement, MaybeElementRef } from '@vueuse/core';

const target = ref(null);
onClickOutside(target as unknown as MaybeElementRef<MaybeElement>, () => {
  isShowCandidate.value = false;
});

return () => (
  <div ref={target}></div>
);

[chaii3]

Does it work for you?

[roydukkey]

The problem is solved

@rich1e How?

I don't count this much has a solution.

onClickOutside(target as unknown as MaybeElementRef<MaybeElement>, () => {

[roydukkey]

I'm seeing this issue too when trying to upgrade my library to vue 3.3.

import { ref } from 'vue';
import { useScroll } from '@vueuse/core';

const target = ref<HTMLDivElement | HTMLPreElement>();
const { x, y } = useScroll(target);
//                         ^^^^^^
// error TS2345:
//   Argument of type 'Ref<HTMLDivElement | HTMLPreElement | undefined>' is not assignable to parameter of type 'MaybeRefOrGetter<HTMLElement | Window | Document | SVGElement | null | undefined>'.
//   Property '[RefSymbol]' is missing in type 'Ref<HTMLDivElement | HTMLPreElement | undefined>' but required in type 'Ref<HTMLElement | Window | Document | SVGElement | null | undefined>'.

import { ref } from 'vue';
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';

const portal = ref<HTMLElement>();
useFocusTrap(portal, { immediate: true, escapeDeactivates: false });
//           ^^^^^^
// error TS2345:
//   Argument of type 'Ref<HTMLElement | undefined>' is not assignable to parameter of type 'MaybeElementRef'.
//   Property '[RefSymbol]' is missing in type 'Ref<HTMLElement | undefined>' but required in type 'Ref<MaybeElement>'.

import { computed } from 'vue';
import { useMediaQuery } from '@vueuse/core';
import type { ComputedRef } from 'vue';

const computedQuery = (/*...*/): ComputedRef<string> => computed(() => { /*...*/ });

useMediaQuery(computedQuery(name, 'max'));
//            ^^^^^^^^^^^^^^^^^^^^^^^^^^
// error TS2345:
//   Argument of type 'ComputedRef<string>' is not assignable to parameter of type 'MaybeRefOrGetter<string>'.
//   Property '[RefSymbol]' is missing in type 'ComputedRef<string>' but required in type 'Ref<string>'.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rich1e]

I think it should be necessary to clarify this question, because I am not the only one who has questions.

[StevenJPx2]

This is an issue I've been facing when I'm creating modules with Nuxt 3.8.*. I initially thought it was a tsserver issue, but it happens to be a problem with the types for VueUse, because replacing the type with Vue's native Ref works.

[kier-mc]

I arrived here after experiencing this issue today with useElementSize(element), but the 10.7.0 update seems to have resolved it, for me at least.

EDIT: The issue is not resolved for me. Restarting the environment removes the error temporarily, but any other changes to the file restore it. The only solution that seems to work is the ugly type assertion conversion.

[amritk]

Has anyone found a better workaround than the unknown hack? Still an issue with the latest version

[roydukkey]

I found that blowing away the package-lock.json and re-installing with the updated packages fixed the issue.

[sky124380729]

Has any solution ? I have met this problem for a long time . I just used @ts-ignore when in my project

[dev-abota]

This continues to be an issue:

vue: 3.4.21
nuxt: 3.10.1
@vueuse/core: 10.9.0

Some errors I'm seeing:

// Trying to use `unrefElement()`

Type 'Ref<MaybeElement>' is not assignable to type 'MaybeComputedElementRef<MaybeElement>'.
  Property '[RefSymbol]' is missing in type 'globalThis.Ref<import("####redacted####/node_modules/@vueuse/core/index").MaybeElement>' but required in type 'import("####redacted####/node_modules/@vue/reactivity/dist/reactivity").Ref<import("####redacted####/node_modules/@vueuse/core/index").MaybeElement>'.ts(2322)
reactivity.d.ts(420, 5): '[RefSymbol]' is declared here.

// Trying to use `whenever()` with a ComputedRef

Argument of type 'ComputedRef<boolean>' is not assignable to parameter of type 'WatchSource<unknown>'.
  Type 'ComputedRef<boolean>' is missing the following properties from type 'ComputedRef<unknown>': [ComputedRefSymbol], [RefSymbol]ts(2345)