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


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.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');

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

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…


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


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

Importing Javascript Libraries

In the file located at


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

There you can see that it does this import


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:


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=""></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…


Scroll to Top