export from script setup sugar showing error in editor. about language-tools HOT 10 CLOSED

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...

from language-tools.

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

I you are using [email protected] 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

from language-tools.

what is your vue version?

Hii, I'm using [email protected]. Ok sure then, I'll check

from language-tools.

what is your vue version?

Hii, I'm using [email protected]. 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

from language-tools.

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.

from language-tools.

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

from language-tools.

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.

from language-tools.

@schw4rzlicht try:

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

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

from language-tools.

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 :(

from language-tools.

@schw4rzlicht could you provide minimal reproduction?

from language-tools.