Create-react-app: how to jqeury importing to index.html

Created on 2 Jun 2017 · 6Comments · Source: facebook/create-react-app

I am gonna to import jquery to index.html.
So I can use jquery in all js file without import $ from 'jquery'.

But it is not working as my thought.

Is it impossible?

Thanks is advance...

Source

starcraft0429

Most helpful comment

As I suggested above, instead of adding it to index.html run:

npm install --save jquery

and then use

import $ from 'jquery';

However, if you insist on adding it to HTML, you need to add const $ = window.$ to the top of the file as described in using global variables.

gaearon on 2 Jun 2017

👍3 🎉1

All 6 comments

Not sure if it's a problem in the source but you made a typo in the package name.

import $ from 'jquery';

should work fine if your jquery version in package.json is higher than 3.x and you ran npm install.

gaearon on 2 Jun 2017

Thanks @gaearon
Sorry wrong spell.
But it is not reason.

This is my case.
added this to index.html
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

added jquery to app.js
class App extends Component {
componentDidMount() {
$('.App-header').addClass('someClass')
}
render() {
return (
~~~
);
}
}

http://prntscr.com/ff489d

starcraft0429 on 2 Jun 2017

Maybe try window.$

kasperpeulen on 2 Jun 2017

👍1

As I suggested above, instead of adding it to index.html run:

npm install --save jquery

and then use

import $ from 'jquery';

However, if you insist on adding it to HTML, you need to add const $ = window.$ to the top of the file as described in using global variables.

gaearon on 2 Jun 2017

👍3 🎉1

Thanks again.
Anyway... These method is complex...
I remember, before I used $ without any importing.
Only imported it in index html as common js importing...

starcraft0429 on 2 Jun 2017

@starcraft0429 What happens is because of eslint, you can find the reason from google-is-not-defined-in-react-app-using-create-react-app