Uncaught DOMException: Failed to execute 'createElement' on 'Document' when loading from public

[jannikbuscha]

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:

My env.d.ts:

/// <reference types="vite/client" />
/// <reference types="vite-svg-loader" />

My vite.config.ts:

import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import svgLoader from 'vite-svg-loader'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), svgLoader()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Repo: https://github.com/Backifyco/backify-font-logo-finder

[luucasrb]

Having the same error here in production build.

[htharoldht]

Also having the same error here in production build.

[Fulbert]

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)  -->
[...]

[aboutZZ]

+1. Same error here.

[jpkleemans]

Could you try loading the file using a relative path:

import Moon from '../../public/icons/moon.svg?component'

[htharoldht]

yes, of course

Could you try loading the file using a relative path:

import Moon from '../../public/icons/moon.svg?component'

[francesco-hayes]

Any luck on fixing this issue?

[jpkleemans]

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'.

[IARI]

~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

[luucasrb]

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'

[dusan990]

Once I added this option into the svgr vite.config.ts it started working again without errors svgr({ include: "**/*.svg", })