TypeError: Failed to resolve module specifier '@popperjs/core'

[Ninita1]

I have a CanJS component rendering a date picker using tempus-dominus and when I click in the picker icon to open it, I'm getting this error:

Uncaught (in promise) TypeError: Failed to resolve module specifier '@popperjs/core'
    at Display.createPopup (index.ts:289:6)
    at Display.show (index.ts:234:65)
    at Display.toggle (index.ts:501:21)
    at TempusDominus.toggle (tempus-dominus.ts:104:14)
    at TempusDominus._toggleClickEvent (tempus-dominus.ts:46:10)

I'm importing tempus-dominus and popper this way:

import '@popperjs/core';
import * as tempusDominus from '@eonasdan/tempus-dominus';

I'm not sure if I really need to import the popper but I already tried to import in different ways and I get always the same error.
I have installed:

@eonasdan/[email protected]
@popperjs/[email protected]

This is irrelevant but I'm initializing the date picker like this:

this.dateTimePicker = new tempusDominus.TempusDominus(dateTimePickerElem, {
      localization: {
        locale: this.getUserLanguage(),
        format: this.dateFormat
      },
      restrictions: {
        minDate: this.minDate,
        maxDate: this.maxDate
      }
    });

The error is happening here:

What I need to do to solve this?

[Eonasdan]

What version is this and can you reproduce it on stackblitz?

[Ninita1]

The version is in my question. Again, I have installed:

@eonasdan/[email protected]
@popperjs/[email protected]

[Eonasdan]

Sorry I overlooked that.

[Ninita1]

I still don't know if we really need to specify the import of the Popper plugin.
However, for my CanJS project, seems I solved the problem importing Popper normally and adding it to the window before initializing the tempus-dominus picker:

import * as Popper from '@popperjs/core';
import * as tempusDominus from '@eonasdan/tempus-dominus';

window.Popper = Popper;
this.dateTimePicker = new tempusDominus.TempusDominus(dateTimePickerElem, {
      localization: {
        locale: this.getUserLanguage(),
        format: this.dateFormat
      },
      restrictions: {
        minDate: this.minDate,
        maxDate: this.maxDate
      }
    });

If anyone has a better solution, please share.

Even after I did this, the picker was not showing up when I clicked on it and I realized that it is mandatory to import the tempus-dominus CSS file. I added to my component LESS file:

@import '../../../../node_modules/@eonasdan/tempus-dominus/ dist/css/tempus-dominus.css';

Also, it seems to be mandatory to install and import Bootstrap, otherwise the buttons do not appear in the picker.

My personal note: the documentation of tempus-dominus should be improved.

[Eonasdan]

Bootstrap is not required. Only popper or some other positioning system is required. Of course you need to <link or import the pickers style sheet. If you don't have icons then you didn't provide either font awesome 6 or manage the icon settings to use something else.

There are examples of using imports

[Ninita1]

Yes, we can override the bootstrap icons with our own icons, like this for example:

.tempus-dominus-widget.light .fa-solid {
    &.fa-calendar:before {
      &:extend(.icon.calendar:before);
    }

    &.fa-clock:before {
      &:extend(.icon.clock:before);
    }

    &.fa-arrow-up:before {
      &:extend(.icon.chevron-up:before);
    }

    &.fa-arrow-down:before {
      &:extend(.icon.chevron-down:before);
    }

    &.fa-chevron-right:before {
      &:extend(.icon.arrow-right:before);
    }

    &.fa-chevron-left:before {
      &:extend(.icon.arrow-left:before);
    }
}

[Eonasdan]

You don't need to do that, just set the icon options: https://getdatepicker.com/6/options/display.html#icons