-
-
Notifications
You must be signed in to change notification settings - Fork 7.5k
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
Load SVG files with esbuild's api.LoaderText with in js.Build #9978
Comments
Has this been fixed? |
@stackkrocket the issue is open and there are no PRs referencing it == not fixed. |
@bep From, Although I would love to investigate further and take a crack at this for enhancement. |
From what I understand @zmsy the solution to this is to add https://github.com/gohugoio/hugo/blob/master/resources/resource_transformers/js/options.go#L134 Note that any JavaScript ESBuild plugins you find on the interweb is not relevant for Hugo. |
It is a quick fix actually. I can quickly add this. |
@bep I think I may have missed some few pointer in the contributing guidelines. I wish to correct them and make subsequent adequate changes that fixes this issue. |
This seemed like the case. I haven't had the time yet to actually try building the repo with that change made and testing it, but seems like @stackkrocket is already on it 👍 Seemed like a simple update and just wanted to submit the issue first. NOTE: For anybody reading this issue - If you're importing SVG files and you don't want Typescript to flag them with an error, you can add a declare module "*.svg" {
const content: string;
export default content;
} |
@bep Have you had time to go through my edited commit? It seems I have passed all the checks to make a successful commit/PR. |
On my site I've got a custom color theme selector, and I've got a Preact element where I'd like to inline an SVG so I can apply styles to it, and make it responsive to CSS custom properties. This is currently achieved using a custom
Figure
component:Below, using the component like so doesn't work. You'll get something akin to
JSBUILD: failed to transform "ts/index.tsx" (text/tsx): "my-icon.svg:1:0": Unexpected "<"
If you switch the file extension to
.txt
, you can import the file and render it as expected. This looks like it's because".svg"
is currently not supported in the extensions array: https://github.com/gohugoio/hugo/blob/master/resources/resource_transformers/js/options.go#L134It looks like loading SVG as text is the documented approach for using this in ESBuild, and that seems like a nice default to me.
The text was updated successfully, but these errors were encountered: