Open bsl-zcs opened 3 years ago
The workaround that worked for me was this:
import { FC } from 'react';
import * as DatetimeModule from 'react-datetime';
import { DatetimepickerProps } from 'react-datetime';
import 'moment-timezone';
import './style.css';
/**
* This makes typescript work with the react-datetime module
*/
const Datetime: FC<DatetimepickerProps> = (() => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let value = DatetimeModule as any;
while ('default' in value) value = value.default;
return value;
})();
export default Datetime;
I'm Submitting a ...
Steps to Reproduce
import the library as in typescript docs section
import * as Datetime from 'react-datetime';
use the component anywherereturn <Datetime />;
compile with typescript havingallowSyntheticDefaultImports: false
and open in a browserExpected Results
the component should be imported and used correctly
Actual Results
the module itself is passed to React.createElement instead of component and in runtime it breaks with message "Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."
Other Information (e.g. stacktraces, related issues, suggestions how to fix)
that's because the component was migrated to ES6 class declaration with proper default export while typings remained for
module.exports = Datetime
it's clearly a bug, affecting any codebase with a strict default imports policy, and the possible workaround is quite ugly:
on the other hand the fix is so trivial (just add default to export in .d.ts) that i've attempted to perform it right here in github's web interface (#769), only to realize that it is a really breaking change for all typescript users who imports it in old way.
now i see three possible options:
in my opinion the third option isn't pretty but is most practical.