
vite-plugin-svgr on Astro 7: transformWithOxc is not a function
Gatsby's gatsby-plugin-react-svg convention gives you *.inline.svg imports that resolve to React components. Porting to Astro, the closest equivalent is vite-plugin-svgr with the ?react query suffix, which is what we used and what worked on Astro 5 and 6. On Astro 7 the same project crashed the build:
TypeError: transformWithOxc is not a functionvite-plugin-svgr@5.2.0 is the latest release, published in April 2026, and upgrading does not make this go away. As of August 2026 there is nothing newer, and as it turns out, there is also nothing for the plugin to fix: the problem was in our dependency tree.
What the plugin is doing
It does have a rolldown branch. It checks whether it is running under rolldown, and if it is, picks a different transform:
if ((this?.meta)?.rolldownVersion != null) {
const { transformWithOxc } = await import("vite");
return {
code: (await transformWithOxc(componentCode, id, { lang: "jsx", ...oxcOptions })).code,
map: null
};
}
const { transformWithEsbuild } = await import("vite");So it detects rolldown correctly, and then imports transformWithOxc from vite, and in our project that import came back undefined.
Two Vites, one import
Astro 7 carries its own Vite 8, and vite@8.2.1 does export transformWithOxc. But our project also had vite@7.3.2 as a direct dependency, kept around for loadEnv in a couple of config scripts, and Vite 7 does not have that export. The plugin takes vite as a peer dependency, which resolves to the project's own copy when there is one, not to the copy inside Astro. So the rolldown check says yes, and the transform it then reaches for is not there.
This is easy to confirm in a minimal project. A clean Astro 7 site with vite-plugin-svgr@5.2.0 and a single ?react import builds fine. Add vite@^7 as a direct dependency and the build fails with exactly this error. Change that dependency to vite@^8 and it builds again. One line in package.json, in both directions.
It also explains why Astro 5 and 6 never complained about the same setup. There, this.meta.rolldownVersion is null, so the plugin takes the transformWithEsbuild branch, and Vite 7 exports that one. The mismatch was sitting in the project the whole time. Astro 7 just switched to the branch that exposed it.
The fix
Align your project's own vite dependency with the Vite 8 that Astro 7 ships, or remove it if nothing in your project imports Vite directly. That is the whole fix. There is no need to stay on Astro 6 or to wait for a plugin release, and the same goes for any other Vite plugin that starts throwing oxc errors after the upgrade.
Why we dropped the plugin anyway
We had two ?react imports in the whole site, so instead of keeping a plugin for that we wrote both SVGs out as plain React components that spread their props onto the svg element, which is what the plugin's output did and what the call sites were relying on for className. For an icon-sized graphic that is about as much code as the import was saving, and it removed one more build dependency carried over from the Gatsby era.
This is one of the smaller things that came out of porting this site from Gatsby to Astro. If you are looking at the same move, we do these migrations and can tell you what yours would involve.
Share on Social Media
Let’s weave
your vision together
Ready to take your web presence to the next level?
We're eager to learn more about your website needs and show you how we can help!
