73

Hi I just want to receive ajax request, but the problem is that jquery is not defined in React. React version is 14.0

Error message

 Uncaught ReferenceError: $ is not defined

I have two files :

index.js

import React from 'react'; 
import { render } from 'react-dom';
import App from './containers/App';  

const root = document.getElementById('root');  

render( 
  <App source='https://api.github.com/users/octocat/gists' />, 
  root
);

app.js

import React, { Component } from 'react';

export default class App extends Component {

    componentDidMount() {
        const { source } = this.props;

        console.log($); // throws error
    }

    render() {
        return (
            <h1>Hey there.</h1>
        );
    }
}
Nicolás Alarcón Rapela
  • 2,714
  • 1
  • 18
  • 29
Machycek
  • 863
  • 1
  • 6
  • 7
  • 8
    I don't see you defining jQuery anywhere in that code. Why do you think it should work? – Quentin Oct 26 '15 at 16:56
  • 2
    Why even use jQuery with React? – J. Lin Mar 19 '19 at 16:38
  • 1
    `const that = this; fetch('http://jsonplaceholder.typicode.com/posts') .then(function(response) { return response.json(); }) .then(function(myJson) { that.setState({data: myJson}); });` – mplungjan Mar 21 '19 at 15:36
  • 1
    @mplungjan please make that an answer, with a small explanation on how `fetch` is enough when using ES6 already anyway. Maybe mention that a polyfill can be used for older browsers. – Emile Bergeron Mar 21 '19 at 15:42
  • @EmileBergeron done. Feel free to amend the answer to reflect OPs usage – mplungjan Mar 21 '19 at 15:46
  • @Machycek - please return to the question and finalise it by accepting an answer – mplungjan Aug 10 '19 at 19:12
  • I just have one question. why you use jquery in react? It's much easier to use react libraries or clean javascript – Edhar Dowbak Dec 11 '19 at 09:21

6 Answers6

341

Try add jQuery to your project, like 

npm i jquery --save

or if you use bower

bower i jquery --save

then 

import $ from 'jquery';
Oleksandr T.
  • 76,493
  • 17
  • 173
  • 144
  • 6
    If you are using typescript with react, then use `import * as $ from 'jquery';` instead. more info here https://stackoverflow.com/questions/35310361/systemjs-why-am-getting-error-jquery-1-default-is-not-a-function-when-importing – Michael Jul 07 '18 at 16:33
  • If you will get an error, try running: 1. yarn install. 2.yarn upgrade. 3.yarn add yarn. it solved all the problems for me. – boandriy Mar 01 '19 at 09:27
7

It happens mostly when JQuery is not installed in your project. Install JQuery in your project by following commands according to your package manager.

Yarn

yarn add jquery

npm

npm i jquery --save

After this just import $ in your project file. import $ from 'jquery'

Dharman
  • 30,962
  • 25
  • 85
  • 135
VAIBHAV VERMA
  • 104
  • 1
  • 5
6

I just want to receive ajax request, but the problem is that jQuery is not defined in React.

Then don't use it. Use Fetch and have a look at Fetch polyfill in React not completely working in IE 11 to see example of alternative ways to get it running

Something like this

const that = this; 
fetch('http://jsonplaceholder.typicode.com/posts') 
  .then(function(response) { return response.json(); }) 
  .then(function(myJson) { 
     that.setState({data: myJson}); // for example
  });
mplungjan
  • 169,008
  • 28
  • 173
  • 236
2

Isn't easier than doing like :

1- Install jquery in your project: 

yarn add jquery

2- Import jquery and start playing with DOM: 

import $ from 'jquery';
Mustapha GHLISSI
  • 1,485
  • 1
  • 15
  • 16
  • 1
    I get this error at the runtime: Uncaught TypeError: Cannot define property jQuery360080900754312289092, object is not extensible – Adrian B Feb 24 '22 at 16:37
  • do you have to import $ from 'jquery'; in all js files? I have this import in index.js, when i try to use $ in a different file i get this error, i thought it will be pass through – Manza Feb 02 '23 at 22:48
0

Just a note: if you use arrow functions you don't need the const that = this part. It might look like this:

fetch('http://jsonplaceholder.typicode.com/posts') 
  .then((response) => { return response.json(); }) 
  .then((myJson) => { 
     this.setState({data: myJson}); // for example
});
Zach Robichaud
  • 183
  • 1
  • 7
-12

Add "ref" to h1 tag :

<h1 ref="source">Hey there.</h1>

and
const { source } = this.props; change to const { source } = this.refs;

goto
  • 7,908
  • 10
  • 48
  • 58
Edhar Dowbak
  • 2,648
  • 1
  • 10
  • 13