I know that there's a bunch of question about moment and tempudominus-bootstrap-4 but most of the time it is linked to a user mistake and I didn't find reference of mine ...
So I'm using symfony framework and the webpack-encore bundle. I want to add tempusdominus to my file event.js to use dateTimePicker
//../assets/js/app.js
import $ from 'jquery';
import 'bootstrap';
import moment from 'moment';
import 'tempusdominus-bootstrap-4';
$(function () {
//some datepicker
});
when I refresh my page I get the following error
Error: Tempus Dominus Bootstrap4's requires moment.js. Moment.js must be included before Tempus Dominus Bootstrap4's JavaScript.
from here
// ../tempusdominus-bootstrap-4.js
if (typeof moment === 'undefined') {
throw new Error('Tempus Dominus Bootstrap4\'s requires moment.js. Moment.js must be included before Tempus Dominus Bootstrap4\'s JavaScript.');
}
So apparently my moment variable is undifined. I change my app.js file to render moment in the console
//../assets/js/app.js
import $ from 'jquery';
import 'bootstrap';
import moment from 'moment';
//import 'tempusdominus-bootstrap-4';
$(function () {
console.log("type of moment = "+ typeof(moment));
});
to get the following answer :
type of moment = function
moment IS defined, so why tempusDominus doesn't detect it ?
The answer came from the github repo here
I copy the message here :
You import the moment module in a JS file which is bundled by webpack.
Your imported moment instance is available at runtime (that's why you can console.log it), but is not globally available for non-module libraries (such as tempusdominus) relying on global objects to use it.
Using @symfony/webpack-encore, you can easily provide a global variable using Encore's .autoProvideVariables() method:
Encore
.autoProvideVariables({
// Update those to your needs
$: 'jquery',
moment: 'moment'
})
;