Use custom JavaScript function with Laravel 5.6

Question

I'm having some trouble using custom JavaScript function within Laravel 5.6 and can't figure out what I'm doing wrong.

I have a custom file created in /assets/js/ labeled helpers.js with the following function:

export const isBetween = function(n, a, b) {
    return (n - a) * (n - b) <= 0
};

Then, in app.js I imported the file:

import { isBetween } from './helpers.js';

If I do console.log(isBetween(20, 1, 40) inside app.js, it works properly. However, I can't execute inside my blade template; the console log says it's not defined. E.g.:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        console.log(isBetween(20, 1, 40));
    });
</script>

Paras · Accepted Answer · 2018-09-28 21:04:52Z

3

We use import in ES6/ES5 to import specific modules. But if you want to use it outside of your app.js, then you must make it a global variable like so:

window.isBetween = isBetween; // add this in helpers.js

answered Sep 28, 2018 at 21:04

Paras

9,51336 silver badges56 bronze badges

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

2 Comments

Keith Petrillo Over a year ago

Great, that solved my problem so I'll accept it as the answer, but I'm curious if this is the best practice for a Laravel application?

Paras Over a year ago

Well, it's perfectly fine to have global variables if you have 2 separate scripts (app.js and say another) that are interdependent. All you have to make sure is that they don't conflict with other JS scripts or libraries. Typically, well written libraries encapsulate most variables, so I dont think you will have to worry about this. But if you want to be really cautious you can namespace it like so: window.myAppName = {}; window.myAppName.isBetween = isBetween and in your JQuery use myAppName.isBetween(....). That way all your global functions can share your app namespace

Dylan Pierce · Accepted Answer · 2018-09-28 20:49:01Z

0

If you're running mix in a terminal with npm run watch and you're still experiencing this issue then double check to make sure you're including the mix'd assets on your blade template:

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

Also, make sure that this <script> tag is above any of your other JS scripts.

answered Sep 28, 2018 at 20:49

Dylan Pierce

4,6883 gold badges41 silver badges49 bronze badges

1 Comment

Keith Petrillo Over a year ago

Thanks for the comment, but yes, I am running npm run watch and app.js is above my other scripts. I am using <script type="text/javascript" src="{{ asset('js/app.js') }}"></script> instead of mix(), but I tried that as well and didn't work.

Collectives™ on Stack Overflow

Use custom JavaScript function with Laravel 5.6

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related