$ is not defined - Laravel Jquery not found?

Question

In my Laravel project (laravel 5.6) I installed Jquery from npm. Then I added it to webpack.mix.js.

mix.webpackConfig(webpack => {
    return { plugins: [new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: ["jquery", "$"],
                "window.jQuery": "jquery",
                Popper: ["popper.js", "default"]
            })] };
});

after compiling the assets and trying to use jquery it shows

 "Uncaught ReferenceError: $ is not defined"

I am using my custom JavaScript file after loading the mix file in my view.

<script src="{{ mix('/js/app.js') }}"></script>
<script type="text/javascript" src="/js/tests/tests.js"></script>

In my custom JavaScript file I added the following code to check Jquery.

$("#myCheckButton").click(function(e) {
  console.log(test);
});

I tried changing the webpack.min.js webPackconfig settings but was not able to solve it. Most questions like this recommended to put the custom js files after the mix. I think I got it right in my case

Edit : And there is another error

jquery-jvectormap.min.js?37ce:1 Uncaught TypeError: Cannot read property 'fn' of undefined
    at eval (jquery-jvectormap.min.js?37ce:1)
    at Object.eval (jquery-jvectormap.min.js?37ce:1)
    at eval (jquery-jvectormap.min.js:6)
    at Object../node_modules/jvectormap/jquery-jvectormap.min.js (app.js?id=3e76ba2082961d8bb73a:654)
    at __webpack_require__ (app.js?id=3e76ba2082961d8bb73a:20)
    at eval (index.js:3)
    at Object../resources/assets/js/vectorMaps/index.js (app.js?id=3e76ba2082961d8bb73a:1820)
    at __webpack_require__ (app.js?id=3e76ba2082961d8bb73a:20)
    at eval (bootstrap.js:9)
    at Object../resources/assets/js/bootstrap.js (app.js?id=3e76ba2082961d8bb73a:1652)

As requested here is my bootstrap.js file

import './masonry';
import './charts';
import './popover';
import './scrollbar';
import './search';
import './sidebar';
import './skycons';
import './vectorMaps';
import './chat';
import './datatable';
import './datepicker';
import './email';
import './fullcalendar';
import './googleMaps';
import './utils';
import './sweetalert2';
import './select2';

Caseose

if you tried jQuery in place of $ it works ? – Knitter

No. I tried both Jquery and jquery. It didn't work – Caseose

jQuery should be working out of the box with laravel. What does your bootstrap.js file look like? – Flitting

just added the bootstrap.js file – Caseose

Answer 1

Put this near the top of your resources\assets\js\app.js file.

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

Source:

https://github.com/webpack/webpack/issues/4258#issuecomment-340240162

Thunderous

i don't use assets folder – Ligon