Seeking Help: How to Resolve "Cannot redeclare block-scoped variable" Across Different Virtual Files

[FliPPeDround]

While editing HTML files in VSCode, I've noticed that redeclaring the same variable within <script type="module"> tags still triggers an error "Cannot redeclare block-scoped variable 'xxx'", despite each module supposedly being independent.

To address this, I attempted using Volar.js by placing them in different virtual files, yet I still encountered the error "file://home/xxx/starter/sample/test.html(2, 5): 'bar' was also declared here.", yet this also triggers recognition and does not solve my problem.

I have had difficulty finding more documentation on Volar and am unsure if it can handle this situation. If you have any suggestions or solutions, I would greatly appreciate it. Also, please let me know if Volar.js does not yet support this functionality. Thank you for your time and assistance.

[johnsoncodehk]

In order for TS to think that the virtual script is a module, you need to place empty exports in each virtual script.

For example, for the following script tag:

<script type"module">
const a = 1;
console.log(a);
</script>

Its virtual code should be:

const a = 1;
console.log(a);

export { };

[FliPPeDround]

Thank you very much for your help! Adding export {} solved the error issue with the virtual file module. However, even though the virtual file no longer shows errors, the original file's language server validations seem unchanged. Is it possible for Volar to take over these validation rules to prevent this code from showing errors? Is such a feature feasible?

Additionally, I tried adding the following configuration in VSCode to address the issue:

{
  "html.validate.scripts": false
}

However, I still encounter type inference errors.