Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
FliPPeDround opened this issue Oct 24, 2024 · 5 comments

Comments

@FliPPeDround
Copy link

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

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
Copy link
Member

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
Copy link
Author

FliPPeDround commented Oct 25, 2024

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?
image
Additionally, I tried adding the following configuration in VSCode to address the issue:

{
  "html.validate.scripts": false
}

However, I still encounter type inference errors.

image

@Prajapati-ankit-it
Copy link

Prajapati-ankit-it commented Nov 28, 2024

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
Copy link
Author

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

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
Copy link

  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.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants