Closed icehaunter closed 2 years ago
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:
export function onLoad () {
console.log('Now visible')
}
The $frontmatter
warning is related with the global properties not being registered in TypeScript.
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" />
Converting to a discussion so that folks can find this more easily.
iles
andvite
.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 ofexport
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 š
pnpm create iles@next
./src/components/Welcome.vue
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![image](https://user-images.githubusercontent.com/1357760/186764411-df4655e2-bd34-45f0-9188-86dea1bbcb53.png)
lang="ts"
:If used with
and
![image](https://user-images.githubusercontent.com/1357760/186764535-f1ae59d1-4aab-4a6a-80b0-2b34d58aeb90.png)
lang="ts"
: