Giters

slinkity / slinkity

To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them 🚀

Home Page:https://slinkity.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

CSS Module files not resolved in production build for components rendered as an island

nickrttn opened this issue · comments

commented

Describe the bug

For components rendered as an island in a template, any CSS Modules files are not being resolved by Vite during a production build with errors like

/src/_islands/Container.module.css doesn't exist at build time, it will remain unchanged to be resolved at runtime

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://github.com/tus/tus.io/tree/11ty
  2. Clone the repo
  3. npm install
  4. npm run build

Expected behavior

Module resolution to work as expected in all cases.

commented

I tried to reproduce but there are dependency resolution issues in that repo unrelated to slinkity. npm install fails due to lanyon deps. If you share a minimal reproducible example I will try again.

commented

Hey @insanity54, thanks for looking into this!

Did you check out the branch I linked to? It shouldn't have Lanyon in the dependencies at all afaik. If so, I'll take a look to see what's up!

commented

@nickrttn you are correct. That's my mistake, I accidentally checked out your main branch. Thanks for the clarification.

I got your site built and I'm seeing the same error/warning(?).

vite v3.2.5 building for production...

/src/_islands/TransloaditBar/style.module.css doesn't exist at build time, it will remain unchanged to be resolved at runtime

/src/_islands/Container.module.css doesn't exist at build time, it will remain unchanged to be resolved at runtime
transforming (6) blog/index.html
/src/_islands/PostLayout/style.module.css doesn't exist at build time, it will remain unchanged to be resolved at runtime

I used npx http-server ./_site to preview. I was surprised to see /src/_islands/(...) requests from the browser.

 x86_64; rv:109.0) Gecko/20100101 Firefox/111.0"
[2023-04-14T00:19:32.967Z]  "GET /src/_islands/TransloaditBar/ua-flag.svg" Error (404): "Not found"
[2023-04-14T00:19:32.968Z]  "GET /src/_islands/Navigation/wordmark.png" Error (404): "Not found"
[2023-04-14T00:19:32.968Z]  "GET /src/_islands/Home/tus1--no-io.png" Error (404): "Not found"
[2023-04-14T00:19:32.968Z]  "GET /src/_islands/Social/community-forum-35a78b.svg" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/111.0"
[2023-04-14T00:19:32.969Z]  "GET /src/_islands/Social/community-forum-35a78b.svg" Error (404): "Not found"
[2023-04-14T00:19:32.995Z]  "GET /assets/index.b411a600.css" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/111.0"

There are 404s mixed in with the 200s. Some css, svg, and png files are failing to load because there is no /src/_islands directory structure in _site/

Looking at debug output from the 11ty build (DEBUG="vite:*" npm run build), I'm seeing that vite is actually resolving the css file in question.

  vite:resolve 0.08ms ./Container.module.css -> /home/chris/Documents/tus.io/src/_islands/Container.module.css +50ms
  vite:resolve 0.06ms /src/_islands/Container.module.css -> /home/chris/Documents/tus.io/src/_islands/Container.module.css +0ms

vite is transforming it as well.

  vite:transform 2.29ms /src/_islands/Container.module.css +25ms

The problem remains that I don't see any of the transformed css from Container.module.css in the _site output directory. I'm not sure why, but hopefully I've given you some food for thought. I'm guessing this is a Vite(?), rollup(?), typescript(?), Eleventy(?) config issue, something to do with paths. I don't think /src/_islands/ should show up in the requests of a built site.

commented

Yes, this is a pretty strange result! Might be something in module resolution for islands. I'll see if I can figure it out.