installing JS packages using npm and compiling with webpack laravel mix

Question

I am new to Laravel and following Laracast tutorials for Laravel 5.4
I read about Laravel mix and how we can compile our assets using Webpack Laravel Mix tool. So I tried adding a JavaScript Package

1- Installed AlertifyJS using npm.
2- Added require('alertifyjs') in resources\assets\js\bootstrap.js
3- Executed npm run dev. Assets were compiled to public\js\app.js , where I can see alertifyjs code by finding alertify keyword.

I used alertify code like below in resources\assets\js\app.js:

`$(document).ready(function(){
    $('.run').on('click' , function(event){
        alertify.alert("This is an alert dialog.", function(){
        alertify.message('OK');
    });
  });
});`

View File:

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading text-center"><h2>THIS WILL BE THE HOME PAGE<h2></div>
                <div class="panel-body text-center">
                    Home Page Content Goes Here!
                </div>
                            <button class="run">Show Alert</button>
            </div>
        </div>
    </div>
</div>
@endsection

Problem: When I click on button Show Alert ,
alertify is not defined errors is logged to console. Am I missing something while compiling assets?

Is your app.js file being included in html in either of your blade components? — slapbot
– slapbot, Commented Mar 3, 2017 at 20:42
somehow, alertify's all code was compiled and put just under my in public\js\app.js, that's why undefined error is being thrown — awebartisan
– awebartisan, Commented Mar 3, 2017 at 20:58
Also, although you can use alertify on its own with laravel, its a bit tedious. You can use a laravel-alertify package I just published: github.com/odannyc/laravel-alertify — odannyc
– odannyc, Commented Jul 19, 2017 at 15:05
How did you import the alertify.min.css and themes/bootstrap.min.css files? — Pathros
– Pathros, Commented Aug 7, 2020 at 1:43

Michael Jungo · Accepted Answer · 2017-03-03 23:57:41Z

5

You need to require alertify in your app.js, where you're actually using it. Webpack keeps each file as a module, just puts them together in one file (the bundle). But you're expecting it to be available globally, which is not a good idea and modules that do depend on globals (like jQuery plugins) are referred to as legacy modules in the official webpack docs. Have a look at Shimming for more details on such legacy modules.

Anyway, that is not the case for you, but just keep in mind that modules you install with npm should always be required in the file you're actually using them. Modules have their own scope, it's not just putting the files together when you require them. If this concept of modules is new to you or you'd like to understand it better you should read Node.js Modules, because this is heavily used in JavaScript.

Your resources\assets\js\app.js needs to be changed to:

const alertify = require('alertifyjs');

$(document).ready(function(){
  $('.run').on('click' , function(event){
    alertify.alert("This is an alert dialog.", function(){
      alertify.message('OK');
    });
  });
});

answered Mar 3, 2017 at 23:57

Michael Jungo

33.2k4 gold badges97 silver badges87 bronze badges

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

4 Comments

TomWilsonFL Over a year ago

Thanks for this answer. It helped me as well, but I am hoping you could explain a bit more. I'm trying to include Backbone into my existing Laravel Spark application which is becoming an SPA very quickly. Spark includes multiple libraries from NPM using code like: window._ = require('underscore'); When I try this with: window.Backbone = require('backbone'); It doesn't work. Backbone is undefined. Why would it exhibit that behavior? Just curious.

TomWilsonFL Over a year ago

Further, if you do not register some modules with the root, how do you override functions such as Backbone.sync which are used throughout?

Michael Jungo Over a year ago

@TomWilsonFL 1) window.Backbone = require('backbone') should make it available globally in the browser, just needs to be included before the files that actually use it. 2) It is generally not a good idea to overwrite functions of a library, this is known as Monkey patching.

Pathros Over a year ago

It actually worked for me as window.alertify = require('alertifyjs');. But now, how do you import the alertify.min.css and themes/bootstrap.min.css files? Inside the app.scss file I have tried @import '~alertifyjs/build/css/alertify.min.css'; but the CSS is not working. The alert shows up as pure text, without the CSS :´(

Collectives™ on Stack Overflow

installing JS packages using npm and compiling with webpack laravel mix

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related