Exports between the lib and es module differ.

[LavaToaster]

Hey There,

In the project I'm using this in I've come across an interesting scenario. When node compiles and renders the page, it uses the lib version, and when webpack compiles the browser version, it uses the es module. Now, this seems to have been fine for everything else, but this package.

This would be because you have

exports.default = MaskedInput;
module.exports = exports['default'];

Now, in typescript, you can't do the above as it doesn't automatically assume default is the object itself. At least, that's what I think is going on.

But I've now got conflicting imports for this package.

import * as MaskedInput from 'react-maskedinput'; // works with commonjs module without default export
import MaskedInput from 'react-maskedinput'; // works with es module

I'm not sure what's the best way to go about dealing with this, and I'm conscious that I've submitted something to update the typings for this package that actually conflict with the two different ways. See DefinitelyTyped/DefinitelyTyped#18058.

[LavaToaster]

Workaround I have for now.

// Work around the module being used in CJS and ES6 module formats.
let MaskedInput = require('react-maskedinput');

if (MaskedInput.default) {
  MaskedInput = MaskedInput.default;
}

[MirKml]

I experienced same problems with Typescript (version 3.5.3)

• import MaskedInput from 'react-maskedinput' doesn't work for Typescript es6 target module esnext
• import MaskedInput from 'react-maskedinput/es' works for Typescript es6 target module esnext for later webpack build, but doesn't work for target es5 module commonJs for tests through jest

this one seems to work form me for all cases

import MaskedInput from 'react-maskedinput/lib'