CODEWITHSUNDEEP
reactjstypescriptsvgvite
김정수
김정수

Reputation: 841

vite-plugin-svgr does not working in vite, react, and typescript

I am currently creating a web application using vite, react, and typescript. However, even though I used vite-plugin-svgr to use svg in react, it does not work properly.

I've checked several articles, but none of them work.

How can I solve this?

Uncaught SyntaxError: The requested module '/src/assets/search.svg?import' does not provide an export named 'ReactComponent'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    svgr()
  ]
});

//tsconfig.json
{
  "compilerOptions": {
    ...
    "types": ["vite-plugin-svgr/client"]
  },
  "include": ["src", "global.d.ts", "svg.d.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

//package.json
{
  ...
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
  },
  "devDependencies": {
    "@types/node": "^20.8.4",
    "@types/react": "^18.2.15",
    "@vitejs/plugin-react": "^4.0.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.11",
    "vite-plugin-svgr": "^4.1.0"
  }
}

//SearchBar.tsx
import styled from "styled-components";
import { ReactComponent as MainTitle } from "../assets/search.svg";
...

Upvotes: 2

Views: 9464

Answers (4)

Gibson Klogo
Gibson Klogo

Reputation: 1

This github https://github.com/nrwl/nx/issues/19282#issuecomment-1741932100 helped. You should downgrade to v3.3.0, that's if downgrade isn't a problem for you.

Upvotes: 0

iGoodie
iGoodie

Reputation: 162

I had problems finding all loading options under 1 plugin. So I came up with a Vite Plugin that merges all loading strategies in one. Here's vite-plugin-react-rich-svg, it can load svg files as those;

  • Components with SVGR (*.svg?component)
  • Data URL ("data:image/svg+xml;..."), ideal for inline importing on demand: (*.svg?url)
  • Raw HTML string, ideal when you need the file as it is (*.svg?raw)
  • Base64 encoded string, ideal if you need the file for networking purposes (*.svg?base64)

Github Repo: https://github.com/iGoodie/vite-plugin-react-rich-svg

NPM Page: https://www.npmjs.com/package/vite-plugin-react-rich-svg

Happy Coding! :)

Upvotes: 1

Prajwal Kulkarni
Prajwal Kulkarni

Reputation: 1695

I encountered a similar problem recently, and it is occurring only in the latest version of the dependency. Simply downgrade the version to 3.2.0 and the issue should be fixed.

"vite-plugin-svgr":"@^3.2.0"

Upvotes: 0

Fox Desert
Fox Desert

Reputation: 121

import MainTitle from "../assets/search.svg?react";

instead of

import { ReactComponent as MainTitle } from "../assets/search.svg";

Also add reference types on App.tsx

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

or at tsconfig.json

...
"types": [
"vite/client",
"vite-plugin-svgr/client"
]
...

Upvotes: 5

Related Questions