Script file isn't loaded on start `astro dev` when using tailwindcss

[kagankan]

What version of astro are you using?

1.0.0-rc.8

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Windows 10

Describe the Bug

Please see my sample repo.

That sample will show:

1. loading screen
   • script is loaded from src\components\LoadingScreen\LoadingScreen.astro
2. canvas animation (moving sea picture)
   • script is loaded from src\pages\index.astro

Problem

1. start astro dev and access local page
2. loading screen is correctly showed, but canvas animation is not showed.
   • script is not loaded to head tag
3. once I save src\scenes\main.ts, canvas animation starts moving
   • script is loaded

Case that Works

1. remove @use "node_modules/tailwindcss/utilities"; from src/styles/style.scss
2. start astro dev and access local page
3. working correctly

Additional Notes

I tested some versions.

in 1.0.0-beta.69 ～ 72: working correctly (without removing @use "node_modules/tailwindcss/utilities";) from 1.0.0-beta.73: the problem occurs.

(Edited)

1.0.0-beta.73 ～ 1.0.0-rc.3:

1. start astro dev and access local page
2. canvas animation is not showed.
3. once I reload , canvas animation start running

1.0.0-rc.4 ～:

1. start astro dev and access local page
2. canvas animation is not showed.
3. reload changes nothing
4. once I save src\scenes\main.ts, canvas animation starts moving

Link to Minimal Reproducible Example

https://github.com/kagankan/astro-sample/tree/41c58b10d639dbdecd9b020b331fa8ee94517ebc

Participation

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

[FredKSchott]

Interesting! So it sounds like there might be two bugs here. If anyone can track this down further, that would be great. @tony-sull is our resident TS expert but he's unfortunately out this week.

[kagankan]

I investigated this behavior, and I found some hints. (However, I don't know how to solve.)

As you say, there are two bugs.

In common

• These bugs happen only with tailwind.

  • (Maybe, content option of tailwind is related)

• When script file isn't loaded, node_modules\astro\dist\core\render\dev\scripts.js -> getScriptsForURL -> modInfo is not correct.

https://github.com/withastro/astro/blob/5b1facfe291b998c0c6814293b18df211a8f3cd3/packages/astro/src/core/render/dev/scripts.ts#L19

When script file isn't loaded, modInfo is:

{
  id: 'C:/Users/Owner/Documents/astro-sample/src/pages/index.astro',
  meta: {}
}

when script file is loaded correctly, modInfo is:

{
  id: 'C:/Users/Owner/Documents/astro-sample/src/pages/index.astro',
  meta: {
    astro: {
      clientOnlyComponents: [],
      hydratedComponents: [],
      scripts: [Array]
    },
    vite: { lang: 'ts' }
  }
}

• Only about root (src/pages/index.astro).
  • The info inside for await (const moduleNode of crawlGraph(viteServer, rootID, true)) seems working correctly. So astro components (imported by index.astro) are working correctly.

Problem1 (from 1.0.0-beta.73)

Maybe this commit is related

https://github.com/withastro/astro/commit/3acb9ec264de6ca6eecf49313c0f4d02c3908afa

Bug

I need to reload the browser to load script on astro dev.

What I found

• modInfo is not correct on start dev server.
• After reload, modInfo is correct
• I moved the code as a test, it worked correctly without reload.
  • Matter of timings?

// doesn't work here (reload needed)
// const modInfo = viteServer.pluginContainer.getModuleInfo(rootID);
// addHoistedScripts(elements, modInfo, rootProjectFolder);
for await (const moduleNode of crawlGraph(viteServer, rootID, true)) {
    // ...
}
// here, it works correctly without reload
const modInfo = viteServer.pluginContainer.getModuleInfo(rootID);
addHoistedScripts(elements, modInfo, rootProjectFolder);

Problem2 (from 1.0.0-rc.4)

Maybe this commit is related

https://github.com/withastro/astro/commit/26cc0bbf78320e1797de9b4562ace92c5c03b666

Bug

I need to save the script file to load it on astro dev.

What I found

• I removed this continue as a test, it worked correctly without saving the file.
  • Reload was needed. (matter of problem1)

https://github.com/withastro/astro/blob/5b1facfe291b998c0c6814293b18df211a8f3cd3/packages/astro/src/core/render/dev/vite.ts#L57

However, this condition will skip only imported by style files.... I wonder why this effects script imported by astro 🤔

I hope that this information helps to solve this issue. 🙏

[kagankan]

I probably understand what happens. 👀

When not using tailwind (works correct)

1. load and transform index.astro
2. meta is created and modInfo is correct, so script is correctly loaded.

When using tailwind (page not loading scripts)

1. load and transform index.astro
2. meta is created
3. After compiling style.scss, Vite adds files specified by content option in tailwind.config.js (=including index.astro) to deps.
   1. https://github.com/vitejs/vite/blob/05712323b292492e9161a6ff7b20bfce43097dfb/packages/vite/src/node/plugins/css.ts#L255
   2. at the moment, meta of index.astro is deleted.
4. modInfo is NOT correct, so script is NOT loaded.

Solution

Before getting modInfo, load and transform index.astro again so that create meta (maybe use await viteServer.ssrLoadModule )

https://github.com/withastro/astro/blob/41b81d0d7eab192a0999f9f4601ce27840834875/packages/astro/src/core/render/dev/scripts.ts#L19

I'll make a PR!

[hyvyys]

Probably not useful for the contributors but maybe for someone who just wants to make a website using Astro now: inline scripts seem to not be affected. Replace your

<script>
  foo();
</script>

with

<script is:inline>
  foo();
</script>

and you're good to go (without TypeScript though, if that's your kink).

Note to contributors: I only started to see this issue either after I added SCSS to my setup (did not see it with Tailwind alone) or after upgrading Astro from ^1.0.0-beta.69 to 1.0.6. Yes, I acknowledge it is generally discouraged to use Tailwind and X at the same time.

Update: what I still see happening occasionally is that my tailwind @layer components is being excluded from the css file imported in Layout.astro until I resave the css file. The problem repeats when I save another astro file and is only temporarily resolved by restarting the dev script. Should I open a separate issue?