Got error "Error: useComputedClass must be called within a component setup function."

[isamu]

Overview of the problem

Oruga version: [0.8.1]
Vuejs version: [3.4]
OS/Browser:
Mac/Chrome

Description

When using o-field tag, I see an error.

useComputedClass.ts:57 Uncaught (in promise) Error: useComputedClass must be called within a component setup function.
    at useComputedClass(useComputedClass.ts:57:15)
    at Field.vue:235:5

It worked fine until 0.8.0, but an error occurs with 0.8.1 and 0.8.2.

Steps to reproduce

Reproduce with the following tag from the official document.

  <section>                                                                                                                                                      
    <o-field label="Name">                                                                                                                                       
        <o-input model-value="Kevin Garvey" />                                                                                                                   
    </o-field>                                                                                                                                                   
  </section> 

Expected behavior

No error occurs

Actual behavior

Got Error

[jtommy]

Probably it's a issue with last version of Vue (3.4), you should be able to use last oruga version with Vue 3.3

[isamu]

When I changed from vue-cli-service to vite, and changed from vue3.3 to 3.4, this problem occurred.
To investigate the problem, I created a new environment using npm create vite@latest and npm create vue@latest, set it up according to oruga's readme, and tested it.

As a result, the Vue version had no effect, and the error occurred only when the oruga version was changed from 0.8.0 to 0.8.1.

[isamu]

( #710 is another problem I found during that investigation.)

[isamu]

Sorry.
I checked again in my package.json

"vue": "^3.3.11"

So, 3.4 was installed.
This is a problem with 3.4.

[digital-codes]

probably same as this one from vue: vuejs/core#9974

[mlmoravek]

Hi @digital-codes, thanks for the link. I think the discussion seems very related to this issue. This also helps to understand the problem. My opinion is to wait some time and see how this discussion develops. Otherwise I might have an idea how to refactor the Oruga codebase to maybe prevent this.

[digital-codes]

I tried to do some debugging ... not really successfull. However, in the context of the error I get this output:
// checking of if the function exists, just to be sure
getcurins function: function getCurrentInstance()
useComputedClass.ts:56:12

// checking return from function. is null (well, we knew that already, 99.9%)
getcurins function returned: null
useComputedClass.ts:58:12

Here comes the error. Note, I've replace the exception with a console.log ...
!!!! useComputedClass must be called within a component setup function.!!!
useComputedClass.ts:60:16

Then there is a warning from vue, which might or might not be related.
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . runtime-core.esm-bundler.js:39:12

// this is probably an artifact from not throwing the exception ....
Uncaught (in promise) TypeError: vm is null
useComputedClass useComputedClass.ts:67
draggableClasses Upload.vue:251

Finally a warning from Oruga, which might be a result again from the missing exception ...
Underlaying Oruga input component not found
useInputHandler.ts:73:20

Maybe this helps at least a bit

[mlmoravek]

Just to be transparent; I've started on a refactoring for the classes properties.
My approach will be to refactor from computed to a ref with a watcher.

Before:

const rootClasses = computed(() => [
    useComputedClass("rootClass", "o-btn"),
    {
        [useComputedClass("sizeClass", "o-btn--", props.size)]: props.size,
    },
    ...
]);

To something like:

const rootClasses = defineClasses([["rootClass", "o-btn"], ["sizeClass", "o-btn--", props.size, !!props.size], ...]);

The defineClasses will return a ref value. Within the defineClasses composable, the useComputedClass composable is triggered only once on setup time. After that, the computed classes are applied to or removed from the ref object by a watcher.

Disclaimer: These are early thoughts and experiments, not the final solution yet.