tempus-dominus doesn't detect moment import

Question

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 ?

Answer 1

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'
    })
;

More informations in the Doc