Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] setup doesn't support return object with type of Module #874

Closed
xialvjun opened this issue Dec 20, 2021 · 4 comments
Closed

[BUG] setup doesn't support return object with type of Module #874

xialvjun opened this issue Dec 20, 2021 · 4 comments

Comments

@xialvjun
Copy link
Contributor

The bug( or maybe not bug) code is at

} else if (isPlainObject(binding)) {

Sorry I can not offer an codesandbox or stackblitz link, because this bug is related to the building enviroment.

My local build enviroment is: vite + vite-plugin-vue2;

The build script is just "build": "vite build", without tsc && because esbuild support typescript.

Then with code:

App.vue

<template><div @click="a++">{{a}}</div></template>
<script lang="ts">
import { defineComponent } from "@vue/composition-api"
import * as refs from "./refs"; // refs is just a ts file with some global ref state.

export default defineComponent({
  setup() {
    return { ...refs }; // refs is of type "[object Module]", and `{ ...refs }` is also of type "[object Module]", so isPlainObject return false.
    // I need to convert it to
    const spread = obj => Object.keys(obj).reduce((acc, cv) => ({...acc, [cv]: obj[cv]}), {});
    return { ...(spread(refs)) }; // then it works.
  }
});
</script>

refs.ts

import {} from '@vue/composition-api';
export const a = ref(0);
export const b = ref('');
@MinatoHikari
Copy link
Contributor

You should not directly export const something = ref()


export const useRef = () => {
    const a = ref()

    return { a }
}

@LinusBorg
Copy link
Member

@MinatoHikari exporting a ref like OP does is totally fine.

@xialvjun
Copy link
Contributor Author

I don't have a need to SSR, so I just export a global ref.

@xialvjun
Copy link
Contributor Author

xialvjun commented Dec 20, 2021

I think changing isPlainObject to isObject which is val => val !== null && typeof val === 'object' is enough. Vue3 is just like this https://github.com/vuejs/vue-next/blob/87c86e4cc2/packages/runtime-core/src/component.ts#L688

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants