Failed to execute 'createElement' on 'Document': The tag name provided is not a valid name

See original GitHub issue

I’m trying to have react-svg-loader 2.1.0 to load SVG using webpack, but I’m getting this error:

Failed to execute 'createElement' on 'Document': The tag name provided ('/packs/bundles/Project/components/LogoPage/images/name-f15c8edd029d0f795dd71e3e39079866.svg') is not a valid name I configured everything vanilla from the docs:

//webpack config: 
module: {
    loaders: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: "babel-loader"
          },
          {
            loader: "react-svg-loader",
            options: {
              jsx: true // true outputs JSX tags
            }
          }
        ]
      }
    ]
  }

the import statement in my react component:

import Logo from "./images/name.svg"; Not sure what other info might be relevant.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:24
  • Comments:31

github_iconTop GitHub Comments

49reactions
ArturBaybulatovcommented, May 6, 2020
import {ReactComponent as ArrowDownIcon} from '../assets/arrow-down.svg';

Importing like this worked for me.

The SVG is imported as a real react component, so can be used like this:

<ArrowDownIcon/>

Extra params are automatically accepted:

<ArrowDownIcon className="full-width" height={123}/>
47reactions
pedromagalhaescommented, Mar 30, 2018

I solved this issue using a Babel Plugin: https://www.npmjs.com/package/babel-plugin-inline-react-svg

Installation: yarn add babel-plugin-inline-react-svg --dev

Component import React from 'react'; import CloseSVG from './close.svg'; const MyComponent = () => <CloseSvg />;

Babel { "plugins": [ "inline-react-svg" ] }

Read more comments on GitHub >

github_iconTop Results From Across the Web

Failed to execute 'createElement' on 'Document': The tag ...
Failed to execute 'createElement' on 'Document': The tag name provided ('./GuessLikeList/GuessLikeList.jsx') is not a valid name. It means can ...
Read more >
Failed to execute 'createElement' on 'Document': The tag ...
I am getting the error: "DOMException: Failed to execute 'createElement' on 'Document': The tag name provided is not a valid name".
Read more >
InvalidCharacterError: Failed to execute 'createElement' on ...
Why react mui pagination component causes Failed to execute 'createElement' on 'Document': The tag name provided ('/.js') is not a valid name. error?...
Read more >
The tag name provided ('$') is not a valid name - Questions
It happens at runtime when importing a single-file component that imports many other components. For example: <template> <div class="page"> ...
Read more >
LayoutTests/fast/dom/Document/createElement-invalid-names ...
PASS document.createElement('.Ascii') threw exception InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('.Ascii') ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found