Laravel-mix: Jquery and Boostrap previous release configuration issue

[waqas-mehmood-pk]

• 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]

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]

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]

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

So here is the order -

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

Also you have included bootstrap css twice.

[waqas-mehmood-pk]

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.

1. Jquery already at the top of the first scripts function.
2. Bootstrap added now after jquery line in first scripts function too.
3. Jquery plugins
4. my custom code main.js file at the end of 2nd scripts function.
5. 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.*

[ruchern-chong]

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]

@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:

1. 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?
2. Please also explain window.$ why we need to .$ ?
3. 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]

webpack tutorials,
JS tutorials,
there are lots more

[ruchern-chong]

@whfamily2006

1. In layman terms, window is basically global. So you can use select() at any pages of your code.

2. window.$ because jQuery uses $ notations. $(document).ready() for example.

3. 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]

@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.

[ruchern-chong]

In your webpack.mix.js

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

[ankurk91]

You can install old version through npm like this -

npm install [email protected] --save

[waqas-mehmood-pk]

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]

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

[ruchern-chong]

@ankurk91 And they are unlikely to publish 2.0.2.

[endrureza]

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]

@endrureza
Please follow

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

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

[endrureza]

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[bot]]

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.