Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Astro doesn't bundle imports from Vue appEntrypoint during build #6827

Closed
1 task
vincerubinetti opened this issue Apr 12, 2023 · 3 comments · Fixed by #9490
Closed
1 task

Astro doesn't bundle imports from Vue appEntrypoint during build #6827

vincerubinetti opened this issue Apr 12, 2023 · 3 comments · Fixed by #9490
Assignees
Labels
- P4: important Violate documented behavior or significantly impacts performance (priority)

Comments

@vincerubinetti
Copy link

vincerubinetti commented Apr 12, 2023

What version of astro are you using?

2.2.2

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

None

What package manager are you using?

yarn

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

This is a strange issue and took me a long time to track down. The issue seems to occur when "globally" importing CSS and global Vue components in a custom appEntrypoint. The bundler does not include the CSS files (maybe JS files too, I'm not sure) from these things, but only when running build. When running dev, it behaves as I would expect.

Minimal Reproducible Example:

astro-bundle-issue.zip
(Sorry for not making a CodeSandbox, but I tend to delete those later. And this was small enough to attach. This will be more permanent).

Workaround:

The "solution" is to do these global imports in my /layouts/Layout.astro file, as you can see commented out in the attached example. Uncomment those lines to watch the appropriate styles actually be included in the build.

Expected behavior:

I would expect imports in the appEntrypoint to be properly included in the resulting bundle, and not have to do all global imports in an .astro file. At the very least, the behavior should be consistent between build and dev, and well documented, as this will cause very insidious deployment bugs for people.

Link to Minimal Reproducible Example

See attached zip file for example

Participation

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

Unfortunately I would have no idea where to start debugging this in the actual source code. Probably can't dedicate the time to it anyway.

@matthewp
Copy link
Contributor

Thanks @vincerubinetti. This is happening because this file is not actually imported by any pages. That's how Astro knows which pages CSS belongs to. In this case it belongs to none.

So I understand the use-case properly is it that you would import global components in this file and no where else, and you expect those component styles to always be included on every page?

@vincerubinetti
Copy link
Author

vincerubinetti commented Apr 28, 2023

Yes that would be my expectation.

In SPA frameworks/libraries, doing a global import "styles.css imports it everywhere, no matter which file you're importing it in (assuming the file itself is imported somewhere from the entrypoint and isn't an island). I understand non-SPA frameworks are different, especially Astro.

If I recall correctly, Next.js forces you to put global styles in the main App file (something I'm pretty sure is clearly spelled out in their docs), presumably for the same reason as you're insinuating here: wanting a distinction between app-global and page-global CSS? In this case, I think it makes sense to allow app-global CSS imports in the appEntrypoint, as this is where other Vue global things are defined, and not just in Layout.astro or something.

If the team doesn't want to do this, that's fine, but I would suggest some things:

  1. Make sure the behavior is consistent between dev and build for early discovery of the problem.
  2. Add a note, maybe to this section of the docs, about where you can and cannot import app-global CSS (currently it shows where you can, but doesn't spell out any limitations).
  3. Maybe some console warning when doing global CSS imports where you shouldn't?

@natemoo-re
Copy link
Member

Sorry for the lack of movement on this issue, folks. I was finally able to dedicate enough time to debug this and come up with a fix. PR is here #9490

natemoo-re added a commit that referenced this issue Jan 5, 2024
* fix(#6827): ensure `appEntrypoint` is referenced in Vue components

* chore: add test

* chore: add changeset

* fix: windows handling

* Update packages/integrations/vue/src/index.ts

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>

* chore: address review feedback

* chore: update lockfile

---------

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
- P4: important Violate documented behavior or significantly impacts performance (priority)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants