Jquery and Boostrap previous release configuration issue #842

waqas-mehmood-pk · 2017-05-30T09:46:34Z

Laravel Mix Version: 0.12.1
Node Version : 6.9.1
NPM Version : 3.10.8
OS: Windows

Description:

Hello Experts
I am a newbie to use web-pack and laravel-mix. I have an old project and with old javascript libraries...
If I use default laravel-mix setting than jquery not loaded and when I add these both libraries manually in the laravel.mix.js file than bootstrap not working...

I have fought since last week but no success.

Steps To Reproduce:

I have uploaded an example in github repository.
link: https://github.com/whfamily2006/laravel-mix-jquery-bootstrap

ankurk91 · 2017-05-31T05:00:23Z

You are using scripts() and styles() methods, it means you are not using webpack.
Default laravel-mix config that comes with laravel won't work for you for sure.

What do you meant by bootstrap not working ? Any error ?

Did you include all of your build files in welcome.blade.php correctly and in-order ?

waqas-mehmood-pk · 2017-05-31T05:09:57Z

Thank @ankurk91 for the response. please view the javascript console for error.
please run npm install && npm run dev
I have used the old version of jquery and bootstrap so that's why I can't use the default laravel-mix settings. so that's why I was creating an example repository if anyone wants to review.

ankurk91 · 2017-05-31T06:51:31Z

Your order of js files in webpack.mix.js is wrong.
You should include jquery before bootstrap.

So here is the order -

jQuery (because bootstrap requires jquery to be loaded first)
Bootstrap
jQuery plugins
Your custom code - main.js

Also you have included bootstrap css twice.

waqas-mehmood-pk · 2017-05-31T07:32:10Z

Here is my webpack.mix.js file

const RESOURCE_PATH = `resources/assets/custom`;
const NODE_MODULES_PATH = `node_modules`;

mix
    .scripts(
        [
            **`${RESOURCE_PATH}/js/jquery-2.0.2.min.js`**,  
            **`${NODE_MODULES_PATH}/bootstrap/dist/js/bootstrap.js`**, 
            `${RESOURCE_PATH}/js/jarvis.widget.min.js`,
            `${RESOURCE_PATH}/js/smoothscroll.js`,
            `${RESOURCE_PATH}/js/mousescroll.js`,
            `${RESOURCE_PATH}/js/jquery-ui-1.10.3.min.js`,
            `${RESOURCE_PATH}/js/HoldOn.min.js`,
            `${RESOURCE_PATH}/js/jquery.inview.min.js`,
            `${RESOURCE_PATH}/js/jquery.isotope.min.js`,
            `${RESOURCE_PATH}/js/jsUKpostcode.js`,
        ], `public/js/app.js`)

    .scripts(
        [
            `${NODE_MODULES_PATH}/bootstrap-select/dist/js/bootstrap-select.js`,
            `${RESOURCE_PATH}/js/SmartNotification.min.js`,
            `${NODE_MODULES_PATH}/sweetalert/dist/sweetalert.min.js`,
            `${RESOURCE_PATH}/js/pace.min.js`,
            `${NODE_MODULES_PATH}/owl.carousel/dist/owl.carousel.min.js`,
            `${NODE_MODULES_PATH}/wowjs/dist/wow.min.js`,
            `${RESOURCE_PATH}/js/jquery.prettyPhoto.js`,
            `${RESOURCE_PATH}/js/datatables.bootstrap.js`,
            **`${RESOURCE_PATH}/js/main.js`**,
        ], `public/js/packages.js`)
    .styles(
        [
           `${NODE_MODULES_PATH}/bootstrap/dist/css/bootstrap.css`, 
            `${RESOURCE_PATH}/css/main.css`,
            `${RESOURCE_PATH}/css/flag-icon.css`,
            `${RESOURCE_PATH}/css/owl.transitions.css`,
            `${RESOURCE_PATH}/css/segmented-control.css`
        ], `public/css/custom.css`)

    .styles(
        [
            `${NODE_MODULES_PATH}/bootstrap/dist/css/bootstrap.min.css`,
            `${NODE_MODULES_PATH}/animate.css/animate.min.css`,
            `${NODE_MODULES_PATH}/owl.carousel/dist/assets/owl.carousel.css`,
            `${NODE_MODULES_PATH}/hover.css/css/hover.css`,
            `${NODE_MODULES_PATH}/bootstrap-select/dist/css/bootstrap-select.css`,
            `${NODE_MODULES_PATH}/sweetalert/dist/sweetalert.css`,
            `${NODE_MODULES_PATH}/sweetalert/themes/twitter/twitter.css`
        ], `public/css/vendor.css`)

    .sourceMaps();

@ankurk91 I have changed according to your suggestions.

