I’m moving app from CRA to Vite and have issue with SVG stored in UI library. My app doesn’t import FlagIcon but still Vite throws an error:

No loader is configured for ".svg" files: node_modules/third-party-library/uikit/dist/mjs/components/FlagIcon/assets/ss.svg

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  base: '/app',
  plugins: [svgr(), react(), tsconfigPaths()],
  server: {
    port: 3009,
  },
  build: {
    outDir: 'dist',
  },
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

vite-env.d.ts

/// <reference types="vite/client" />
/// <reference types="vite-plugin-svgr/client" />

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "baseUrl": "src",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": ["vite/client", "vitest/globals"]
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

I get an error:

No loader is configured for ".svg" files: node_modules/third-party-library/uikit/dist/mjs/components/FlagIcon/assets/ss.svg

node_modules/third-party-library/uikit/dist/mjs/components/FlagIcon/FlagIcon.js:57:15:
      57 │         import(`./assets/${isoCode}.svg`)

I want Vite to handle the svg properly.

I tried to modify vite.config.js in various ways found in the Internet but nothing worked. Please help.