Laravel - Uncaught TypeError: Cannot read properties of null (reading 'value')

Question

I'm trying to use lightpick datepicker on my application. Unfortunately this works when I don't follow standards, and doesn't work when I do.
Blade :

@section('page_script')
    <script src="{{ url('js/themeFiles/moment/moment.min.js') }}"></script>
    <script src="{{ url('js/themeFiles/lightpick/lightpick.js') }}"></script>
    <script src="{{ url('js/custom/datePicker.js') }}"></script>
    <script src="{{ url('js/custom/planningStats.js') }}"></script>
@endsection

@section('content')
    @include('planning.partials.planningStatsForm')
@endsection

datePicker.js:

var picker = new Lightpick({
    field: document.getElementById('ddebut_picker'),
    secondField: document.getElementById('dfin_picker'),
    repick: true,
    lang: 'fr',
    singleDate: false,
    selectForward: true
});

Error (if I use the above code) :

If I use the script tags inside @section('content') and do no use separate @section('page_script') section then everything works perfectly. But for the current code, it doesn't work. I haven't changed anything in the js, controller, blade or model.

after the page load, have you checked that scripts are loading well? — Mitesh Rathod, Jan 21 '22 at 12:03
Thank you @MiteshRathod. The scripts are loading properly. but the order was incorrect. — Aman Devrath, Jan 21 '22 at 12:13
Thank you @FaizanAli, I had to make scripts work using `page_script` section — Aman Devrath, Jan 21 '22 at 12:22

score 1 · Answer 1 · answered Jan 21 '22 at 12:21

My JS was not able to find the elements, as my order was incorrect (even when it was correct when I checked the page source. Confusing though.). I used defer attribute to solve my issue.

[defer, a Boolean attribute,] is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

According to this answer, order matters. There are other ways to solve the issue but I found defer to be most useful for external scripts.

@section('page_script')
    <script src="{{ url('js/themeFiles/moment/moment.js') }}" defer></script>
    <script src="{{ url('js/themeFiles/moment/moment.min.js') }}" defer></script>
    <script src="{{ url('js/themeFiles/lightpick/lightpick.js') }}" defer></script>
    <script src="{{ url('js/custom/datePicker.js') }}" defer></script>
    <script src="{{ url('js/custom/planningStats.js') }}" defer></script>
@endsection

Also works with defer. +1upvote from me! – Maik Lowrey Jan 24 '22 at 08:50 — Maik Lowrey, Jan 24 '22 at 08:50

score 1 · Answer 2 · answered Jan 21 '22 at 12:47

1

It deepens where the page_scripts in your layout included. I think in the head. Search in your code for @stack('page_script').

You can add in your Layout a section above the closing body. @stack('custom_scripts'). Then would be work if you "follow standard". Change only the name from page_script to @section('custom_script').

answered Jan 21 '22 at 12:47

Maik Lowrey

15,957
6
40
79

1

can you explain what does `@stack` does? is it any different than `@section('page_script')` ? – Aman Devrath Jan 24 '22 at 07:46
1

Namaste @AmanDevrath ! Yes of course. Stack reserves the space for scripts or code blocks pushed by a child layout. "Stack directive as self-explaining it stacks the scripts where you want to stack them." https://dev.to/abrardev99/how-to-use-laravel-blade-stack-scripts-2752 – Maik Lowrey Jan 24 '22 at 07:56
1

@AmanDevrath With stack you can order your script loading. But your solution to do it with defer it is also a good approach. – Maik Lowrey Jan 24 '22 at 07:58
@AmanDevrath You understood? – Maik Lowrey Jan 24 '22 at 08:38
1

yes. understood perfectly. Thank you so much. I'll try this approach once. Upvoted. – Aman Devrath Jan 24 '22 at 08:44
@AmanDevrath धन्यवाद – Maik Lowrey Jan 24 '22 at 08:45
1

@MailLowrey Danke schön – Aman Devrath Jan 24 '22 at 09:51
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/241348/discussion-between-maik-lowrey-and-aman-devrath). – Maik Lowrey Jan 24 '22 at 09:56
@AmanDevrath If was helpful you can you accept this answer. ;-) – Maik Lowrey Jan 24 '22 at 09:58

Laravel - Uncaught TypeError: Cannot read properties of null (reading 'value')

2 Answers2