Jquery already at the top of the first scripts function.
Bootstrap added now after jquery line in first scripts function too.
Jquery plugins
my custom code main.js file at the end of 2nd scripts function.
and in the last but not the least before now I have not included the bootstrap file but now I added and others bootstrap files are included for select2, and datatable package.

but the error is still there.
##TypeError: false is not a function,

** please clone the repo and have a look, I need your kind help.**

ruchernchong · 2017-05-31T08:07:21Z

Your webpack.mix.js file is too messy.

You should be having app.js to handle this:

For example:

window.$ = window.jQuery = require('jquery')

Then in your webpack.mix.js file do this:

mix.js('resources/assets/js/app.js', 'app.js')

TLDR; use app.js to pull all your node_modules packages and make webpack.mix.js cleaner.

This is mine for a more detailed example:

app.js

require('./bootstrap')
require('prismjs')

window.select2 = require('select2')
window.SimpleMDE = require('simplemde')

require() will handle your node_modules directory.

app.scss

@import "~font-awesome/scss/font-awesome.scss";
@import "~simplemde/dist/simplemde.min.css";
@import "~prismjs/themes/prism.css";
@import "~select2/dist/css/select2.css";

~ denotes node_modules directory by default.

webpack.mix.js

mix.js([
    'resources/assets/js/app.js',
    'resources/assets/js/reCaptcha.js',
], 'public/js/app.js')
mix.js('resources/assets/js/frontend.js', 'public/js')
mix.js('resources/assets/js/auth.js', 'public/js')

mix.sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass//auth/auth.scss', 'public/css')
    .sass('resources/assets/sass/frontend/frontend.scss', 'public/css')

waqas-mehmood-pk · 2017-05-31T10:12:56Z

@ruchern thank you for an explanation, I know this is not the relevant forum for my silly questions, but I search these since last one and half week and don't understand still.

Please also explain these following:

window and window.select2 (select2 is package but what is window and what is window.select2) if we write window.select2 that's mean select2.js and if select2.css exists then it's included automatically, if not included automatically then we add it in app.scss?
Please also explain window.$ why we need to .$ ?
If I have Jquery old version mean not npm supported version than how can I include that version
is this work window.$ = window.jQuery = require('./../custom/js/jquery-2.0.2.min') ?

ankurk91 · 2017-05-31T10:40:10Z

webpack tutorials,
JS tutorials,
there are lots more

ruchernchong · 2017-05-31T10:48:34Z

@whfamily2006

In layman terms, window is basically global. So you can use select() at any pages of your code.
window.$ because jQuery uses $ notations. $(document).ready() for example.
No you no need that. If you install jQuery via npm npm install jquery, then just use window.$ = window.jQuery = require('jquery')

As @ankurk91 mentioned, yeah you should watch some of the tutorials on Webpack. Laracasts is a good place to start. https://laracasts.com/series/webpack-for-everyone

waqas-mehmood-pk · 2017-06-01T04:45:11Z

@ruchern thank you for explanation. just last thing if I have old version of jquery (jquery.js file downloaded) which not installed via npm so how can I include that download jquery js file in app.js window.$ = window.jQuery = require('jquery')

I have seen webpack-for-everyone, laravel-mix on laracast and then I was trying to configure.

ruchernchong · 2017-06-01T04:48:13Z

In your webpack.mix.js

mix.scripts('path/to/jquery.min.js', 'public/js')

ankurk91 · 2017-06-01T06:01:35Z

You can install old version through npm like this -

npm install jquery@1.12.4 --save

waqas-mehmood-pk · 2017-06-01T07:16:43Z

Thank you @ruchern, @ankurk91 for your time and tolerating me.
@ankurk91 I have used jQuery v2.0.2 and npm not support this version.

ankurk91 · 2017-06-01T08:29:45Z

seems like they have not published that version on npm.
You can install colser version.

npm has these jQuery version available-

npm ERR! notarget 3.2.1, 3.2.0, 3.1.1, 3.1.0, 3.0.0, 3.0.0-rc1, 3.0.0-beta1, 3.0.0-alpha1, 2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.1.4, 2.1.3, 2.1.2, 2.1.1, 2.1.1-rc2, 2.1.1-rc1, 2.1.1-beta1, 2.1.0, 2.1.0-rc1, 2.1.0-beta3, 2.1.0-beta2, 1.12.4, 1.12.3, 1.12.2, 1.12.1, 1.12.0, 1.11.3, 1.11.2, 1.11.1, 1.11.1-rc2, 1.11.1-rc1, 1.11.1-beta1, 1.11.0, 1.11.0-rc1, 1.11.0-beta3, 1.9.1, 1.8.3, 1.8.2, 1.7.3, 1.7.2, 1.6.3, 1.6.2, 1.5.1

ruchernchong · 2017-06-01T08:32:30Z

@ankurk91 And they are unlikely to publish 2.0.2.

endrureza · 2018-05-23T09:12:45Z

