Wasp-lang•3d 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.

3 Replies

kapa.ai•3d 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•3d 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•3d 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" />

Gaming

Programming

Adding svgr plugin to the vite config