Question 52078 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to import and use a package installed via NPM – Javascript

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/

Tags:

2

Answers


  1. 0

    Try using

        const DateRangePicker = require('daterangepicker');

    By using require instead of import, we can access the default export of the daterangepicker module as a value that can be instantiated with new.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search