title: Tempus Dominus Bootstrap4 requires moment.js. (datetime picker)
body: <p>I am trying to add a DateTimePicker using Tempus Dominus Bootstrap4. But I am getting the following error.</p>
  
  <p><a href="https://i.stack.imgur.com/5mqfS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5mqfS.png" alt="console screenshot"></a>
  I use Laravel as a front-end. So I use laravel-mix.</p>
  
  <p>my blade file is below</p>
  
  <pre><code>@extends('layouts.app')
  
  
  @section('content')
  @if((Auth::user()-&gt;hasRole('teacher')) || (Auth::user()-&gt;hasRole('admin')) || (Auth::user()-&gt;hasRole('superadmin')) )
  &lt;div class="container"&gt;
      &lt;div class="row justify-content-center"&gt;
          &lt;div class="col-md-8"&gt;
              &lt;div class="card"&gt;
                  &lt;div class="card-header"&gt;{{__("Dashboard")}}&lt;/div&gt;
  
                  &lt;div class="card-body"&gt;
                      &lt;p&gt;{{ Auth::user()-&gt;name }}&lt;/p&gt;
                      &lt;p&gt;{{ $errors-&gt;first('JSONerror') }}&lt;/p&gt;   
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class="input-group date" id="datetimepicker1" data-target-input="nearest"&gt;
                          &lt;input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/&gt;
                          &lt;div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker"&gt;
                              &lt;div class="input-group-text"&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;script type="text/javascript"&gt;
                  $(function () {
                      $('#datetimepicker1').datetimepicker();
                  });
              &lt;/script&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  @else
  &lt;div class="container"&gt;
          &lt;div class="row justify-content-center"&gt;
              &lt;div class="col-md-8"&gt;
                  &lt;div class="card"&gt;
                      &lt;div class="card-header"&gt;Authority Problem&lt;/div&gt;
                      &lt;div class="card-body"&gt;
                          {{__("You do not have the authority to reach this page")}}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  @endif
  @endsection  
  </code></pre>
  
  <p>my layouts.app blade file is:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="{{ app()-&gt;getLocale() }}"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;!-- CSRF Token --&gt;
      &lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt;
  
      &lt;title&gt;{{ config('app.name', 'Laravel') }}&lt;/title&gt;
  
      &lt;!-- Scripts --&gt;
      &lt;script src="{{ asset('js/app.js') }}" defer&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Fonts --&gt;
      &lt;link rel="dns-prefetch" href="https://fonts.gstatic.com"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
      &lt;!-- Styles --&gt;
      &lt;link href="{{ asset('css/app.css') }}" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="{{ asset('css/fullcalendar.css') }}"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="app"&gt;
          &lt;nav class="navbar navbar-expand-md navbar-light navbar-laravel"&gt;
              &lt;div class="container"&gt;
                  &lt;a class="navbar-brand" href="{{ url('/') }}"&gt;
                      {{ config('app.name', 'Laravel') }}
                  &lt;/a&gt;
                  &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
                      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
                  &lt;/button&gt;
  
                  &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
                      &lt;!-- Left Side Of Navbar --&gt;
                      &lt;ul class="navbar-nav mr-auto"&gt;
  
                      &lt;/ul&gt;
  
                      &lt;!-- Right Side Of Navbar --&gt;
                      &lt;ul class="navbar-nav ml-auto"&gt;
                          &lt;!-- Authentication Links --&gt;
                          @guest
                              &lt;li&gt;&lt;a class="nav-link" href="{{ route('login') }}"&gt;{{ __('Login') }}&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a class="nav-link" href="{{ route('register') }}"&gt;{{ __('Register') }}&lt;/a&gt;&lt;/li&gt;
                          @else
                              &lt;li class="nav-item dropdown"&gt;
                                  &lt;a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre&gt;
                                      {{ Auth::user()-&gt;name }} &lt;span class="caret"&gt;&lt;/span&gt;
                                  &lt;/a&gt;
  
                                  &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                                      &lt;a class="dropdown-item" href="{{ route('logout') }}"
                                         onclick="event.preventDefault();
                                                       document.getElementById('logout-form').submit();"&gt;
                                          {{ __('Logout') }}
                                      &lt;/a&gt;
  
                                      &lt;form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"&gt;
                                          @csrf
                                      &lt;/form&gt;
                                  &lt;/div&gt;
                              &lt;/li&gt;
                          @endguest
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  
          &lt;main class="py-4"&gt;
              @yield('content')
          &lt;/main&gt;
      &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>my app.js file:</p>
  
  <pre><code>    /**
   * First we will load all of this project's JavaScript dependencies which
   * includes Vue and other libraries. It is a great starting point when
   * building robust, powerful web applications using Vue and Laravel.
   */
  
  require('./bootstrap');
  
  window.Vue = require('vue');
  
  /**
   * Next, we will create a fresh Vue application instance and attach it to
   * the page. Then, you may begin adding components to this application
   * or customize the JavaScript scaffolding to fit your unique needs.
   */
  
  Vue.component('example-component', require('./components/ExampleComponent.vue'));
  
  const app = new Vue({
      el: '#app'
  });
  Vue.config.devtools = true;
  
  $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  });
  </code></pre>
  
  <p>my bootstrap.js file:</p>
  
  <pre><code>window._ = require('lodash');
  window.Popper = require('popper.js').default;
  
  /**
   * We'll load jQuery and the Bootstrap jQuery plugin which provides support
   * for JavaScript based Bootstrap features such as modals and tabs. This
   * code may be modified to fit the specific needs of your application.
   */
  
  try {
      window.$ = window.jQuery = require('jquery');
  
      require('bootstrap');
  } catch (e) {
      alert("JQ is not loaded");
  }
  
  /**
   * We'll load the axios HTTP library which allows us to easily issue requests
   * to our Laravel back-end. This library automatically handles sending the
   * CSRF token as a header based on the value of the "XSRF" token cookie.
   */
  
  window.axios = require('axios');
  
  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  
  /**
   * Next we will register the CSRF Token as a common header with Axios so that
   * all outgoing HTTP requests automatically have it attached. This is just
   * a simple convenience so we don't have to attach every token manually.
   */
  
  let token = document.head.querySelector('meta[name="csrf-token"]');
  
  if (token) {
      window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
  } else {
      console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
  }
  
  /**
   * Echo exposes an expressive API for subscribing to channels and listening
   * for events that are broadcast by Laravel. Echo and event broadcasting
   * allows your team to easily build robust real-time web applications.
   */
  
  // import Echo from 'laravel-echo'
  
  // window.Pusher = require('pusher-js');
  
  // window.Echo = new Echo({
  //     broadcaster: 'pusher',
  //     key: process.env.MIX_PUSHER_APP_KEY,
  //     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
  //     encrypted: true
  // });
  
  
  /* 
  *For fullcalendar and reservation
  */
  //import $ from 'jquery';
  import 'moment';
  import 'fullcalendar';
  import 'tempusdominus-bootstrap-4';
  import 'moment-timezone';
  </code></pre>
  
  <p>The package.json file is like below.</p>
  
  <pre><code>    {
      "private": true,
      "scripts": {
          "dev": "npm run development",
          "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
          "watch": "npm run development -- --watch",
          "watch-poll": "npm run watch -- --watch-poll",
          "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
          "prod": "npm run production",
          "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
      },
      "devDependencies": {
          "axios": "^0.18",
          "bootstrap": "^4.0.0",
          "cross-env": "^5.1",
          "jquery": "^3.3.1",
          "laravel-mix": "^2.0",
          "lodash": "^4.17.4",
          "popper.js": "^1.12",
          "vue": "^2.5.7"
      },
      "dependencies": {
          "fullcalendar": "^3.9.0",
          "moment": "^2.21.0",
          "moment-timezone": "^0.5.14",
          "tempusdominus-bootstrap-4": "^5.0.0-alpha18"
      }
  }
  </code></pre>
  
  <p>Can you help me. I spent a lot of time with this problem.</p>