ReactJS: Uncaught ReferenceError: $ is not defined

Question

I got stuck with below error and unable to fix it. In my react app I have installed jquery as a library and imported it in root component so I haven't included cdn in my index.html.

Uncaught ReferenceError: $ is not defined at home:13 (anonymous) @ home:13

I found following many solutions but all of them are talking about including jquery cdn in index.html but none of them talking about resolving the issue when we import jquery as lib in react component.

My index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Netext</title>
    <link rel="icon" href="/images/logo123.ico" type="image/x-icon"/>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Import Bootstrap CSS from CDN for easy replacement/removal -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


    <!-- Import bundled/compiled CSS -->
    <link rel="stylesheet" type="text/css" href="/app.css">

 <link rel="stylesheet" type="text/css" href="/circle.css">
 <link rel="stylesheet" type="text/css" href="/custom.css">


  <link rel="stylesheet" type="text/css" href="/cropper.css">

    <style>

html, body {
    min-height: 100%;
    margin:0;
   padding:0;
   background: #e6ecf0 none;
}


#app{
    min-width: 300px; /* 100px x3 = 300 */
    min-height:100%;

}
    </style>
  </head>
  <body>
    <div id="app" class="wrapper">

    </div>
  </body>



  <!-- Import bundled JavaScript -->
  <script src="/bundle.js"></script>

  <script type="text/javascript">
    $(document).ready(function () {

    $(window).on('scroll', function () {
        if ($(window).scrollTop() >= 20) {
            $('.navbar').addClass('compressed');
        } else {
            $('.navbar').removeClass('compressed');
        }
    });
  }); 

  </script>
</html>

App.js

import React, { Component } from 'react';
import HeaderTemplate from './Layout/Components/Header';
import FooterTemplate from './Layout/Components/Footer';
import imports from './common/imports';
import config from './config';
import RefreshIndicator from 'material-ui/RefreshIndicator';
import 'bootstrap/dist/css/bootstrap.min.css'
// import 'bootstrap/dist/css/bootstrap-theme.min.css' // optional
import 'jquery/dist/jquery.min.js' // I have imported jquery here
import 'bootstrap/dist/js/bootstrap.min.js'
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      showLoading: true
    }
  }

  render() {
    return (
        <div>
        <HeaderTemplate logo="Postme" />
          <div id="demo-settings" className="">
            <a href="#" id="demo-settings-toggler" className="fa fa-dot-circle-o"></a>
          </div>
        <div className="container-fluid bodyfluid">

          {this.props.children}
        </div>
        <FooterTemplate />
      </div>
    );
  }
}


export default App;

PS:- I am importing jquery as library but not including as script in index.html

Just because you import jQuery in an ES6 module does not mean it's globally available once minified and packaged for the web. You need to include via ` — Andrew Li, Sep 04 '18 at 02:57
@Li357 So you mean the cdn has to be included as script in index.html and importing as a library won't work in this case? — Hemadri Dasari, Sep 04 '18 at 03:02
Yes, to use it in the inline script, you would need to use a CDN because once whatever packager you use (such as Webpack) packages your code for the web, the ES6 modules (such as jQuery) are not global. If you use Webpack, to prevent including jQuery twice, once as an NPM module and once via CDN, you use the globals option IIRC. — Andrew Li, Sep 04 '18 at 03:04
Ok. Can you please help me with source to this globals option IIRC — Hemadri Dasari, Sep 04 '18 at 03:06
My bad, they're called 'externals': https://webpack.js.org/configuration/externals/. Basically, you include a CDN that exposes a global. Then, like a NPM package, you can import it wherever you need jQuery and use the CDN version. Remember to include jQuery before your bundle. — Andrew Li, Sep 04 '18 at 03:10
I removed jquery library from package.json and commented in App.js. I included jquery cdn in index.html but I am getting Uncaught ReferenceError: jQuery is not defined now. I included following cdn in in index.html before bundle.js reference — Hemadri Dasari, Sep 04 '18 at 03:17

ReactJS: Uncaught ReferenceError: $ is not defined

0 Answers0