Material-ui-pickers: Change the import in MomentUtils > index.d.ts

[SharathSreekumar]

Environment

| Tech | Version |
|---------------------|---------|
| material-ui-pickers | 1.0.0-rc.17 |
| material-ui | 1.2.0 |
| React | 16.3.2 |
| Browser | chrome-67.0.3396.99 |
| Peer library | moment-2.22.2 |

Change needed

From:
import defaultMoment from 'moment';
To:
import * as defaultMoment from 'moment';

[TrySound]

Use esModuleInterop: true
https://github.com/dmtrKovalenko/material-ui-pickers/issues/711

[revmischa]

esModuleInterop: true breaks other proper imports, such as import * as moment from 'moment'

[TrySound]

Ask them to fix their types.

[revmischa]

If you look at the official typescript documentation, say, setting up TS+React for example, you can see the proper way to do this:

import * as React from "react";

This is how typescript's own website documents doing this.
https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

You can see more examples here: https://www.typescriptlang.org/docs/handbook/module-resolution.html

[TrySound]

Well, yes. import * as React from 'react' is the right way. It's not callable import. This project uses the same way.
https://github.com/dmtrKovalenko/material-ui-pickers/blob/develop/lib/src/wrappers/ModalWrapper.tsx#L5

But if you import something like moment or one of date-fns utils which should be called then there is a problem. You cannot call it in valid esm.
https://rollupjs.org/repl?version=0.66.6&shareable=JTdCJTIybW9kdWxlcyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMColMjBhcyUyMG1hdGhzJTIwZnJvbSUyMCcuJTJGbWF0aHMuanMnJTNCJTVDbiU1Q25tYXRocygpJTIyJTdEJTJDJTdCJTIybmFtZSUyMiUzQSUyMm1hdGhzLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMiUyRiUyRiUyMG1hdGhzLmpzJTVDbiU1Q24lMkYlMkYlMjBUaGlzJTIwZnVuY3Rpb24lMjBpc24ndCUyMHVzZWQlMjBhbnl3aGVyZSUyQyUyMHNvJTVDbiUyRiUyRiUyMFJvbGx1cCUyMGV4Y2x1ZGVzJTIwaXQlMjBmcm9tJTIwdGhlJTIwYnVuZGxlLi4uJTVDbmV4cG9ydCUyMGZ1bmN0aW9uJTIwc3F1YXJlJTIwKCUyMHglMjApJTIwJTdCJTVDbiU1Q3RyZXR1cm4lMjB4JTIwKiUyMHglM0IlNUNuJTdEJTVDbiU1Q24lMkYlMkYlMjBUaGlzJTIwZnVuY3Rpb24lMjBnZXRzJTIwaW5jbHVkZWQlNUNuZXhwb3J0JTIwZnVuY3Rpb24lMjBjdWJlJTIwKCUyMHglMjApJTIwJTdCJTVDbiU1Q3QlMkYlMkYlMjByZXdyaXRlJTIwdGhpcyUyMGFzJTIwJTYwc3F1YXJlKCUyMHglMjApJTIwKiUyMHglNjAlNUNuJTVDdCUyRiUyRiUyMGFuZCUyMHNlZSUyMHdoYXQlMjBoYXBwZW5zISU1Q24lNUN0cmV0dXJuJTIweCUyMColMjB4JTIwKiUyMHglM0IlNUNuJTdEJTIyJTdEJTVEJTJDJTIyb3B0aW9ucyUyMiUzQSU3QiUyMmZvcm1hdCUyMiUzQSUyMmNqcyUyMiUyQyUyMm5hbWUlMjIlM0ElMjJteUJ1bmRsZSUyMiUyQyUyMmFtZCUyMiUzQSU3QiUyMmlkJTIyJTNBJTIyJTIyJTdEJTdEJTJDJTIyZXhhbXBsZSUyMiUzQW51bGwlN0Q=

[TrySound]

By default cjs and esm interop in typescript is broken and can be fixed with the option.

[revmischa]

import * as moment from 'moment'
and then
moment(foo)
will complain about not being a callable import IF you have esModuleInterop set to true. If you have it set to the default value, that is, you don't monkey with the default compiler options and use TS as described by numerous examples in their documentation, the above code compiles and runs fine.
You are suggesting a fix for a problem that is only a problem with your compiler option suggested for the fix in the first place. It's circular logic.
Callable imports using the * as foo syntax are permitted in the default TS compiler options.

[TrySound]

This problem is not about my compiler. Imported namespace cannot be callable by standard. It's a special object. Rollup just follows spec here. Webpack is just too loose.