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");
Your function defined in script that loaded after main body content, but you trying to access this function in main body content.