laravel – JS does not work after running "npm run dev"

Question:

Good afternoon, I'm studying Laravel 5.7 and wanted to use a plugin called progressbar.js . One of the ways to install the plugin is to play the progressbar.js file directly in Laravel's public/js , after that, I write where I want the effect to apply, eg:

var bar = new ProgressBar.Path('#LoadingDiv', {
  easing: 'easeInOut',
  duration: 2400
});

bar.set(0);
bar.animate(1.0);  // Number from 0.0 to 1.0

And the effect test works normally…

But I think this is not a good practice, so I decided to use npm node.js .

As per the plugin documentation, I ran npm install progressbar.js (installation is successful), after that I go to webpack.mix.js to use Laravel's laravel-mix , add what I want laravel-mix copy to min in Laravel's public :

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

 mix.js(...)
    .js("node_modules/progressbar.js/dist/progressbar.js", 'public/js')
    .sass(...);

npm run dev the npm run dev so far, ok! file copied to Laravel's public successfully… I go to my app.blade.php file and add the script in the same place as the old one (which is working), in the way that I think is correct:

<script src="{{ asset('js/progressbar.js') }}" defer></script>

And ready! Mistake:

Uncaught ReferenceError: ProgressBar is not defined
    at onLoad ((index):74)
onLoad @ (index):74
load (async)
(anonymous) @ (index):73

One thing I noticed is that after I used the laravel-mix the script changed, I can't say what influenced the change, but I noticed that it influenced lol… As the script is so big, I can't display it here for you…

Well, does anyone know what I'm doing wrong? I think I'm doing something wrong in the process…

Edit

I uploaded the project on GitHub for you to take a look… GitHub Repository

Answer:

Hi, looking at your project I found the problems friend…

Importing Javascript Libraries

---

In the file located at

/RW-Site/resources/js/app.js

is where you should import the libraries you installed using npm.

There you can see that it does this import

require('./bootstrap');

In which it imports a file located in the same folder, that file contains all the necessary bootstrap settings, including jQuery, popper and so on.

Knowing that now I just create a file to configure its dependencies, on my machine I created a file: progress.js in the same folder as app.js and bootstrap.js , in this file I simply put:

// Loading progressbar.js

window.ProgressBar = require('progressbar.js')

and then, in app.js I imported the file we just created, leaving:

require('./bootstrap');
require('./progress.js');

REMEMBER: In the app.blade.php file I removed the line that requires the ProgressBar, as it is not necessary.

And in the same file, there in the header I just imported:

<script src="{!! mix('js/app.js') !!}"></script>

With that you let the webpack configure and build your javascripts , and you just import your compiled app.js.

remember to remove these 3 scripts:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/progressbar.js') }}"></script>

Restarting application

---

Okay, after that just restart your application, build it so that the files are compiled and voilà .

I advise using the

npm run watch-poll

So your changes are automatically reflected…

Sources:

https://laravel.com/docs/5.4/mix

https://stackoverflow.com/questions/45125009/how-import-a-external-js-library-in-laravel