How to resolve "Uncaught TypeError: Failed to construct 'Comment': Please use the 'new' operat....." with respect to React JS?

javascript html reactjs react-native

35,057

Solution 1

You cannot call React Component <Comment/> by Comment(). The error requests you to create an instance of the Comment class i.e. something like this var comment = new Comment(). However, in your problem we do not need this.

<body>
  <a href="javascript:RenderComment();">News</a>
  <div id="content"> </div>
</body>

Your React Component <Comment/> should be independent and will be used as an argument to ReactDOM.render(...). Hence the Comment should not have ReactDOM.render(...) function inside it. Also, the anchor element click must not call Comment() as it is not a function which does rendering but rather a Class whose instance is mounted on the DOM. On clicking the <a/> tag, a RenderComment() should be called which will in turn render the <Comment/> component.

var RenderComment = function RenderComment() {
  ReactDOM.render(React.createElement(
                    "div", null, " ", Comment, " "
                  ), document.getElementById("content"));
};

Here, we are rendering your <Comment/> component which you defined using React.createClass.

var Comment = React.createClass({
 // Your component functions and render() method
 // No ReactDOM.render() method here
}

Solution 2

Maybe this will help someone who had the same issue as me...I simply forgot to import the component I was trying to render (using ES6):

import { Comment } from './comment'

Solution 3

Agreed By above answer of Troy Carlson. I faced similar issue in React native project. I have used few built in component(React native) inside but didn't import it. After correctly importing all, error was gone

import {
    FlatList,
    SafeAreaView,
    Text,
    View,
    ...
    } from "react-native";

35,057

Author by

sofs1

Updated on July 05, 2022

Comments

sofs1 almost 2 years

I have a home.jsp where within body

<body>
    <script type="text/babel" src="../resources/scripts/example.js"></script>
     <a href="javascript:Comment();">News</a>
</body>

In a separate example.js, I have the following

alert("I am coming here ... BEEP");

var Comment = React.createClass({
      loadCommentsFromServer: function() {
        $.ajax({
          url: this.props.url,
          dataType: 'json',
          cache: false,
          success: function(data) {
            this.setState({data: data});
          }.bind(this),
          error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
          }.bind(this)
        });
      },
      getInitialState: function() {
        return {data: []};
      },
      componentDidMount: function() {
        this.loadCommentsFromServer();
        setInterval(this.loadCommentsFromServer, this.props.pollInterval);
      },
      render: function() {
        return (
          <div className="comment">       
            <Comment data={this.state.data} />
            <span dangerouslySetInnerHTML={{__html: data}} />
          </div>
        );      
      }
    });

    ReactDOM.render(
      <Comment url="/workingUrl" pollInterval={2000} />,
      document.getElementById('content')
    );

I am getting the following error in Chrome console.

Uncaught TypeError: Failed to construct 'Comment': Please use the 'new' 
operator, this DOM object constructor cannot be called as a function.

I have added React js tags in home.jsp file.

How to fix this? Please help me.

sofs1 over 8 years

1) So RenderComment is a normal JS function , right? If so, can I do like this function RenderComment(){ ReactDOM.render(<div> {Comment} </div>, document.getElementById("content")); } 2) Also Why <div>{Comment}</div>?
Naisheel Verdhan over 8 years

Yes RenderComment() is a normal JS function. In fact, to render React, a normal JS function like this is always required. Usually it is done when the document loads. In your case, it is being done on a button click. That's the only difference.
sofs1 over 8 years

I am getting VM233:1 Uncaught ReferenceError: RenderComment is not defined(anonymous function) @ VM233:1
sofs1 over 8 years

Also please answer this 2) Also Why <div>{Comment}</div>?
Naisheel Verdhan over 8 years

Call the ReactDOM.render(...) function from within a <script type="text/javascript" .../> not "text/babel"
sofs1 over 8 years

The reason why I am getting "Uncaught ReferenceError: RenderComment is not defined(anonymous function) @ VM233:1" is because of first argument "<Comment/>" in ReactDOM.redner(...). The moment I change it as null, Uncaught .... error goes away. I tried <div>{Comment}</div> and still it throws error. So when page loads I get this error. "Uncaught SyntaxError: Unexpected token <" bcas of <Comment\>. Same with <div>{Comment}</div>. From documentation, ReactDOM.render should only be called after the composite components have been defined.
sofs1 over 8 years

Now the question is, how to define composite component Comment, before using ReactDOM.render(..... ?
Naisheel Verdhan over 8 years

Are you using babel to convert your JSX to JS?
sofs1 over 8 years

Nope. Infact I don't use jsx. Just plain React JS.
Naisheel Verdhan over 8 years

<div> {Comment} </div> is JSX. I will change the answer for JS.
sofs1 over 8 years

Warning: React.render is deprecated. Please use ReactDOM.render from require('react-dom') instead.warning @ react.js:18780newFn @ react.js:15963RenderComment @ home:1801(anonymous function) @ VM576:1
Naisheel Verdhan over 8 years

That's correct. See this link. You need both 'react' and 'react-dom' from v0.14.x. Earlier, React.render(...) was used. See this: facebook.github.io/react/docs/getting-started.html
Naisheel Verdhan over 8 years

Let us continue this discussion in chat.
sofs1 over 8 years

Hi, Could you answer this question please stackoverflow.com/questions/35126108/…
dj18 over 5 years

Yes it did help! Interestingly, eslint didn't pick up on the missing import.
righdforsa about 2 years

Lol, yes, this also helped me :facepalm: