Missing styles and scripts in dev mode on Windows when the drive letter is lowercase

[erg208]

Astro Info

Astro                    v3.0.12
Node                     v18.17.1
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/vue
                         @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

Edge and Chrome

Describe the Bug

Followed "using script in astro documentation" and it does not work in our Windows environment. The JavaScript never gets added to the Web page. It does work on https://stackblitz.com/edit/github-1egmuk.

What's the expected result?

Expect to see "Hello" on the Web page; and "test.js is being loaded..." in de the dev-tools console of the Web browser.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-1egmuk

Participation

• I am willing to submit a pull request for this issue.

[erg208]

I am still trying to debug the Windows 10 environment on why this feature of Astro is not working. What we really what to do is utilize external TypeScript modules with Classes and interfaces, but we thought we would start with with JavaScript.

What I have discovered is that removing all of the global npm modules did not resolve the issue.

I found that our workaround for the moment is to utilize the Windows Linux Subsystem, because we are not seeing the issue in this OS.

[matthewp]

Hey @erg208 my guess is that this is a path issue. Is it possible that this does work?

<script>
import "../scripts/test.js";
</script>

[erg208]

Hi @matthewp , thank you for the suggestion. I did try with the import and it still did not work in windows. I tried as admin in windows thinking maybe it was the cause, but no luck. I also tried changing to use the file:// protocol, but that did not work either. I have started to look at Vite to see if they have any known issues with rollup on Windows.

[lilnasy]

I had to install react and vue because you have their integrations added but not the frameworks themselves, but afterwards I could not reproduce the issue.

[matthewp]

I have a working version of this example. @aggre which browser are you using to test? Also, what folder is this in? Is this inside of your User directory (it should be).

[aggre]

@matthewp You probably mentioned me in mistake for @erg208, didn't you?

I'm also using Windows, but my development environment is only on WSL, so I haven't been able to reproduce this. btw, https://stackblitz.com/edit/github-1egmuk is working fine in Edge/Firefox and I saw 'Test' replaced with 'Hello' a few seconds after loading.

Thank you for your continuous upgrades! If I find any possible causes, I will comment.

[erg208]

@matthewp - I made sure to have Astro updated to version 3.2.2; and found that the feature does work only if the project's directory is under the User directory. My normal directory for development is for all of my GitHub repos under the C:\ root, which does not work. We will have to make sure that the whole team here either uses WSL or only uses Astro under their User directory in Windows. Thank you. If you want you can close this issue; unless there is something more we should investigate.

[lilnasy]

Does running the terminal as admin make a difference?

[erg208]

@lilnasy - Running in admin did not work, but running with Windows PowerShell did work. Thank you.

[lilnasy]

Thanks for that bit of info, it rang a bell and I could reproduce the issue.

Notice the lowercase drive letter.

Not sure what causes it but I found it to be the reason for reported missing styles as well. I'd like to keep this issue open.

Workaround - make sure drive letter is uppercase:

cd /d C:/

... or use pnpm (pnpm dev), something about the way it starts tasks is tolerant to casing of drive letters (edit: this fix pnpm/pnpm#6525).

[lilnasy]

@erg208 Can you confirm the cause?

[erg208]

@lilnasy - That was it! Making sure that the drive letter is in uppercase did it. Thank you very much.

[matthewp]

Fixed! Thanks @lilnasy