Home>

I am developing a bulletin board application with Laravel, and added the login function by the following method.

How to implement Login function in Laravel 6/7

The following files (/main.blade.php) Was created.

resources/views/main.blade.php

<!DOCTYPE html>
<html>
<head>
 ~abridgement~
</head>
<body>
  
    ~abridgement~
  
<script src="{{ asset('js/main.js') }}"></script>
</body>
</html>

public/js/main.js

'use strict';
const formWrap = document.querySelector('.formWrap');
const letsNew = document.getElementById('letsNew');
//Clicking event changes class
letsNew.addEventListener('click', ()=>{
  if(formWrap.classList.contains('closed')){
    formWrap.classList.remove('closed');
    formWrap.classList.add('opened');
  }else if(formWrap.classList.contains('opened')){
    formWrap.classList.remove('opened');
    formWrap.classList.add('closed');
  };
});

After that, it was automatically generated by implementing the Login function as follows.app.blade.phpI added a script tag to and tried to load javascript, but the click event of javascript did not work. .. ..

resources/views/main.blade.php (after modification)

@extends('layouts.app')
@section('content')
  
    ~abridgement~
  
@endsection


resources/views/layouts/app.blade.php

<!doctype html>
<html>getLocale()) }}">
<head>
~abridgement~
</head>
<body>
    
       ~abridgement~
      <main>
            @yield('content')
      </main>
    
  <!-- FIXME JS does not work -->
  <script src="{{ asset('js/main.js') }}"></script>
</body>
</html>

main.blade.phpThe click event was working when I was just loading the javascript,app.blade.phpIt doesn't work when read from.

Also, the following warning is displayed on the chrome console.

DevTools failed to load SourceMap: Could not load content for http://localhost/js/popper.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE


In addition,main.jsIn a fileconsole.log('hello');When I try to write,

hello
DevTools failed to load SourceMap: Could not load content for http://localhost/js/popper.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE


Is displayed,main.jsI'm guessing the file itself is readable, but I'm not sure why the event listener isn't working.
app.blade.phpIs it necessary to change some settings when reading javascript with?

Thanks for your advice.

  • Answer # 1

    I'm sorry I can't explain why it doesn't work,

    Try moving the description in app.blade.php under app.js as shown below.

    <script src="{{ asset('js/app.js') }}" defer></script>
    <script src="{{ asset('js/main.js') }}" defer></script>


    After that, try putting it together in app.js with Laravel Mix (remove the script tag that loads main.js)

    resources/js/app.js

    require('./main');// add


    Build with the following command

    $npm run dev


    Also, if you write below, you can output as a separate file at build time.

    mix.js('resources/js/app.js','public/js')
        .js('resources/js/main.js','public/js')
        .sass('resources/sass/app.scss','public/css');