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

Server builds fail with Vue plugin #5063

Closed
1 task done
marshallswain opened this issue Oct 12, 2022 · 7 comments · Fixed by #5212
Closed
1 task done

Server builds fail with Vue plugin #5063

marshallswain opened this issue Oct 12, 2022 · 7 comments · Fixed by #5212
Assignees
Labels
- P4: important Violate documented behavior or significantly impacts performance (priority)

Comments

@marshallswain
Copy link

marshallswain commented Oct 12, 2022

What version of astro are you using?

1.4.7

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

Cloudflare

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

Build fails when using @astrojs/vue together with a server plugin.

Rollup tries to bundle the src attribute of img tags for images in the public directory. The problem only occurs when doing server build with the Vue plugin. I tried two plugins:

  • @astrojs/cloudflare
  • @astrojs/node

You can see a screenshot of the error in the repro repo: https://github.com/marshallswain/my-astro-site

Link to Minimal Reproducible Example

https://github.com/marshallswain/my-astro-site

Participation

  • I am willing to submit a pull request for this issue.
@matthewp
Copy link
Contributor

That's pretty odd isn't it. This doesn't happen with regular SSG builds? My first instinct was that the Vue plugin was including these in the build, but perhaps something else is going on here.

@matthewp matthewp added the - P4: important Violate documented behavior or significantly impacts performance (priority) label Oct 13, 2022
@marshallswain
Copy link
Author

This doesn't happen with regular SSG builds?

Yeah, thankfully the SSG builds work just fine. It's only when building with a server plugin.

@marshallswain
Copy link
Author

Update on version numbers. The problem continues with the latest versions:

@astrojs/cloudflare  ^3.0.0  →  ^3.1.0
astro                ^1.4.7  →  ^1.5.0

@bluwy
Copy link
Member

bluwy commented Oct 20, 2022

Looks like this is because we turn off publicDir when building for SSR as we don't want to copy the public assets in SSR builds (only client builds).

This means that you can't do import imgUrl from "/favicon.svg" in SSR, which is what @vitejs/plugin-vue does under-the-hood for the repro's code.

This can be workaround by moving the asset into src (out of /public), or disable absolute imports like:

integrations: [
	vue({
		template: {
			transformAssetUrls: {
				includeAbsolute: false,
			},
		},
	}),
]

Trying to find a solution on the Vite side at the meantime so it works better.

@bluwy
Copy link
Member

bluwy commented Oct 24, 2022

Update: We discussed vitejs/vite#10550 a bit in the last Vite team meeting, but we'd need Evan's input as this is a new feature. I'm hoping to get it in the next Vite 3.2 release, which might be happening at the end of the week.

@marshallswain
Copy link
Author

Thank you for fixing the issue @bluwy! I've become accustomed to fixing things myself, so I'm feeling spoiled, right now. This must be what it feels like to be royalty. :) Thank you, again.

@bluwy
Copy link
Member

bluwy commented Oct 28, 2022

No problem 😄 This turned out to be quite an oversight in Vite's SSR implementation and glad it was surfaced!

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.

3 participants