Error building worker: No loader is configured for “.svg” files
Hey folks, I’ve got a Pages Remix app which uses svg icons. It’s built with vite, and works fine in local development with remix vite:dev, but running locally with wrangler page dev and deploying with
wrangler pages deploy produces an error about the .svg files in my code:
✘ [ERROR] 1 error(s) and 0 warning(s) when compiling Worker.
✘ [ERROR] No loader is configured for “.svg” files: …/app/components/ui/icons/sprite.svg
../app/components/ui/icon.tsx:4:17:
4 │ import href from './icons/sprite.svg'
╵ ~~~~~~~~~~~~~~~~~~~~
✘ [ERROR] Build failed with 1 error:
…/app/components/ui/icon.tsx:4:17: ERROR: No loader is configured for “.svg” files:
…/app/components/ui/icons/sprite.svg
Is there something special I need to do to allow this type of file in my project?13 Replies
I tried this: https://developers.cloudflare.com/workers/wrangler/configuration/#bundling
rules = [
{ type = "Data", globs = ["*/.svg"] }
]
But that did not work.
Cloudflare Docs
Configuration - Wrangler · Cloudflare Workers docs
Use a
wrangler.toml configuration file to customize the development and deployment setup for your Worker project and other Developer Platform …I've also tried type = "Text" which is actually what I think it should be, and that's not working either.
i'm pretty confused about wrangler.toml. pretty sure it's not being used for wrangler pages dev/publish. if i try to pass wrangler an alternate path for config (with -c) it tells me you can't use wrangler.toml with wrangler pages commands. I know that it does use wrangler.toml bindings when running wrangler pages dev. So I figured it would read other config in that file that conforms to the Workers config API, but I guess not...
I'm just super confused at this point, I didn't think serving .svg (or any other static asset) would be such a challenge.
I'm not sure about the SVG issue, but I am pretty sure that pages does not use wrangler.toml outside of your dev environment.
I had an issue where I'd define KV bindings in wrangler.toml, but it would not work on production. Turns out I had to add that setting through the pages dashboard as well
Yes correct. But it does not use the rules setting even in dev, is what I'm finding…
It doesn't seem like Pages lets you configure the bundling step at all
Personally I've never used wrangler dev. For my apps I just run
npm run dev or whatever and the wrangler.toml file is used to spin up temporary local environments for things like KV, D1, and R2This is the reason why binding ID's do not matter in wrangler.toml files for pages apps. They do not access your cloudflare resources at all.
Yep, same. Running the build locally and running it with wrangler pages dev is just a way for me to build and test in miniflare which is more like the cloudflate prod environment
For the most part I'm running my own dev server with remix/vite
And it still wont work? Interesting. Sadly im not experienced enough to help you with this, but I wish you luck on finding a solution.
No, it works fine with my remix/vite dev server.
But running wrangler pages dev or wrangler pages deploy fails with the error about not having a loader for svg
Oh, I see. I have no idea what "loader" is or how to configure it, but you could look through your pages application settings on the cloudflare dashboard and maybe find some sort of setting that you missed.
Remix provides a cloudflareDevProxy which lets you develop and test your code which uses KV, R2 etc
It refers to their internal build. When you deploy, they take what you’ve built, and bundle it again, using esbuild .
So it’s trying to figure out what to bundle/inline into the bundle, and what to leave as external. It encounters my import of an svg file and doesn’t want to do either with it and fails
It sucks, I know what’s wrong just not how to fix it lol
Yeah, thats unfortunate. Good luck with your issue 🙏
thanks 😉 i'll post here if I figure it out
best bet I think is to find a different way to access it rather than importing it as an external file at runtime. some bunding/inlining etc
@Erisa | Support Engineer you were so helpful with my other issue, thank you. Do you have any ideas about this "no loader for .svg files" issue? I think it's the internal ES build complaining, and there's no way for pages to add loaders. With workers you can add something to the wrangler.toml, but that doesn't do anything for pages