Can not run JS code with a Laravel Blade stack

Question

This code runs:

@push('scripts')
    <script>
        function esFeatureDetect() {
            console.log('Feature detection function has been called!');
        }
    </script>
@endpush

@push('scripts')
    <script>
        esFeatureDetect();
    </script>
@endpush

The problem is that if I take the function and put it in another file (using webpack), suddenly the function is not found.

Here is what the code looks like in the external file:

function esFeatureDetect() {
    console.log('Feature detection function has been called!');
}

Webpack bundles it fine. (I use Webpack for many other files too).

Here are the new blade directives:

@push('scripts')
    <script src="/dist/js/full-feature-detect.js"></script>
@endpush

@push('scripts')
    <script>
        esFeatureDetect();
    </script>
@endpush

But I get an error saying that:

esFeatureDetect is not defined

Why is it so?

The file is being pulled into the browser file, I can see the code in the console. I also tried the following call:

window.onload = esFeatureDetect;

and

window.onload = esFeatureDetect();

but neither helped.

Rwd · Accepted Answer · 2019-03-09 08:40:11Z

4

If you want to be able to use you function in the global scope you'll need to attach it to the window object.

window.esFeatureDetect = function () {
    console.log('Feature detection function has been called!');
};

answered Mar 9, 2019 at 8:40

Rwd

35.3k7 gold badges71 silver badges85 bronze badges

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

3 Comments

DatsunBing Over a year ago

Thanks Ross, that nailed it. But why? Why do I need to assign it to the window just because it is coming from a different file?

Rwd Over a year ago

@KimPrince This is simply down to scope. scotch.io/tutorials/understanding-scope-in-javascript. My wording of this might be a bit off but essentially webpack will create a bundle from your code which will be made up of one or many modules. When you define a function in this way it will only be able to the scope of that module e.g. function a() { function b() {}} you would only be able to call b(); from inside a();

DatsunBing Over a year ago

Thanks Ross, that makes sense.

Ahmed M. Elhalaby · Accepted Answer · 2019-03-09 08:20:32Z

0

have you tried to use asset() function?

<script src="{{asset('/dist/js/full-feature-detect.js')}}"></script>

answered Mar 9, 2019 at 8:20

Ahmed M. Elhalaby

396 bronze badges

Comments

Artem · Accepted Answer · 2025-08-06 05:18:22Z

0

Just add in body:

<script>
        esFeatureDetect = function () {
            console.log('Feature detection function has been called!');
        };
            
        esFeatureDetect();
</script>

answered Aug 6 at 5:18

Artem

811 silver badge5 bronze badges

Collectives™ on Stack Overflow

Can not run JS code with a Laravel Blade stack

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related