well, it doesn't work totally for me.

first, my

webpack.mix.js

let mix = require('laravel-mix');

mix.js('resources/assets/back/js/app.js','public/js/back.js')
	   .sass('resources/assets/back/scss/app.scss','public/css/back.css')
	   .disableNotifications();

app.js

window.$ = window.jQuery = require('jquery');

require('bootstrap-datepicker') // or window.datepicker = require('bootstrap-datepicker')

it will cause this error

$(...).datepicker is not a function

@ankurk91 @ruchern am i making mistake here?

ankurk91 · 2018-05-23T09:22:42Z

@endrureza
Please follow

https://github.com/JeffreyWay/laravel-mix/blob/master/docs/autoloading.md

// webpack.mix.js
mix.autoload({
    'jquery': ['$', 'window.jQuery', 'jQuery'], 
  })

endrureza · 2018-05-23T09:37:08Z

I've done that before

webpack.mix.js

let mix = require('laravel-mix');

mix.autoload({
   jquery: ['$', 'window.jQuery']
});

mix.js('resources/assets/back/js/app.js','public/js/back.js')
	   .sass('resources/assets/back/scss/app.scss','public/css/back.css')
	   .disableNotifications();

app.js

window.$ = window.jQuery = require('jquery');

require('bootstrap-datepicker') // or window.datepicker = require('bootstrap-datepicker')

it caused this error

$ is not a function

@ankurk91 @ruchern i'm getting more confused

Noticement

if i change app.js like this

app.js

require('path/to/bootstrap-datepicker.js')

it works ! it's getting fuzzy

stale · 2018-12-04T17:41:22Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale bot added stale and removed stale labels Dec 4, 2018

JeffreyWay closed this as completed Dec 8, 2018

sokis mentioned this issue May 17, 2022

[Snyk] Fix for 2 vulnerabilities sokis/laravel-mix#39

Open

snyk-bot mentioned this issue Dec 27, 2022

[Snyk] Fix for 1 vulnerabilities sokis/laravel-mix#46

Open

sokis mentioned this issue Nov 28, 2023

[Snyk] Fix for 8 vulnerabilities sokis/laravel-mix#51

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Jquery and Boostrap previous release configuration issue #842

Jquery and Boostrap previous release configuration issue #842

waqas-mehmood-pk commented May 30, 2017

ankurk91 commented May 31, 2017

waqas-mehmood-pk commented May 31, 2017 •

edited

ankurk91 commented May 31, 2017

waqas-mehmood-pk commented May 31, 2017

ruchernchong commented May 31, 2017 •

edited

waqas-mehmood-pk commented May 31, 2017 •

edited

ankurk91 commented May 31, 2017 •

edited

ruchernchong commented May 31, 2017 •

edited

waqas-mehmood-pk commented Jun 1, 2017

ruchernchong commented Jun 1, 2017

ankurk91 commented Jun 1, 2017

waqas-mehmood-pk commented Jun 1, 2017

ankurk91 commented Jun 1, 2017

ruchernchong commented Jun 1, 2017 •

edited

endrureza commented May 23, 2018 •

edited

ankurk91 commented May 23, 2018 •

edited

endrureza commented May 23, 2018 •

edited

stale bot commented Dec 4, 2018

Jquery and Boostrap previous release configuration issue #842

Jquery and Boostrap previous release configuration issue #842

Comments

waqas-mehmood-pk commented May 30, 2017

Description:

Steps To Reproduce:

ankurk91 commented May 31, 2017

waqas-mehmood-pk commented May 31, 2017 • edited

ankurk91 commented May 31, 2017

waqas-mehmood-pk commented May 31, 2017

ruchernchong commented May 31, 2017 • edited

waqas-mehmood-pk commented May 31, 2017 • edited

ankurk91 commented May 31, 2017 • edited

ruchernchong commented May 31, 2017 • edited

waqas-mehmood-pk commented Jun 1, 2017

ruchernchong commented Jun 1, 2017

ankurk91 commented Jun 1, 2017

waqas-mehmood-pk commented Jun 1, 2017

ankurk91 commented Jun 1, 2017

ruchernchong commented Jun 1, 2017 • edited

endrureza commented May 23, 2018 • edited

ankurk91 commented May 23, 2018 • edited

endrureza commented May 23, 2018 • edited

stale bot commented Dec 4, 2018

waqas-mehmood-pk commented May 31, 2017 •

edited

ruchernchong commented May 31, 2017 •

edited

waqas-mehmood-pk commented May 31, 2017 •

edited

ankurk91 commented May 31, 2017 •

edited

ruchernchong commented May 31, 2017 •

edited

ruchernchong commented Jun 1, 2017 •

edited

endrureza commented May 23, 2018 •

edited

ankurk91 commented May 23, 2018 •

edited

endrureza commented May 23, 2018 •

edited