-
Notifications
You must be signed in to change notification settings - Fork 2.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
[Remix SPA] Error loading .svg assets imported in npm package #8606
Comments
Cross-linking to the discussion that prompted this issue #8534 |
It turns out SVG issue is not actually a Vite issue - it's a complaint coming from In your case, the internal Once you do that, a separate It's hard to narrow it down in this setup because your If you have packages that don't play nicely with ESM (there are a lot of these) then you could also try removing |
We also have dedicated docs for troubleshooting ESM/CJS in Vite |
@pcattori I seem to have the same problem and the troubleshooting section didn't help. I've a similar setup: I have a package, which expects "@package/icons" to exist in the repository and in that packages lib build, it imports it: import icons from "@package/icons/lib/icons/icons.symbols.svg"; In my Library, everything works fine. In Remix, when I start my dev or build, I get the error: In my vite.config.ts I have an alias:
I've tried using the cjsInterop Package (however, I'm trying to reference a node_module svg here, not a JS File). When I try to incorporate @brophdawg11 's suggestion with ssr.noExternal, I also get the error: So I'm currently at an impasse and can confirm that I, too, have the same problem importing non-JS-Files from external packages. |
Reproduction
The reproduction project is a very slimmed down approximation of the actual project that I work on.
My project is an SPA setup with Vite and I tried migrating over to Remix SPA, as a 1st step towards an eventual full fledged migration to Remix.
For the migration I followed the guide and any relevant material.
https://stackblitz.com/edit/vitejs-vite-u1xsya
System Info
Used Package Manager
yarn
Expected Behavior
In my application I am using a package called
@orfium/toolbox
. One of the exported components of that package imports an.svg
asset, which is also included in the package (the import can be found here)The expected behaviour is that when I run the dev server using the
remix vite:dev
command the project should be built and served correctly.This is the case when the project is run as a plain Vite SPA, without using the Remix SPA plugin; everything is bundled and served correctly
Actual Behavior
Whenever the
remix vite:dev
command is used, I am getting the following error:Caution
Unknown file extension ".svg" for /home/projects/vitejs-vite-u1xsya/node_modules/@orfium/toolbox/dist/esm/assets/orfium_logo.svg
(see the reproduction stackblitz)
.svg
loading seems to work only when the import happens in the user's code directly as seen in this working stackblitz.The problem seems to appear only when an external package (
@orfium/toolbox
in this case) is importing non-js files.The text was updated successfully, but these errors were encountered: