'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?

laravellaravel-5node-moduleslaravel-5.8


Solution 1:[1]

First, install Bootstrap 4 and the Tempus Dominus package with NPM.

npm i bootstrap
npm i tempusdominus/bootstrap-4

You should see '[email protected]' in your package.json file.

Add this in your app.js file:

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    window.TempusDominusBootstrap4 = require('tempusdominus-bootstrap-4');

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

Then for the CSS add this to your app.scss:

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

@import '~tempusdominus-bootstrap-4/src/sass/tempusdominus-bootstrap-4';

Then compile your assets:

npm run prod

You should be in business now but don't forget this somewhere in your JS...

$('#datetimepicker').datetimepicker(FUNCTION)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions