vite-plugin-svgr: Plugins don't work

40/5000 I’m having a problem. Your plug-in doesn’t work after using it. I don’t know what’s wrong with the configuration. The browser returned the following error:

Uncaught DOMException: Failed to execute ‘createElement’ on ‘Document’: The tag name provided (‘/src/images/smcLogo.svg’) is not a valid name.

my code is this:

import React, { Component } from 'react';
import cssObj from './Logo.css';
import Icon from '@ant-design/icons';
import {ReactComponent as SMCLogo } from '@/images/smcLogo.svg';
class Logo extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (

            <div style={{width: this.props.width, height: this.props.height, paddingTop:'10px' }} >
                <div className={cssObj.LogoLeft}>
                    <Icon component={()=><SMCLogo width="70px" height="22px"  fill="#B7C1CF"/>} />
                </div>
            </div>

        );
    }
}

export default Logo;

Looking forward to your reply. thank you

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 8
Comments: 17 (1 by maintainers)

Most upvoted comments

I’m having an issue here too where my svg files are not optimized by svgo at all. Here’s the config

svgrPlugin({
      svgrOptions: {
        svgo: true,
        icon: false,
        svgoConfig: {
          plugins: [
            { moveGroupAttrsToElems: true },
            { convertPathData: true },
          ],
        },
      },
    })],

alkanna on Jan 11, 2022

using svgr in electron and vite, same problem, warning like:

react-dom.development.js:26923 Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/src/aa.svg?react') is not a valid name.
    at createElement (http://localhost:5173/node_modules/.vite/deps/chunk-J4JQZ5XV.js?v=15f35e51:7509:42)
    at createInstance (http://localhost:5173/node_modules/.vite/deps/chunk-J4JQZ5XV.js?v=15f35e51:8345:28)
    at completeWork (http://localhost:5173/node_modules/.vite/deps/chunk-J4JQZ5XV.js?v=15f35e51:16277:34)
    at completeUnitOfWork (http://localhost:5173/node_modules/.vite/deps/chunk-J4JQZ5XV.js?v=15f35e51:19215:24)
    at performUnitOfWork (http://localhost:5173/node_modules/.vite/deps/chunk-J4JQZ5XV.js?v=15f35e51:19200:13)
    at workLoopSync (http://localhost:5173/node_modules/.vite/deps/chunk-J4JQZ5XV.js?v=15f35e51:19131:13)
    at renderRootSync (http://localhost:5173/node_modules/.vite/deps/chunk-J4JQZ5XV.js?v=15f35e51:19110:15)
    at recoverFromConcurrentError (http://localhost:5173/node_modules/.vite/deps/chunk-J4JQZ5XV.js?v=15f35e51:18730:28)
    at performConcurrentWorkOnRoot (http://localhost:5173/node_modules/.vite/deps/chunk-J4JQZ5XV.js?v=15f35e51:18678:30)
    at workLoop (http://localhost:5173/node_modules/.vite/deps/chunk-J4JQZ5XV.js?v=15f35e51:195:42)

Including svg like

// src/app.tsx line 7
import CustomIcon from './aa.svg?react';

Including svgr in vite config

// vite.main.config.ts

// line 2
import svgr from 'vite-plugin-svgr';

// line 12
plugins: [svgr()],

A minimal repo is here:

https://github.com/zzswang/for-svgr-issue

Any ideas? Thanks

zzswang on Sep 23, 2023

I had the same problem as I didn’t notice latest breaking change of V4

If you use the latest version vite-plugin-svgr (v4), you have to update the import syntax as follows

### before
import { ReactComponent as Logo } from "./logo.svg";

## after
import Logo from "./logo.svg?react";

antekai on Sep 20, 2023

I figured out and it seems working as a pie. here is full config which will make things better for newcomers

svgr({
      svgrOptions: {
        plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
        svgoConfig: {
          plugins: ['preset-default', 'removeTitle', 'removeDesc', 'removeDoctype', 'cleanupIds'],
        },
      },
    }),

javaharut on Jun 22, 2023

@alkanna I meet same issue, I fix my issue by by add @svgr/plugin-svgo and @svgr/plugin-jsx, see https://github.com/pd4d10/vite-plugin-svgr/issues/49 for more details

JiangWeixian on Jan 15, 2023

Sorry thought it was obvious.

jsxRuntimeExports.jsx("svgGithub", {}) }),

React.createElement("svgFacebook", null)

The element isn’t actually created, its null/empty.

pcfreak30 on Jul 30, 2023

I suggest everyone having trouble to just fire up a debugger to see what is going on. This makes it quite clear without waiting for anyone else to figure it out (which is not likely to happen).

Just

Figure out which plugins are loaded in which order
Open up the plugin modules in node_modules in your editor and put breakpoints in them, or insert debugger statements
Figure out how to run Vite inside your debugger (open node_modules/.bin/vite to see)
Profit

fatso83 on Jun 22, 2023