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.

[Prajapati-ankit-it]

Enable Volar Takeover Mode

Ensure that Volar is managing TypeScript instead of VS Code's default. Add the following to your settings.json:

{
  "volar.takeover.mode.enabled": true,
  "typescript.tsserver.experimental.enableProjectDiagnostics": true
}


#### Prevent VS Code's default validation for <script> blocks by adding this configuration:

{
  "html.validate.scripts": false
}


 Use TypeScript Module Type:
Make sure your <script> tag includes the type="module" attribute:

<script lang="ts" type="module">
    let bar: string = "123";
    console.log(bar);
</script>

[FliPPeDround]

If you're encountering validation issues in <script lang="ts"> blocks, follow these steps to resolve them effectively:

Enable Volar Takeover Mode

Ensure that Volar is managing TypeScript instead of VS Code's default. Add the following to your settings.json:

{
  "volar.takeover.mode.enabled": true,
  "typescript.tsserver.experimental.enableProjectDiagnostics": true
}


#### Prevent VS Code's default validation for <script> blocks by adding this configuration:

{
  "html.validate.scripts": false
}


 Use TypeScript Module Type:
Make sure your <script> tag includes the type="module" attribute:

<script lang="ts" type="module">
    let bar: string = "123";
    console.log(bar);
</script>

Thank you for your detailed suggestions. I followed your steps but encountered validation issues in <script lang="ts"> blocks. Specifically, the "Enable Volar Takeover Mode" configuration did not seem to take effect.

If possible, could you kindly provide a demo or a more detailed example? It would be greatly appreciated.

Thank you so much for your assistance!

[Prajapati-ankit-it]

1. Enable Volar Takeover Mode
   Ensure Volar is taking over TypeScript validation completely, overriding VS Code's default language server for .ts and .js files.

Add the following configurations to your settings.json:

{
  "volar.takeover.mode.enabled": true,
  "typescript.tsserver.experimental.enableProjectDiagnostics": true
}

This allows Volar to fully manage TypeScript, ensuring compatibility with <script lang="ts"> blocks.

2. Disable VS Code's Default HTML Script Validation
   VS Code’s built-in HTML validation might conflict with Volar when it comes to <script> tags in HTML files. Disable it by adding

this to your settings.json:

{
  "html.validate.scripts": false
}

This prevents duplicate or conflicting validations from VS Code's default HTML language features.

Example:
settings.json :

{
  "volar.takeover.mode.enabled": true,
  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
  "html.validate.scripts": false
}

HTML File :>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TypeScript Test</title>
    <style>
        .foo {
            color: aliceblue;
        }
    </style>
</head>
<body>
    <script lang="ts" type="module">
        const data = {
            name: "Volar",
            version: 1.0
        };
        console.log(data);
    </script>
</body>
</html>

• The lang="ts" block should be fully validated by Volar, providing proper type inference and diagnostics.
• The file should not show redundant or conflicting errors due to VS Code's default validation.

###Troubleshooting

• Verify that Volar is installed and active in VS Code.

• Ensure "volar.takeover.mode.enabled": true is in the global settings.json (File > Preferences > Settings > Search for JSON).

• Check if other extensions (like Vetur) are conflicting with Volar. Disable them temporarily for testing.

• Reload the VS Code window: Ctrl+Shift+P > Type Reload Window.