JS does not work after running "npm run dev"

Question

JS does not work after running "npm run dev"

Navigation

#1 by (1 votes)

3

Good afternoon, I'm studying Laravel 5.7 and was looking to use a plugin called progressbar.js . One of the ways to install the plugin is to play the file progressbar.js direct in public/js of Laravel, 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 appeal to npm of node.js .

According to the plugin's documentation, I circled npm install progressbar.js (the installation is done successfully), after that I go to webpack.mix.js to use laravel-mix of Laravel, add what I want laravel-mix to copy to min no public of Laravel:

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

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

Rodo npm run dev , so far, okay! file copied to Laravel's public successfully ... I'll add my script to the same file as the old one (which is working), as I think it is correct:

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

And that's it! Error:

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 app.blade.php the script changed, I do not know what influenced the change, but I noticed that it influenced rsrs ... Since the script is pretty big, I can not 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

Upload the project to GitHub so you can take a look ... GitHub Repository

node.js npm laravel

asked by anonymous 26.09.2018 / 20:12

1 answer

Java Spring Boot - Read a file from the Resources folder inside a .jar How to create a Bitmap greater than 9999 pixels

score 1 · Accepted Answer

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

Importing Javascript Libraries

In the file located at

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

This is where you should import the libraries you have 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, this file contains all necessary bootstrap settings, including jQuery, popper, and so on.

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

// Loading progressbar.js

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

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

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

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

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

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

So you let the webpack configure and builde your javascripts , and you only 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><scriptsrc="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/progressbar.js') }}"></script>

Restarting Application

That's it, just restart your application, build it so that the files are compiled and voilà .

I'd recommend using

npm run watch-poll

So your changes are reflected automatically ...

Sources:

link