5

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';
4
  • if you tried jQuery in place of $ it works ? Commented Sep 22, 2018 at 17:45
  • No. I tried both Jquery and jquery. It didn't work Commented Sep 22, 2018 at 17:52
  • 1
    jQuery should be working out of the box with laravel. What does your bootstrap.js file look like? Commented Sep 22, 2018 at 18:02
  • just added the bootstrap.js file Commented Sep 22, 2018 at 18:11

1 Answer 1

10

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

Sign up to request clarification or add additional context in comments.

1 Comment

i don't use assets folder

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.