how to properly add js libraries to a laravel project

Question

I'm trying to use the treeview plugin from the gijgo.js library. Everything works fine in a clean example project - librarys: jquery, bootstrap, gijgo (all in same version as in not working Laravel Project) downloaded and included by hand in simple index.html; however the plugin does not work in a project based on the Laravel framework, the npm compile scripts to /public/js/app.js without errors, the browser console doesn't report any errors but the page does't look as expected. What I've done for now:

I'm using Laravel 7.18 with ui bootstrap
installed gijgo.js with npm install gijgo --save
myfiles:

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.5",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "gijgo": "^1.9.13"
    }
}

resources/js/bootstrap.js

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

resources/js/app.js

require('./bootstrap');
require('gijgo');

var data = [{"id":1,"text":"Asia","population":null,"flagUrl":null,"checked":false,"hasChildren":false,"children":[{"id":2,"text":"China","population":1373541278,"flagUrl":"https://code.gijgo.com/flags/24/China.png","checked":false,"hasChildren":false,"children":[]},{"id":3,"text":"Japan","population":126730000,"flagUrl":"https://code.gijgo.com/flags/24/Japan.png","checked":false,"hasChildren":false,"children":[]},{"id":4,"text":"Mongolia","population":3081677,"flagUrl":"https://code.gijgo.com/flags/24/Mongolia.png","checked":false,"hasChildren":false,"children":[]}]},{"id":5,"text":"North America","population":null,"flagUrl":null,"checked":false,"hasChildren":false,"children":[{"id":6,"text":"USA","population":325145963,"flagUrl":"https://code.gijgo.com/flags/24/United%20States%20of%20America(USA).png","checked":false,"hasChildren":false,"children":[{"id":7,"text":"California","population":39144818,"flagUrl":null,"checked":false,"hasChildren":false,"children":[]},{"id":8,"text":"Florida","population":20271272,"flagUrl":null,"checked":false,"hasChildren":false,"children":[]}]},{"id":9,"text":"Canada","population":35151728,"flagUrl":"https://code.gijgo.com/flags/24/canada.png","checked":false,"hasChildren":false,"children":[]},{"id":10,"text":"Mexico","population":119530753,"flagUrl":"https://code.gijgo.com/flags/24/mexico.png","checked":false,"hasChildren":false,"children":[]}]},{"id":11,"text":"South America","population":null,"flagUrl":null,"checked":false,"hasChildren":false,"children":[{"id":12,"text":"Brazil","population":207350000,"flagUrl":"https://code.gijgo.com/flags/24/brazil.png","checked":false,"hasChildren":false,"children":[]},{"id":13,"text":"Argentina","population":43417000,"flagUrl":"https://code.gijgo.com/flags/24/argentina.png","checked":false,"hasChildren":false,"children":[]},{"id":14,"text":"Colombia","population":49819638,"flagUrl":"https://code.gijgo.com/flags/24/colombia.png","checked":false,"hasChildren":false,"children":[]}]},{"id":15,"text":"Europe","population":null,"flagUrl":null,"checked":false,"hasChildren":false,"children":[{"id":16,"text":"England","population":54786300,"flagUrl":"https://code.gijgo.com/flags/24/england.png","checked":false,"hasChildren":false,"children":[]},{"id":17,"text":"Germany","population":82175700,"flagUrl":"https://code.gijgo.com/flags/24/germany.png","checked":false,"hasChildren":false,"children":[]},{"id":18,"text":"Bulgaria","population":7101859,"flagUrl":"https://code.gijgo.com/flags/24/bulgaria.png","checked":false,"hasChildren":false,"children":[]},{"id":19,"text":"Poland","population":38454576,"flagUrl":"https://code.gijgo.com/flags/24/poland.png","checked":false,"hasChildren":false,"children":[]}]}];

$(function() {
    $('#tree').tree({
            uiLibrary: 'bootstrap4',
            dataSource: data,
            primaryKey: 'id',
            imageUrlField: 'flagUrl'
    });
});

the rest is standard request handling leading to layout and view app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'treeView Example') }}</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <main class="py-4">
            @yield('content')
        </main>
    </div>
    
    <!-- Scripts -->
    <script src="https://kit.fontawesome.com/8e33cf2cfe.js" crossorigin="anonymous"></script>
    <script src="{{ asset('js/app.js') }}" defer></script>
</body>
</html>

tree.blade.php

@extends('layouts.app')

@section('content')
    <div class="container-fluid">
        <div id="tree"></div>
    </div>
@endsection

This is the final look:

I suspect that it is a matter of compiling at the LaravelMix/webpack level, because I've installed the library without any problems, the browser console doesn't report any errors but the script doesn't work. Maybe it's the order in which the js libraries are added inside compiled app.js (but in this case i think that browser should give 'function not defined').

How to make it work?

Please be precise with your tips because I am a beginner with Laravel and all this frontend (laravelmix, webpack) stuff. I will be grateful for your help

are you running `npm run dev`? – andresdevr Sep 21 '20 at 16:41 — andresdevr, Sep 21 '20 at 16:41
I try both dev and prod with same result. – Agrest Sep 22 '20 at 07:06 — Agrest, Sep 22 '20 at 07:06

score 1 · Accepted Answer · answered Sep 23 '20 at 05:25

1

I've missed to include CSS of gijgo.

/resources/js/app.js should look:

require('./bootstrap');
require('gijgo');
require('gijgo/css/gijgo.css');

(...)

Thank's to thewebartisan7 from laracasts who noticed the error.

answered Sep 23 '20 at 05:25

Agrest

234
2
15

Flo Espen · Answer 2 · 2020-09-21T16:03:14.377

0

I would load the Javascript Dependencies/scripts in the header, not in the body. There is an interesting answer to that topic on another thread: Where to insert JavaScript Libraries and CSS in my HTML code?

edited Sep 21 '20 at 16:03

answered Sep 21 '20 at 15:55

Flo Espen

450
4
10

All my script is inside $(function() { } so it will run after the page is fully loaded. Dependencies should be loaded first (if you look at my app.js at first i require bootstrap and gijgo after that goes my script) in some auto-magical way webpack put it all together inside public/app.js which is loaded in view as the only js file. I dont know how webpack do that magic one of my question is about this how can i configure order of loading dependencies in webpack. – Agrest Sep 22 '20 at 07:05

how to properly add js libraries to a laravel project

2 Answers2