export from script setup sugar showing error in editor.

[soulsam480]

Hii @johnsoncodehk ,

So recently while using volar in a project, I got an error saying Modifiers cannot appear here.ts(1184).

This came from the following code. Please have a look.

<script lang="ts" setup="props">
import { User } from '@/utils/models';
import { toRef } from 'vue';

declare const props: {
  list: Array<User>;
};

export const userList = toRef(props, 'list'); // the error is shown right on top of the export keyword
</script>

<template>
  <div class="chat-list">
    <div v-for="u in userList" :key="u.id">
      <span> {{ u.name }} </span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.chat-list {
}
</style>

I'm actually not sure if it's a problem with volar or vue. Also this is not throwing any error in dev server or while rendering. Please have a look!

[johnsoncodehk]

Hi @soulsam480, what is your vue version? if you using vue@3.0.3 or new, <script setup> has changed, it don't use export anymore.

I you are using vue@3.0.2 or old, please change vscode setting "volar.scriptSetup.supportRfc": "#182" and reload vscode, it would support the old version <script setup>.

But in the future, old <script setup> will remove, please see: #27

[soulsam480]

what is your vue version?

Hii, I'm using vue@3.0.3. Ok sure then, I'll check

[soulsam480]

what is your vue version?

Hii, I'm using vue@3.0.3. Ok sure then, I'll check

Just removed the export and now it shows 'userList' is assigned a value but never used.eslint@typescript-eslint/no-unused-vars

[johnsoncodehk]

this error is not from volar, I think eslint may not support new <script setup>, sorry I don't have use eslint so I can't say how to fix...

[soulsam480]

Ohh sure. Also I just noticed that without the export, the data is not being exposed to template. I mean not being accessible from the remplate during render.

I'll just check in Vue 3 issues.

[johnsoncodehk]

you don't need export in new <script setup>, check here: https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md#top-level-bindings-are-exposed-to-template

[schw4rzlicht]

I think this is an issue though. I am using vue-tsc for type checking on CI and something like this also fails:

<script lang="ts" setup>
export interface ComponentProps {
  myProps: string;
}

defineProps<ComponentProps>();
</script>

...but I actually need the export so that I can use the interface somewhere else.

[johnsoncodehk]

@schw4rzlicht try:

<script lang="ts">
export interface ComponentProps {
  myProps: string;
}
</script>

<script lang="ts" setup>
defineProps<ComponentProps>();
</script>

[schw4rzlicht]

This helps in some cases. But I just found another one not working:

<script lang="ts">
import { PlayerError } from "./errors/PlayerError";

export interface ErrorViewProps {
    error: PlayerError;
}

export interface ErrorViewEmits {
    (e: "retry"): void;
}
</script>

<script lang="ts" setup>
const props = defineProps<ErrorViewProps>();

defineEmits<ErrorViewEmits>();
</script>

This one fails with:

[plugin:vite:vue] Transform failed with 1 error:
/Users/**/src/ErrorView.vue:20:67: ERROR: Expected ")" but found "("

/Users/**/src/ErrorView.vue:20:67
Expected ")" but found "("
18 |    },
19 |    emits: ["retry"],
20 |    setup(__props: any, { expose }: { emit: ( computed<string | null>(()), expose: any, slots: any, attrs: any }) {
   |                                                                     ^
21 |    expose();
22 |

In this case, I don't even need export, but when doing vue-tsc --emitDeclarationOnly (and thus having declarations: true in tsconfig.json, vue-tsc fails with:

src/ErrorView.vue:34:25 - error TS4082: Default export of the module has or is using private name 'ErrorViewProps'.

34 <script lang="ts" setup>
35 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
... 
118 });
    ~~~
119 </script>   

But I need declarations as I am building a library :(

[johnsoncodehk]

@schw4rzlicht could you provide minimal reproduction?