Vue3 - type props warning

[zertex]

I have got [Vue warn]: Invalid prop: type check failed for prop "options". Expected Boolean | Null, got Object at <OverlayScrollbarsComponent ...

on template:

<OverlayScrollbarsComponent
      class="os-vue"
      ref="osRef"
      :options="{
          scrollbars: {
            theme: 'os-theme-light',
            autoHide: props.autoHide
          },
        }"
      defer
  >
  <slot></slot>
  </OverlayScrollbarsComponent>

why?

[KingSora]

@zertex Good day :)

What version of overlayscrollbars-vue are you using?

[zertex]

0.5.3

[KingSora]

@zertex I might have messed up the typings for 0.5.3. Can you try whether this works:

<OverlayScrollbarsComponent
      class="os-vue"
      ref="osRef"
      :options="{
          scrollbars: {
            theme: 'os-theme-light'
          },
        }"
      :events="{}"
      defer
  >
  <slot></slot>
  </OverlayScrollbarsComponent>

[zertex]

Now [Vue warn]: Invalid prop: type check failed for prop "events". Expected Boolean | Null, got Object at OverlayScrollbarsComponent has been added

[KingSora]

That seems weird to me. I'm not getting this issue at all even with a completely fresh vue3 project. Are you using vue2 or vue3?

[zertex]

"peerDependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vicons/material": "^0.12.0",
    "@vitejs/plugin-vue": "^4.2.3",
    "sass": "^1.32.12",
    "sass-loader": "^12.0.0",
    "vite": "^4.4.5",
    "vite-plugin-dts": "^3.5.2",
    "vue": "^3.3.4"
  },
  "dependencies": {
    "overlayscrollbars-vue": "^0.5.3",
    "vite-plugin-fonts": "^0.7.0",
    "vue-router": "^4.2.4"
  }

[KingSora]

@zertex please install the overlayscrollbars package, its a peer dependency of overlayscrollbars-vue

[zertex]

unfortunately the warnings remain

[KingSora]

@zertex Are you able to provide an example repo or some sort of example so I can see whats going on?

[zertex]

I'll make an example

[KingSora]

@zertex I've now published overlayscrollbars-vue version 0.5.4 which fixed typing issues with optional props. While developing it I noticed that the VSCode extension for vue sometimes doesn't reflect the latest state of the project. What helped was restarting the IDE or the language server.

[zertex]

Unfortunately, the warning remains. i'll try to do an example in the sandbox tomorrow

[stixbunny]

I've come across this same issue, restarting Volar as well as VSCode sadly didn't work. I'm working with:

"overlayscrollbars": "^2.3.0", "overlayscrollbars-vue": "^0.5.4", "vue": "^3.3.4",

edit: I made a small example repo (sorry if this wasn't what you were looking for, I'm kinda new). I get a warning for typing on options.

https://github.com/stixbunny/overlayscrollbars-test

[KingSora]

@stixbunny Thanks for the example! :)

In your case the error is correct, because your options aren't correct. If you change your options to:

{
  paddingAbsolute: true,
  showNativeOverlaidScrollbars: true,
  scrollbars: {
    theme: 'os-theme-dark',
    clickScroll: true,
    autoHide: 'scroll',
  },
}

Which is the equivalent of the v1 options your specified, it should be working.

[KingSora]

@zertex which Vue plugin are using in your IDE?

[stixbunny]

@KingSora I tried but still no luck :(. Although thank you for pointing me in the right direction.

It should be noted I do get a warning on the option prop assignment:

That gets fixed if I type options as:

import type { PartialOptions } from "overlayscrollbars";
const options : PartialOptions = {
  paddingAbsolute: true,
  showNativeOverlaidScrollbars: true,
  scrollbars: {
    theme: 'os-theme-dark',
    clickScroll: true,
    autoHide: 'scroll',
  },
};

But I still get the same warning:

If it's worth anything, I'm running Volar with takeover mode with:

• TypeScript Vue Plugin (Volar) v1.8.8
• Vue Language Features (Volar) v1.8.8

[zertex]

@KingSora, still no luck too :(

@zertex which Vue plugin are using in your IDE?

PhpStorm with https://plugins.jetbrains.com/plugin/9442-vue-js

Sandbox: https://codesandbox.io/s/cranky-grass-n4zt92?file=/src/App.vue

P.S. v0.5.1 has no warnings

[KingSora]

This seems to be a problem with how vue3 handles its type-based declaration for props. (https://vuejs.org/guide/typescript/composition-api.html#typing-component-props) It looks like its inferring the runtime props incorrectly in my case.

So I've reverted back to runtime declaration to resolve this issue. Please try out overlayscrollbars-vue version 0.5.5 and report back your results.

[stixbunny]

I no longer get any warnings. Seems resolved on my end. Thanks a bunch!

[KingSora]

@zertex is the issue also fixed for you?

[meteyou]

@KingSora i had the same issue with overlayscrollbars-vue and 0.5.3. an update to 0.5.5 fixed also my issue. Thx for your work!

[KingSora]

Nice! I'll close this issue now. @zertex in case this issue isn't resolved for you please don't hesitate to create a new one

[zertex]

@zertex is the issue also fixed for you?

Thanks!