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.

astro/packages/astro/src/core/render/dev/scripts.ts

Line 19 in 5b1facf

const modInfo = viteServer.pluginContainer.getModuleInfo(rootID);

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

3acb9ec

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

26cc0bb

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)

astro/packages/astro/src/core/render/dev/vite.ts

Line 57 in 5b1facf

continue;

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 )

astro/packages/astro/src/core/render/dev/scripts.ts

Line 19 in 41b81d0

const modInfo = viteServer.pluginContainer.getModuleInfo(rootID);

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?

[natemoo-re]

I'm having trouble reproducing this on the most recent version of Astro (1.5.6).

Is anyone still running into this problem and have an up-to-date reproduction?

[natemoo-re]

Looks like there was an upstream issue in Vite that was fixed and has been out. vitejs/vite#9759

Will close this for now, but please re-open if you have a reproduction and we'll be happy to prioritize this!

[natemoo-re]

Actually, reopening this as platformatic/tutorial-movie-quotes-app#3 is pretty recent. Will take a look.

[matthewp]

@natemoo-re are you still planning on looking into this soon? If not I'd like to close it as being old / not ready to work on.

[natemoo-re]

I just checked back on the repro to confirm and this is definitely fixed in the latest!