Wasp•2mo ago

Adding svgr plugin to the vite config

Hey! I want to import svgs as React svg components instead of urls. So I installed the svgr vite plugin https://www.npmjs.com/package/vite-plugin-svgr. Locally, it works perfectly but I can't deploy because the web-server folder doesn't build. The issue is

Cannot find module '../icons/icon.svg?react' or its corresponding type declarations.

21 import Icon from "../icons/dexindex.svg?react";

Cannot find module '../icons/icon.svg?react' or its corresponding type declarations.

21 import Icon from "../icons/dexindex.svg?react";

It seems like the web-server vite config correctly merges with the one from the root folder but it's not installed, or at least it doesn't show up in web-server's package.json. Any ideas? I guess this issue would apply to any other vite plugin.

6 Replies

kapa.ai•2mo ago

Hi @Joaquim. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your question about adding the SVGR plugin to the Vite config in Wasp, I can provide some insights based on the available information: 1. Wasp allows customization of the Vite config by editing the vite.config.ts file in your project root directory. Wasp will merge your custom config with its default Vite config Custom Vite Config (https://wasp-lang.dev/docs/project/custom-vite-config). 2. The issue you're experiencing seems to be related to the build process and how Wasp handles dependencies for the web server. 3. One potential solution is to ensure that the SVGR plugin is properly installed and configured in your project's root package.json and vite.config.ts. 4. You might need to modify the Vite config to explicitly include the SVGR plugin for both the client and server builds. Here's a suggestion on how to do this: In your root vite.config.ts, you can try adding the SVGR plugin like this:

   import svgr from 'vite-plugin-svgr'
   import { defineConfig } from 'vite'

   export default defineConfig({
     plugins: [svgr()],
     // other config options...
   })

   import svgr from 'vite-plugin-svgr'
   import { defineConfig } from 'vite'

   export default defineConfig({
     plugins: [svgr()],
     // other config options...
   })

5. If the issue persists, you might need to investigate how Wasp handles dependencies for the web server build. It's possible that the web server build process is not correctly inheriting or recognizing the SVGR plugin. 6. There's an ongoing discussion about improving Wasp's support for custom Vite configurations and plugins. This issue might be related to that Allow extending the Vite config (https://github.com/wasp-lang/wasp/issues/1085). If these suggestions don't resolve the issue, you may want to reach out to the Wasp community or maintainers directly, as this seems to be a specific case that might require more in-depth investigation of how Wasp handles Vite plugins during the build process. Remember, when adding custom Vite plugins or configurations, it's important to be cautious as it can potentially break Wasp's client build process Custom Vite Config (https://wasp-lang.dev/docs/project/custom-vite-config). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Joaquim, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•2mo ago

This is something I'd need to test out and see what happens. Could you share your Vite config file and some example of using the SVG images? 🙂

JoaquimOP•2mo ago

Yeah for sure! This is what I do. I'm unsure on what happens during the build process though... I have to think more about it Run: npm install --save-dev vite-plugin-svgr

// vite.config.ts
import { defineConfig } from "vite";
import svgr from "vite-plugin-svgr";

export default defineConfig({
  plugins: [svgr()],
  server: {
    open: true,
  },
});

// vite.config.ts
import { defineConfig } from "vite";
import svgr from "vite-plugin-svgr";

export default defineConfig({
  plugins: [svgr()],
  server: {
    open: true,
  },
});

Download an icon like: https://www.svgrepo.com/download/535115/alien.svg somewhere into src/ import it anywhere in react like: import Icon from "./src/icon.svg?react For typescript safety, not sure if it's required to replicate well:

// vite-env.d.ts
/// <reference types="vite-plugin-svgr/client" />

// vite-env.d.ts
/// <reference types="vite-plugin-svgr/client" />

miho•2mo ago

I did what you said above, I get the alien in dev ✅ Then I did:

wasp build
cd .wasp/build/web-app
npm install
npm run build
# Serve just the built client
npx serve build

wasp build
cd .wasp/build/web-app
npm install
npm run build
# Serve just the built client
npx serve build

and I also got the alien in the built client. Then I tried doing wasp deploy fly launch ... and also deployed successfully. Could you share the exact SVG you used, maybe it's due to file-size we get different things?

JoaquimOP•2mo ago

Hm perfect indeed. I must be screwing up somehow. I'll also replicate from a new project and compare the build folder. I'm at work, but will let you know how it went later. Thanks a ton for the help. At least i know it works.

miho•2mo ago

I wouldn't yet say you made a mistake, maybe my specific SVG worked and maybe yours didn't. If it still fails for you, let's figure it out together 🙂

Gaming

Programming

Adding svgr plugin to the vite config