Flatpickr: has no default export and flatpickr is undefined

[hoppities]

I'm experiencing two problems.

1. The documentation says to import flatpickr from "flatpickr", but when I do that, webpack errors on the build with the following log message

TS1192: Module '"pathtoplace/node_modules/flatpickr/index"' has no default export.

I can successfully import flatpickr by using import * as flatpickr from "flatpickr"

This works fine locally, but when it is deployed to a test server and minified (issue #2), I receive the following error:

e is not a function

flatpickr is available globally, but the minified code does not run and I cannot create a new flatpickr instance.

Code that is being called and failing on minification.

            this.flatpickrObj = flatpickr("." + this.classes, this.config);
            if (this.value) {
                this.flatpickrObj.setDate(this.value, true);
            }

[hoppities]

Looks like "allowSyntheticDefaultImports": true, fixed the issue.

[misantronic]

Although allowSyntheticDefaultImports solves the problem, I don't like to enable this option for my whole project.
I would love to solve it, but I don't quite get why there are 2 index.d.ts files in the installed folder. /index.d.ts (with no default export) and /dist/index.d.ts with a default export but no other declarations exported.
There might be something wrong.

[windware-ono]

Falling back to calling as a jQuery method until this is fixed.

[Bigdragon13th]

@chmln I think, at least you should state that

const flatpickr = require("flatpickr");

should be changed to

const flatpickr = require("flatpickr").default;

in the document: https://chmln.github.io/flatpickr/getting-started/
And also in the changelog, because this is breaking change.

[Patrick1900]

here is our workaround:

import * as flatpickerNamespace from ‘flatpickr’;

// tslint:disable-next-line:no-any
const flatpickr: typeof flatpickerNamespace = (flatpickerNamespace as any).default;

private fp?: flatpickerNamespace.Instance;

[vdesdoigts]

Hello, first of all, thanks for this awesome datepicker.
I still can't use import flatpickr from 'flatpickr', Error: 'default' is not exported by node_modules/flatpickr/dist/flatpickr.js can you help me with this ?

I use [email protected]. Thanks!

[vdesdoigts]

It's work well https://codesandbox.io/s/yk38o699jv
Maybe it is the rollup config of bootstrap documentation.

[sureshbabudj]

As per Patrick1900 comment, I have modified the import of flatpickr, Locally its working. But when in travis build i am getting the below error

ERROR in node_modules/comp/src/date-picker-single/date-picker-single.component.ts(198,16): error TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'typeof "/home/travis/build/cloudMatrix-CAM/shared/node_modules/flatpickr/dist/ty...' has no compatible call signatures.

Any idea how to resolve this

[2f4f4f]

@chmln
Any update on this?

Vscode also shows the same "Cannot invoke an expression whose type lacks a call signature" error with every suggested workaround in this issue.

Using flatpickr v4.5.0.

[2f4f4f]

Finally got it to work thanks to this comment: https://github.com/t4t5/sweetalert/issues/799#issuecomment-370228666

import * as _flatpickr from 'flatpickr';
import { FlatpickrFn } from 'flatpickr/dist/types/instance';
const flatpickr: FlatpickrFn = _flatpickr as any;

[Sayan751]

I faced the same issue, and bumped into this thread. I recently changed to flatpickr for one of my project, as it looks pretty neat, and created using TypeScript.

That's why it is more irritating when I faced typing issues, which should not be a problem for a package created with TypeScript. It is funny to see that people need to fallback to the above mentioned workarounds to correct the typings. Ideally, there should not be any need of above mentioned workarounds, if the typings are correct.

Please consider reopen this issue (or open a new one...) and correct the typings for once and for all.

P.S.: It is not clear to why there is a need for namespace and default import? With module system, it seems unnecessary to use nampespaces.

[Ashish-TalentMicro]

npm install --save flatpickr angularx-flatpickr
This'll work.

[janus007]

I faced the same issue, and bumped into this thread. I recently changed to flatpickr for one of my project, as it looks pretty neat, and created using TypeScript.

That's why it is more irritating when I faced typing issues, which should not be a problem for a package created with TypeScript. It is funny to see that people need to fallback to the above mentioned workarounds to correct the typings. Ideally, there should not be any need of above mentioned workarounds, if the typings are correct.

Please consider reopen this issue (or open a new one...) and correct the typings for once and for all.

P.S.: It is not clear to why there is a need for namespace and default import? With module system, it seems unnecessary to use nampespaces.

btw. Do you have a working Typescript example?

[ghiscoding]

Finally got it to work thanks to this comment: t4t5/sweetalert#799 (comment)

import * as _flatpickr from 'flatpickr';
import { FlatpickrFn } from 'flatpickr/dist/types/instance';
const flatpickr: FlatpickrFn = _flatpickr as any;

Thanks this is the best option that also works with Rollup.js and still provides the Types, which reminds me that I actually do the same trick with Moment.js but I was missing the Types, so thanks again this patch works for me... until we can have a .default not throwing an error of flatpickr is not a function