InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/index.c6592bb6.ts') is not a valid name

In my case, I was building my web app and I had created a javaScript file in the IDE IntelliJ. But in the folder, the file name was missing the suffix ".js". So when I used 'npm run dev' command in the terminal, it failed to find the file I had created.

If it is the same for you, then just go to the folder and add the suffix ".js" in the file name.

I think it's a bug in IntelliJ, Hopefully they may fix it later on.

In my case, it was just importing asset like this

import { ReactComponent as PaintIcon } from "./assets/paint.svg";

instead of

import PaintIcon from "./assets/paint.svg";

Thanks.

There might be a dummy file in the name of index which not having ".js" as the suffix.

Or Your index file might not have ".js" suffix.

So rename it

The problem for me was that I was trying to render ts files. React can't 'create elements' from ts files. TS files need to be transpiled to JS. I thought that my babel loader was configured correctly but it wasn't. The babel loader wasn't checking for ts or tsx files.

I got this error also and I don't see it described in the solutions was a mistake on my part of having quotes as part of my Route component assignment.

<Route component="{ NotFound }" />

Removing the quotes solved the issue.

<Route component={ NotFound } />

It means you have code trying to do this:

document.createElement("/static/media/index.c6592bb6.ts")

...directly or indirectly. Since /static/media/index.c6592bb6.ts isn't a valid tag name (like div or span), it fails.

in my case i was importing SVG like:

import SidebarButton from '../../assets/images/sidebarbutton.svg';

And just using that:

<SideBarButtonImg>

This fixed the issue:

const SideBarButtonImg = () => (
  <button style={{height: '100%'}}>
    <img
      src={sidebarbutton}
      alt=""
      style={{
        height: '100%',
        background: '#fff',
      }}
    />
  </button>
)

Just in case it hasn't been specified before, I had the same issue with Home document and it was because I used this:

<Route path="/" component="{Home}" />

Instead of this

<Route path="/" component={Home} />

Note the quote marks. Hope this helps someone.

Not sure if this Helps but I had the same error message and it was flagging the following:

ReactDOM.render ( <App />, document.getElementById('root'));

For me it was a simple mistake (as mentioned by someone already) of not having the file with correct extension. In my case it was SearchBox child that was saved as a text file and not as "SearchBox.js". In your case it would be the "Index" file. Granted I am completely new to this and am still learning, just thought I would share as reading previous responses to your question helped me fix my issue!

First of all, check that there is a file in your source folder or in public folder with no proper extension mean's like "

index

" add a proper extension to it or delete it.

haha, I have the same error and bothered me for a long time.

import GuessLikeList from './GuessLikeList/GuessLikeList.jsx';

and error

Failed to execute 'createElement' on 'Document': The tag name provided ('./GuessLikeList/GuessLikeList.jsx') is not a valid name.

It means can not execute with '.jsx',so you have to change filename extension or import some modules to compile jsx

I got this error. It happened that the name of the js folder had spaces at the end of it. Seems React doesn't recognise space in folder/file names.

In my own case, I had the error in my App.js. The App.js had a wrong name on the route path like this So I had to correct the path name and that fixed my error.

make sure you added .js at the name of your file as well as when you import it

As others have mentioned, one of the reasons this can happen is how you named your file. I for example had component.Js instead of component.js.