1

I'm trying to have different JS files for each Blade View in Laravel to help keep the project structure clean.

My problem is, when I try to access a function from that JS file in a Blade view, the console returns an error of:

Uncaught ReferenceError: myFunc is not defined at HTMLButtonElement.onclick

But the file is there and it logs the console message from that js file.

Here are my files and structure:

resources/js/index.js

console.log("Hello from index js");

function myFunc() {
    console.log("Hello");
}

resources/views/layout/master.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
    </head>
    <body>
       @yield('content')
       {{-- @yield('js') --}}
       @stack('js')
    </body>
</html>

resources/views/index.blade.php

@extends('layout.master')
@section('content')
    <h1>Works</h1>
    <button onclick="myFunc()">Click</button>
@endsection
@push('js')
<script src="{{ asset('js/index.js')}}"></script>
@endpush

webpackmix.mix.js

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

mix.js("resources/js/app.js", "public/js").postCss(
    "resources/css/app.css",
    "public/css",
    [
        //
    ]
);

mix.js("resources/js/index.js", "public/js");

2 Answers 2

0

Your function defined in script that loaded after main body content, but you trying to access this function in main body content.

  • Try to switch to selector for the button in JS file
  • Or load script sync before body (BAD: defers content render)
3
  • Okay I see, thanks Victor, but why is it that if I place my JS code between two script tags in the index.blade.php instead of providing the src to the JS file, it works?
    – Murray OB
    Jan 26, 2022 at 13:39
  • @MurrayOB, seems like there is working variable hoisting
    – Victor S.
    Jan 27, 2022 at 14:55
  • 1
    Using document.querySelector and adding an eventListener worked.
    – Murray OB
    Jan 27, 2022 at 18:30
0

@murrayOB you can just create your separate js file in public and then js folder and just include it in your default.blade.php file like that <script src="{{asset('js/common-flow.js')}}"></script> and after that just call any function from blade file written in that specific common-flow file

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.