Laravel 5.8 how to include node_modules

I need to include tempusdominus datetimepicker to my Laravel 5.8 project but I am no able to load the scipts and styles correctly.

According documentation I tried to add this lines to my bootstrap.js.

try {
    window.$ = window.jQuery = require('jquery');

    mix.copy('node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css', 'public/css/tempusdominus.css');

    require('bootstrap');
    require('moment');
    require('tempusdominus-bootstrap-4');

    require('./main.js');
} catch (e) {}

Watcher says everything was compiled successfully but console throws me an error $(...).datetimepicker is not a function and I dont see any tempusdominus css in the public directory.

The script with $().datetimepicker is included via section at the very end of the file this way.

@section('scripts')
<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker({
            locale: 'sk'
        });
        $('#datetimepicker2').datetimepicker({
            locale: 'sk'
        });
    });
</script>
@endsection

What am I doing wrong?

SheldonCooper1

5 years ago

Level 1

I would really appreciate some help on the below. I have been looking at this for 2 days now and feel someone with more https://omegle.onl/ https://xender.vip/ experience might be able to point me in the right direction.

Laravel uses a queuing system. I have created queues and they work correctly. To run the queues in production however Laravel suggests using supervisor. I am hoping to run the queues on the same elastic beanstalk server as the Laravel application.

chr15k

5 years ago

Best Answer

Level 7

Hi @Čamo I got this working on a fresh Laravel build. My code is as follows:

app.js

require('./bootstrap');

global.moment = require('moment');

require('tempusdominus-bootstrap-4');

app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// Tempus Dominus
@import '~tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css';

boostrap.js

window._ = require('lodash');

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

and my. view:

<body>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>

    @section('scripts')
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker({
                locale: 'sk'
            });
            $('#datetimepicker2').datetimepicker({
                locale: 'sk'
            });
        });
    </script>
    @endsection

    @yield('scripts')
</body>

Hopefully this helps.. first see if global.moment = require('moment'); resolves your issue.

Čamo

5 years ago

Level 3

Hmmm I made it like you suggested. Console error is gone but input does nothing. Is there an error log of webpack compiler?

chr15k

5 years ago

Level 7

I added the minimal setup to my code from here https://tempusdominus.github.io/bootstrap-4/Usage/ and it's working as expected.

Čamo

5 years ago

Level 3

Sorry it was my bad. missing html attribute data-toggle on input. Now its working. Thanks a lot.

1 like

chr15k

5 years ago

Level 7

@Čamo no worries mate

Please or to participate in this conversation.