InvalidCharacterError：无法在“文档”上执行“createElement”：提供的标签名称（“/static/media/index.c6592bb6.ts”）不是有效名称

Question

I have a react app that I am trying to convert to use typescript

but I'm getting the following error: InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/index.c6592bb6.ts') is not a valid name.

What does this error even mean? It looks like it doesn't like the typescript extension

Any ideas how to fix?

Answer 1

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.

Answer 2

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.

Answer 3

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 } />

Answer 4

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.

Answer 5

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.

Answer 6

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!

Answer 7

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.

Answer 8

I'm usually a lurker, but I've never seen two people talk past each other so completely before. One group is talking about upgrading a react JS project to typescript, and the other group is focused on the error message and why it would happen in a JS environment.

This error message happens at this step:

"Now rename ClientApp\\src\\App.js to ClientApp\\src\\App.tsx"

... in THIS process:

https://jonhilton.net/new-aspnet-core-react-project/

I have no solution yet. Still looking.

Answer 9

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

Answer 10

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.

Answer 11

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.

Answer 12

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.

Answer 13

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

Answer 14

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>
)

Answer 15

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 .

Answer 16

确保在文件名以及导入时添加了 .js