Closed jannikbuscha closed 1 year ago
Having the same error here in production build.
Also having the same error here in production build.
I have the same issue. If I use ?raw, the tag name provided is the raw file.
Uncaught (in promise) DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
[...]
+1. Same error here.
Could you try loading the file using a relative path:
import Moon from '../../public/icons/moon.svg?component'
yes, of course
Could you try loading the file using a relative path:
import Moon from '../../public/icons/moon.svg?component'
Any luck on fixing this issue?
This behavior is on purpose.
Files you import directly from /public are copied "as-is". This is standard Vite behavior. For example, try loading a .vue file directly from the /public folder: import Example from '/Example.vue'
, that won't work either.
If the file must necessarily be in the public folder, you can make it work by importing the relative path, for example: import MyIcon from '../../public/my-icon.svg'
.
~I have the same Problem.
However my files are not in public, but unter /src/icons/...
~
Nvm, sorry - I had forgotten to use the svgLoader
in vite.config.ts
In my case, I was using reserved JS/TS words for naming the svg's objects, i.e: import Export from './export.svg?component'
. So, I've changed it to snake case with suffix: import export_icon from './export.svg?component'
Once I added this option into the svgr vite.config.ts it started working again without errors svgr({ include: "**/*.svg", })
I get this error when im trying to load a svg file as component from public/:
Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/icons/moon.svg?component') is not a valid name.
My structure:![image](https://user-images.githubusercontent.com/74017697/179284985-8cc5c012-d857-441c-84c9-8dc08136a1b3.png)
My
env.d.ts
:My
vite.config.ts
:Repo: https://github.com/Backifyco/backify-font-logo-finder