Adding Scripts Affects TypeScript Intellisense on .astro file

[iamhectorsosa]

Astro Info

Astro                    v4.4.0
Node                     v20.11.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         @astrojs/react

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

No response

Describe the Bug

Adding Scripts Affects TypeScript Intellisense on .astro file. The snippet below has been included in Layout.astro or index.astro files. In both situations with or without directives I've noticed that the TypeScript intellisense is completely disabled. Missing imports are not detected, no intellisense on any props for the imported components, etc.

<script is:inline>
  const getThemePreference = () => {
    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
      return localStorage.getItem("theme");
    }
    return window.matchMedia("(prefers-color-scheme: dark)").matches
      ? "dark"
      : "light";
  };
  const isDark = getThemePreference() === "dark";
  document.documentElement.classList[isDark ? "add" : "remove"]("dark");

  if (typeof localStorage !== "undefined") {
    const observer = new MutationObserver(() => {
      const isDark = document.documentElement.classList.contains("dark");
      localStorage.setItem("theme", isDark ? "dark" : "light");
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"],
    });
  }
</script>

What's the expected result?

TypeScript is not affected by the inclusion of script tags in .astro files

Link to Minimal Reproducible Example

I don't have a GitHub repo at the time with this.

Participation

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

[Princesseuh]

Please share the file, we cannot help without a reproduction. Doesn't need to be the full project.

[github-actions]

Hello @iamhectorsosa. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[iamhectorsosa]

Hey, @Princesseuh

Would a gist work? https://gist.github.com/iamhectorsosa/08413ed27b3c0ffad0d64096d608d706

[iamhectorsosa]

You know what's interesting, if I go ahead and follow the instructions of import local scripts, then this issue goes away.

<script is:inline src="./theme.js"></script>

Still I am not sure what might be causing this. It's such a strange behavior. I wish I could help more.

[Princesseuh]

Yes, that's perfect, thank you!

[Princesseuh]

I'm not quite sure what the exact cause is, but you can workaround the issue by putting the script tag below the content.

[iamhectorsosa]

Thanks for looking into it. Yeah, also importing works for this. Still a strange issue.

[florian-lefebvre]

I just experienced a similar case:

<script is:inline>
	// interepreted as js, no issue
	let a
</script>

---
const data = {
	foo: "bar"
}
---
<script is:inline>
	// interepreted as ts, complains
	let a
</script>

---
const data = {
	foo: "bar"
}
---
<div></div>
<script is:inline>
	// interepreted as js, no issue
	let a
</script>