JS does not work after running "npm run dev"

Question

Good afternoon, I am studying the Laravel 5.7 and was wanting to use a plugin called progressbar.js. One of the ways to install the plugin, is by playing the file progressbar.js right in the public/js from Laravel, after that, I write where I want the effect to apply, ex:

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 appeal to the npm of node.js.

As per the plugin documentation, surround npm install progressbar.js(the installation is done successfully), after that I go to webpack.mix.js to use the laravel-mix of Laravel, I add what I want the laravel-mix copy for me on public of Laravel:

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

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

Rodo the npm run dev, So far, ok! file copied to Laravel’s public successfully... I’ll go in my file from app.blade.php add the script in the same place as the old one (that’s working), the one I think is right:

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

And that’s it! Mistake:

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

One thing I realized, after I used the laravel-mix the script gave a change, I do not know what influenced the change, but it was noted that influenced rsrs... Since the script is really 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’ve uploaded the project to Github so you can take a look... Github repository

Answer 1

Hello, looking at your project I found the problems friend...

Importing Javascript Libraries

---

In the archive located in

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

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

There you can observe that he does this import

require('./bootstrap');

In which it imports a file located in the same folder, this file contains all the necessary bootstrap settings, including jQuery, Popper and more.

Knowing this now 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 in simply put:

// Loading progressbar.js

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

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

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

REMEMBER: In the archive app.blade.php i removed the line that makes the require of the Progressbar, because you don’t have to.

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 Crypts, and you only care about 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 the application

---

Ready, 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