Webpack - Uncaught ReferenceError: $ not defined by jquery

Question

I am using webpack bundler to compile js code. However, I ran into a problem while working with third-party libraries like jquery and js.

I imported jquery into a custom js file at the top, but I still get the 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'; 

Answer 1

The added jquery plugin in webpack solved the problem.

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