Why do I get undefined JS with Laravel?

Question

I'm using Laravel and in my bootstrap.js file I have

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

and then I require the bootstrap.js file into app.js

require('./bootstrap');

And I use webpack.mix.js to compile it

mix.js('resources/assets/js/app.js', 'public/js')

If I attempt to access progressbar.js inside of app.js it works perfectly.

However, If I attempt to use it outside of app.js in script tag that comes after app.js on my pages, ProgressBar is undefined.

How can I access ProgressBar outside of my app.js but keep it imported via app.js ?

Example on index.blade.php

<script src="app.js" defer></script>
<script>
  const progress = new ProgressBar; //undefined...
</script>

Are you sure you get undefined? Doesn't seem reproducible to me. You really shouldn't be relying on const implementations in the browser either. — Devon Bessemer
– Devon Bessemer, Commented Sep 18, 2018 at 1:13
@Devon Have you tried to reproduce it? Secondly, why shouldn't I use const ? Are you saying I should use let or var instead? — ProEvilz
– ProEvilz, Commented Sep 18, 2018 at 1:21
Yes, it works fine. const and let are both es6, es6 features may not be implemented in all browsers. — Devon Bessemer
– Devon Bessemer, Commented Sep 18, 2018 at 1:23
@Devon Finally figured it out. I had defer on the <script> tag and for some reason that stopped it from working. As for const and let - caniuse.com/#search=const caniuse.com/#search=let Based off of that, I'm happy to use it — ProEvilz
– ProEvilz, Commented Sep 18, 2018 at 1:31
Missed that, yes, that would cause it because you're asynchronously loading your script so the new ProgressBar line would execute before your app.js has loaded. I've found many people still on Win 7 using IE, but if you're happy not supporting them, that's up to you. — Devon Bessemer
– Devon Bessemer, Commented Sep 18, 2018 at 1:37

ProEvilz · Accepted Answer · 2018-09-18 01:32:50Z

1

I had defer on the script tag and for some reason that stopped it from working.

Solution:

<script src="app.js" defer></script>

change to

<script src="app.js"></script>

answered Sep 18, 2018 at 1:32

ProEvilz

5,44311 gold badges47 silver badges81 bronze badges

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

Comments

Nurbol Alpysbayev · Accepted Answer · 2018-09-18 01:03:59Z

0

I think, that Webpack hides ProgressBar from you, even if you have ProgressBar assigned to the window. Because you know, Webpack thinks that the bundle has all the code of your app. Solution? Not to bundle it! Instead use minified version of ProgressBar and just load it like in good old times. It is perfectly OK, few nanoseconds better or worse, not noticeable.

answered Sep 18, 2018 at 1:03

Nurbol Alpysbayev

22.4k6 gold badges68 silver badges100 bronze badges

2 Comments

ProEvilz Over a year ago

But what if I want to use it inside of app.js as well? That would mean I've now loaded 2 instances of progressbar.js so I don't think this is a good solution

Nurbol Alpysbayev Over a year ago

I've thinked about it, though. It appears it is the case, unfortunately. Well, then I'd dig webpack docs about sharing data with outside of the bundle (with window object). Too bad, I am no Webpack expert (I hate it, frankly). Good news: it should be a very simple task. You only need to find a way to assign somehow the property to window.

Collectives™ on Stack Overflow

Why do I get undefined JS with Laravel?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related