[Bug Report][3.8.6] rules composable: Uncaught TypeError: fn is not a function

[capoaira]

Environment

Vuetify Version: 3.8.6 Last working version: 3.8.5 Vue Version: 3.5.13 Browsers: Firefox 138.0 OS: Linux x86_64

Steps to reproduce

Install with "vuetify": "=3.8.5" => localhost:3000 shows the v-text-field and validates the rule Install with "vuetify": "=3.8.6" => localhost:3000 Throws an error: Uncaught TypeError: fn is not a function

Expected Behavior

Should validate, that the input isn't empty

Actual Behavior

Throws an error: Uncaught TypeError: fn is not a function

Reproduction Link

https://github.com/capoaira/vuetify-rules-bug-report

Other comments

https://discord.com/channels/340160225338195969/1375494406366302368 The Issue is independent of OS and Browser (GniLudio from discord uses Windows with Chrome)

[alfianwahid]

This bug still occurs in version 3.8.8

[hadarziv-army]

Is there any update on this issue? I'm following the documentation and using useRules, but now I'm unable to upgrade to Vuetify v3.9.0

[ajslater]

Seems broken for me on v3.9.0. I'm using options API, though. useRules() returns a CompRefImpl that unwraps to undefined in the template and options methods.

<script>
import { useRules } from "vuetify/labs/rules";

export default {
  data() { 
    return {
      usernameRules: [this.rules.required()]
      };
  },
  setup() {
   const rules = useRules();
   return { rules };
  },  
}
</script>

I'd make an example with play.vuetifyjs.com but I'm not sure how to register the labs plugin there.

[J-Sek]

Docs might need an update after #21267 Here is a working example

for the playground to pick up useRules I had to make 2 changes:

• in import-map.json
  • "vuetify/labs/rules": "https://cdn.jsdelivr.net/npm/[email protected]/lib/labs/rules/index.js",
• and register plugin in main.js that seems to be accessible if you add and remove a file in the left sidebar

[ajslater]

Ah yes. I see.

• The function argument to useRules() declaring the exported rules functions makes it work.
• Rules are referenced as an array of strings, not functions.
  • Rules with arguments are referenced as arrays of strings within the rules array.
• And this.rules becomes an implicit source of rules for the :rules attribute.

Thanks! Yeah, the docs could use an update if this is stable and the direction this labs feature will take going forward.

More complicated example with parameters

[hadarziv-army]

Thanks for the helpful example @J-Sek 🙌 Just curious - is there a reason the useRules composable isn’t used the way it's shown in the documentation?

The documented approach seems to provide proper TypeScript autocompletion, while this one doesn’t.

Is there a way to keep the improved DX with autocomplete when using this pattern?

[kingyue737]

laventnc found that to use built-in rules, useRules is not even required https://github.com/vuetifyjs/vuetify/issues/21552#issuecomment-2962825752 , while there is no TypeScript intellisense.

We may need an officially recommended way to use it.

[ocratravis]

Would definitely appreciate some official guidance here. I was hoping to upgrade from 3.8.1 to 3.9.3, but this breaks my app. Without any official documentation about the change, I'm not sure what the right thing to do is.

[gotson]

@J-Sek on the latest 3.9.4 it seems there is still some discrepancies between the code and the doc.

For custom rules, the documentation mentions:

export default createRulesPlugin({
  rules: {
    aliases: {
      // Create a new rule named "pinCode"
      pinCode: err => {
        return v => (/^[\d]{4}$/.test(v)) || err || 'Field must contain a 4-digit PIN'
      },
      // Overwrite an existing rule by redefining it
      integer: err => {
        return v => Number.isInteger(v) || err || 'Field must contain an integer value'
      }
    },
  },
})

But in my IDE the function shows up like this:

export function createRulesPlugin(
    rules: RulesOptions,
    locale: LocaleInstance,
): RulesPlugin

I am also unable to reference custom rules when using the useRules() composable, but i don't know if it's because of the issue with createRulesPlugin or not.

[J-Sek]

resolved by cb7cf1c