How to fix TypeScript warnings and errors when using Client Scripts?

[icehaunter]

Description 📖

Usage of <script client:load lang="ts"> in a Vue component displays an error in VSCode under Volar if there is no other script block. When adding such a snippet, it immediately does two things: loses all highlights of components and stuff like $frontmatter, and complains about lack of export under --isolatedModules. Removing --isolatedModules helps, however Volar will still complain about references to $frontmatter. Adding <script setup lang="ts"></script> solves the issue.

I'm not sure this is fixable, so I think this should be referenced in the docs, since the "minimal example" provided there won't work out of the box.

Reproduction 🐞

• Initialize the repo using pnpm create iles@next
• Open the codebase in VS Code using the Volar extension
• Add the following snippet to ./src/components/Welcome.vue

  <script client:only lang="ts">
    console.log("test")
  </script>

• Observe the red squiggles

Dependencies Info

Run npx iles info and pnpm list (or npm list) and provide the output:

iles v0.8.3 vite v3.0.9

devDependencies:
iles 0.8.3
typescript 4.7.4
vue-tsc 0.38.9

Screenshots 📷

If used without lang="ts":

If used with lang="ts":

and

[ElMassimo]

Hi Ilia!

As in the examples of the Client Scripts section, you should always use lang="ts" for client scripts.

---

The empty export warning can be fixed by disabling isolatedModules in tsconfig.json, or by providing an export, such as:

<script client:load lang="ts">
export function onLoad () {
  console.log('Now visible')
}
</script>

---

The $frontmatter warning can sometimes be related with the global properties not being registered in TypeScript.

In this case, it could be Volar being confused because the client script doesn't have exports, which you can fix.

In other cases, check that you are including the types for iles in tsconfig.json, or referencing them in an .d.ts file that is included:

/// <reference types="iles" />