jQuery is not defined even though it loads correctly

Question

I'm having issues using jQuery in my code. Looking at Chromes developer tools i see a status of 200 next to the jQuery library, so it seems to load correctly. Ive also ensure i load it before my App.js main javascript. Does anyone have any idea why im getting this error?

Heres my index.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />


    <!-- jquery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
    //<![CDATA[

      src="../components/App.js"

    //]]>

  </script>

Heres where im using jQuery inside App.js :


class App extends React.Component {

    constructor(props){
        super(props)

        this.state= {fileChanged:false, fileChosenForComment:null, currentAuthor: null, files:null, fileChangeCounter:-1}
    }

    componentDidUpdate =()=>{

        jQuery(document).ready(function () {console.log('inside DidUpdate method');

            jQuery('#file-list').on('click', this.updateClickCounter);
        });
    }

    updateClickCounter = () =>{

        this.setState({fileChangeCounter:this.state.fileChangeCounter + 1}, console.log(this.state.fileChangeCounter))
    }

here is the render method inside the App class

render(){
        return (
            <div className = "ui container" >

                <div className = " ui relaxed grid">
                    <div className = "two column row">
                        <div className = " column uploader float right upload-button" >
                            <h2>File Uploader</h2>
                            <input 
                                type="file"
                                id = "my-file"
                                multiple 
                                onChange = {()=>this.sendFiles()} // this doesnt immediately call it cos ()=> is same as doing //function(){}. i.e same as defining it so not calling it here. and because function isnt called here (i.e havent done function(){}()) the inside (callChild()) wont be called
                            />  
                        </div>
                        <div className = 'column login'>
                            <h4> <LoginSection getCurrentUser = {(author)=>this.getCurrentUser(author)}/> </h4> 
                        </div>

                    </div>
                    <div className = "two column row">
                        <div className = "column float left file-list ">
                            <h2> File List </h2> {/* if no files selected display message, else send files to fileList child*/}
                            {!this.state.fileChanged &&
                                <h4>
                                 No files currently selected
                                </h4>
                             }
                            <FileList fileList= {this.state.files} onCommentButtonClick={this.onCommentButtonClick}/> {/* pass onCommentButtonClick as callback func to child*/}
                        </div>  

                        <div className="column">
                            <h2> Comment Section </h2>
                            <CommentSection 
                                selectedFile = {this.state.fileChosenForComment} 
                                currentAuthor= {this.state.currentAuthor} 
                                fileChangeCounter = {this.state.fileChangeCounter}
                            />
                        </div>
                    </div>
                </div>  
            </div>


    )}

Answer 1

If you are using webpack, one thing you should do is to add this configuration:

  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
    }),
  ],

Another thing you could try is using window.jQuery to access to jQuery global variable.

Finally you can use refs instead of selectors, I consider this more readable:

<div ref={(el) => { this.clickable = el; }}>click Me</div>

window.jQuery(this.clickable).on('click', this.updateClickCounter);

jQuery is not defined even though it loads correctly

Question

1 answers

solution1
0 2019-08-05 19:40:39

jQuery is not defined even though it loads correctly

Question

1 answers

solution1 0 2019-08-05 19:40:39

solution1
0 2019-08-05 19:40:39