I'm using webpack bundler for compiling react js code. However, I'm facing issue while working with third party libraries like jquery and velocity js.
I've imported jquery in custom js file at the top however, i'm still getting error.
/* Import libraries stylesheet */
import '../shared/lib/normalize.css';
import '../shared/lib/grid.css';
import '../shared/lib/tiny-scrollbar/tinyscrollbar.css';
/* Import main stylesheet */
import './main.scss';
/* Import libraries script */
import '../shared/lib/jquery-1.12.3.min.js';
import '../shared/lib/tiny-scrollbar/jquery.tinyscrollbar.min.js';
import '../shared/lib/velocity.min.js';
import '../components/card/cards.js';
/* Import main component */
import './main.jsx';
To solve this error, we simply add the jQuery CDN link or downloaded jQuery path link inside the head section. Example: This example resolves the error by adding the required CDN link inside the <script> tag.
"jQuery is not defined" or "$ is not defined"This error happens when your code (or some library that you are using) expects $ or jQuery to be a global variable. But, when you use Webpack and require('jquery') , no global variables are set.
Added jquery plugin in webpack solved the issue.
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With