Why cannot render HTML with ReactJS

Question

I have seen online plenty of examples and tests using React and typescript where they issue something like this:

import * as ReactDOM from 'react-dom';

ReactDOM.render(
 <h1>Hello world!!</h1>, //or any other valid html snippet
 document.getElementById('root') as HTMLElement
);

However, when I try to reproduce those multiple examples in my machine, I get, first a highlight error from VS code, and then when I try to bundle I get this error:

TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

If instead of putting the HTML as argument of the function I write a my SimpleComponent.render(), the bundle will be produced without errors.

What is wrong with that code snippet?

Michal · Accepted Answer · 2018-08-18 08:41:04Z

4

Try to add import * as React from 'react'. <h1> is React component (React.createClass('h1') after transpile JSX to JavaScript), but you have imported only ReactDOM.

edited Aug 18, 2018 at 8:41

answered Aug 18, 2018 at 8:34

Michal

2,1013 gold badges31 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

T.J. Crowder Over a year ago

...because once the JSX is transpiled, that <h1>Hello world!!</h1> becomes React.createElement("h1", /*...*/);.

JJ F Over a year ago

Great! that worked. Do you know the reason why needs that reference if the html is hardcoded there? It does not make sense to me.

Hemadri Dasari Over a year ago

You no need to reference it. This still works but as HTMLElement is wrong. This is valid ReactDOM.render( <h1>Hello world!!</h1>, document.getElementById('root') );

T.J. Crowder Over a year ago

@HemadriDasari - The OP is using TypeScript. The as HTMLElement is correct.

Hemadri Dasari Over a year ago

Ok sorry I don’t no typescript

Collectives™ on Stack Overflow

Why cannot render HTML with ReactJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related