CODEWITHSUNDEEP
javascriptreactjsbabeljs
Thomas Charlesworth
Thomas Charlesworth

Reputation: 1839

React JS Uncaught ReferenceError : require is not defined

I'm currently trying to get React to work by CDN.

When I run the index.html file manually it works. But when I put my files onto a web server like XAMPP, I get hit with

Uncaught ReferenceError : require is not defined

index.html:

<html>
    <head>
        <title>TestApp</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
        <script src="./node_modules/moment/moment.js"></script>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel" src="./react.js"></script>
    </body>
</html>

react.js:

const Aest = ({test}) =>  {
    return (
        <div>WATss {test}</div>
    )
}
class Test extends React.Component{
    constructor(){
        super()
        this.state={
            test: 0
        }
    }
    inc(){
        this.setState({
            test: ++this.state.test
        })
    }
    render(){
        return(
            <React.Fragment>
                <div>test: {this.state.test}</div>
                <button onClick={()=>this.inc()}>Add</button>
                <Aest test={this.state.test}/>
            </React.Fragment>
        )
    }
}
ReactDOM.render(<Test />,document.getElementById('app'));

Upvotes: 2

Views: 1848

Answers (1)

Sujit.Warrier
Sujit.Warrier

Reputation: 2889

require is not understood by default in some web severs, to allow it to be recognized first. use require js. npm install it. and import it.

Upvotes: 2

Related Questions