Uncaught Error: Minified React error #200

javascript html reactjs frontend babeljs

16,624

Solution 1

Whenever you see such an error you can visit the page it suggests to see the full error. So, when opening https://reactjs.org/docs/error-decoder.html?invariant=200 , you can see that

Target container is not a DOM element,

meaning that you try to render your app into a wrong dom node. The problem is here:

var destination = document.getElementsByClassName("container");,

you need to use getElementById instead of getElementsByClassName

Solution 2

Just change this

var destination = document.getElementsByClassName("container");

var destination = document.getElementById("container");

16,624

Author by

Savannah Madison

Updated on June 15, 2022

Comments

Savannah Madison almost 2 years

I am a beginner in React,Not able to debug the error

This is my code using components in React.

I am trying to simulate a google Search Image result with Image,caption and Link, but on the browser all I see is an empty screen.

The error statement is :

Uncaught Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Object.I.render (react-dom.production.min.js:238)
    at <anonymous>:99:10
    at n (babel.min.js:12)
    at r (babel.min.js:12)
    at o (babel.min.js:12)
    at u (babel.min.js:12)
    at E (babel.min.js:1)

The error doesn't specify which line or anything. and the link says

The full text of the error you just encountered is:
Target container is not a DOM element.

    <html>
        <head>
            <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
            <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
            <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
        </head>
    
        <body>
            <div id = "container"></div>
            <script type = "text/babel">
                var destination = document.getElementsByClassName("container");
    
                class ResImg extends React.Component{
                    render(){
                        return(
                            <img src = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.insider.com%2Fthe-batman-2021-movie-details-information-2020-2&psig=AOvVaw0AeAaWCyxcHCYi3PRMc6VS&ust=1601364735924000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCJi85taqi-wCFQAAAAAdAAAAABAD"></img>
                        )
                    }
                }
    
                class ResCaption extends React.Component{
                    render(){
                        return(
                            <p>Batman 2021</p>
                        )
                    }
                }
    
                class ResLink extends React.Component{
                    render(){
                        return(
                            <a href = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.insider.com%2Fthe-batman-2021-movie-details-information-2020-2&psig=AOvVaw0AeAaWCyxcHCYi3PRMc6VS&ust=1601364735924000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCJi85taqi-wCFQAAAAAdAAAAABAD"></a>
                        )
                    }
                }
    
                class SearchRes extends React.Component{
                    render(){
                        return(
                            <div>
                                <ResImg/>
                                <ResCaption/>
                                <ResLink/>
                            </div>
                        )
                    }
                }
    
                ReactDOM.render(
                    <SearchRes/>,destination
                )
            </script>
        </body>
    </html>