[3.5.0] Bug when no data or asyncComputed properties are provided

[sharkykh]

A bug introduced in version 3.5.0 (most recent) breaks components that do not contain a data property and/or an asyncComputed property.

Meaning, if I have a component definition containing something like:

<template>
    <span>{{ realQuality }}</span>
</template>

<script>
export default {
    name: 'quality-pill',
    props: {
        quality: {
            type: Number,
            required: true,
            validator: value => (value >>> 0) >= 0 // Unsigned int
        }
    },
    computed: {
        realQuality() {
            return this.quality / 100;
        }
    }
};
</script>

It throws these errors:
1.

[Vue warn]: data functions should return an object:
https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

found in

---> <QualityPill> at src/components/helpers/quality-pill.vue
       <Root>

vue.esm.js:3514 Uncaught TypeError: Cannot use 'in' operator to search for 'auth' in undefined
    at initComputed (vue.esm.js:3514)

---

Adding either an empty (at the very least) data property, or an asyncComputed property with at least one async computed property, seems to fix the issue:

    data() {
        return {};
    },
// OR
    asyncComputed: {
        test() {
            return Promise.resolve('hey');
        }
    },

---

Tagging @michaelzangl as this seems to be related to #45.

[sharkykh]

@foxbenjaminfox
I see the test case passed.
Perhaps there's a conflict with one of the other plugins in use, mainly Vuex and VueRouter.
I'll try to make a small repo for reproducing the bug.

[foxbenjaminfox]

Yes, I added a test case, and surprisingly it passes, which means that something more is going on.

I've been trying to replicate the problem in Medusa itself, but I havn't managed yet. You probably are in a better position than me to understand the interaction of the various interactions of the internals there.

That said, I think the root of the problem is this data function, which only conditionally returns an object. But I don't know why this would only be surfacing now. As far as I can tell v3.5.0 and 3.4.1 of vue-async-computed should handle this the same way.

[sharkykh]

Yes, I added a test case, and surprisingly it passes, which means that something more is going on.

I've been trying to replicate the problem in Medusa itself, but I havn't managed yet. You probably are in a better position than me to understand the interaction of the various interactions of the internals there.

We almost immediately pushed a revert of that update, and the issue was only on the develop branch, so maybe you tried master?

That said, I think the root of the problem is this data function, which only conditionally returns an object.

Thanks! Returning an empty object unconditionally does seem to fix the issue.

[sharkykh]

As far as I can tell v3.5.0 and 3.4.1 of vue-async-computed should handle this the same way.

So, I commented out this line:
https://github.com/foxbenjaminfox/vue-async-computed/blob/master/src/index.js#L27
And it works without me changing my code.

[michaelzangl]

That behavior was unexpected. We use the patched version (now 3.5.0) in a project with several hundred components (including functional components, components without data, ...) and Vuex + VueRouter. We did not encounter this issue there.

Removing this line only makes you seem to fix the problem. In fact, vue-async-computed is just suppressing this warning on all components on which it is enabled. In L37 there should be a test added that warns if optionsData is not a function.

[foxbenjaminfox]

@sharkykh:

We almost immediately pushed a revert of that update, and the issue was only on the develop branch, so maybe you tried master?

I took master, and updated by hand the version of vue-async-computed in package.json, then ran the test suite. But the test suite passed, and I wasn't quite sure how to get the html running in a browser. (The index.html file loads a dist/build.js file that does't seem to exist, and I couldn't figure out how to generate it.)

So, I commented out this line:

vue-async-computed/src/index.js

Line 27 in 0e6fa13

if (!Object.keys(asyncComputed).length) return

And it works without me changing my code.

This probably explains why this surfaces only in v3.5.0 of vue-async-computed. In any case, that [Vue warn]: data functions should return an object: warning you get from Vue and the associated later type error are a result of the undefined returned from your data function, not from something vue-async-computed was doing, and in fact until v3.5.0, vue-async-computed was actually hiding this problem from you, and silently swallowing the warning. So I think it's correct to consider the bug to be in the pre-v3.5.0 versions, with v3.5.0 fixing the bug by exposing the problem that it had until that point been silent discarding.

[sharkykh]

Very well then, I have my answer - data should always return an object, which makes sense.
Thank you both!

I took master, and updated by hand the version of vue-async-computed in package.json, then ran the test suite. But the test suite passed, and I wasn't quite sure how to get the html running in a browser. (The index.html file loads a dist/build.js file that doesn't seem to exist, and I couldn't figure out how to generate it.)

Yeah sorry, the project is a Python backend and the frontend is in transition to Vue, and the index.html is not actually used currently wiki. So not that simple 😉 Thanks for trying though!