Cannot use 'in' operator to search for 'intlTelInputUtils' in undefined, with rollup

[kbardi]

Expected Behavior

I'm using this component inside our library, and we use rollup to build the library. We have multiple components we can use from that library, also a PhoneInput component which uses react-intl-phone-input, so the idea is to use our PhoneInput component correctly for other projects in the same way we use all the other components.

Current Behavior

When I add react-intl-tel-input to the component, and we build the library, I cannot use any component because everything is broken. The error shows:

I think it has some compatibility issue with rollup, because when we use directly the same component (copied from here and pasted in the project) in our projects it works, so maybe it is a dependency that is wrong

Possible Solution

Not sure, but review dependencies

Steps to Reproduce

1. Build the repo added in below in Demo, applying the mentioned change (Clone and run yarn && yarn deploy)
2. execute yarn link just to create the ref to the library...it will show you a name assigned to the library
3. In a different project with React, run yarn link "aime-blueprint", if the previous command showed you a different assigned name, please update the name on the command
4. Run yarn start trying to use a component from the library...and the error appears directly
5. To use a component, you can do:

import { Components } from 'aime-blueprint';

const { PhoneInput } = Components;
...
render() {
  return (
    <div>
        <PhoneInput currentSite="au" placeholder="Phone" name="phone" value={phone} required />;
    </div>
  );
}

You can see an example working here, using Styleguidist to generate the doc...So apparently the component works, but when we build it with Rollup, the whole library is broken

Code:

You can see the project here, and the phoneInput is not imported just to avoid breaking all the components, but you can add this line export { default as PhoneInput } from './phoneInput'; on file src/lib/components/index.js and test it...

Environment

• Version: "react-intl-tel-input": "^7.0.1"
• Browser: Version 77.0.3865.90 (Official Build) (64-bit)
• Operating System (or Browser): macOS Mojave v10.14.6
• Node Version: v12.11.0
• npm version: v6.11.3

Detailed Description

[m-nathani]

hii, did anyone found the solution to this problem ?

i am also facing the same problem using the latest version 8.0.4 :

Uncaught ReferenceError: intlTelInputUtils is not defined

[DamageSami]

I am facing the same error message, although when trying to import 'libphonenumber-js-utils' in a Vite-project. Found this while debugging why my react-intl-tel-input stopped validating any numbers (always says a number is invalid), after trying to migrate my project from CRA to Vite. This error seems to be the root cause of my problems.

Is this project still being maintained?

[garethlowriehive]

Same issue here using rollup/vite