How to import and use a package installed via NPM

Question

I installed 'daterangepicker' using following commands:

npm install daterangepicker
npm install @types/daterangepicker

and then tried to import it and use like that:

import { DateRangePicker } from 'daterangepicker';

const picker = new DateRangePicker('#date-picker', {
  startDate: '01/01/2022',
  endDate: '01/31/2022'
});

but it gives me the following error:

'DateRangePicker' only reffers to a type, but is being used as a value here

in their documentation they are using jQuery to call it but I wonder if I can import it and use in .ts file somehow? http://www.daterangepicker.com/

Answer 1

This is an old javascript module that isn't configured / setup for ES module import.

You can use this syntax to import and use it:

import * as DateRangePickerImport from 'daterangepicker';
var DateRangePicker = (DateRangePickerImport as any).default;

const picker = new DateRangePicker(document.getElementById(''), {
  startDate: '01/01/2022',
  endDate: '01/31/2022',
});

Or you can do as suggested in the comments and use require by importing @types/node and then:

var DateRangePicker = require('daterangepicker');

const picker = new DateRangePicker(document.getElementById(''), {
  startDate: '01/01/2022',
  endDate: '01/31/2022',
});

Or you can set "esModuleInterop": true in your tsconfig and then:

import DateRangePicker from 'daterangepicker';

const picker = new DateRangePicker(document.getElementById(''), {
  startDate: '01/01/2022',
  endDate: '01/31/2022',
});

https://www.typescriptlang.org/docs/handbook/modules.html