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 (

;

); }

You can see an example working [here](https://aimementoring.github.io/blueprint/docs/components/index.html#phoneinput), using Styleguidist to generate the doc...So apparently the component works, but when we build it with Rollup, the whole library is broken

Code:
<!--- reproduce this bug. Include code to reproduce, if relevant -->
```js

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

[aquinq]

Same issue, it also happened while updating our code base from CRA to Vite. The issue is libphonenumber-js-utils expects this to resolve to window, which works when bundling it with webpack but not with Vite, Vite creates an ES Module bundle and by default this is undefined at the top-level of a module in strict mode.

There are many ways to fix it, the most straightforward might be to apply the following patch

diff --git a/node_modules/libphonenumber-js-utils/dist/libphonenumber.js b/node_modules/libphonenumber-js-utils/dist/libphonenumber.js
index 555d38a..cc42f83 100644
--- a/node_modules/libphonenumber-js-utils/dist/libphonenumber.js
+++ b/node_modules/libphonenumber-js-utils/dist/libphonenumber.js
@@ -461,4 +461,4 @@ if(1<d.length&&"0"==d.charAt(0)){u(f,4,!0);for(a=1;a<d.length-1&&"0"==d.charAt(a
 m("intlTelInputUtils.getNumberType",function(a,b){try{var c=M.a();var d=Z(c,a,b),e=Oa(c,d),f=S(c,y(d,1),e);if(null==f)var g=-1;else{var h=R(d);g=W(h,f)}return g}catch(l){return-99}});
 m("intlTelInputUtils.getValidationError",function(a,b){try{var c=M.a(),d=Z(c,a,b);return Pa(c,d)}catch(e){return"Invalid country calling code"==e.message?1:"The string supplied did not seem to be a phone number"==e.message?4:"Phone number too short after IDD"==e.message||"The string supplied is too short to be a phone number"==e?2:"The string supplied is too long to be a phone number"==e.message?3:-99}});
 m("intlTelInputUtils.isValidNumber",function(a,b){try{var c=M.a(),d=Z(c,a,b);var e=Oa(c,d),f=y(d,1),g=S(c,f,e),h;if(!(h=null==g)){var l;if(l="001"!=e){var z=U(c,e);if(null==z)throw Error("Invalid region code: "+e);var L=y(z,10);l=f!=L}h=l}if(h)var va=!1;else{var Ta=R(d);va=-1!=W(Ta,g)}return va}catch(Ua){return!1}});m("intlTelInputUtils.numberFormat",{E164:0,INTERNATIONAL:1,NATIONAL:2,RFC3966:3});
-m("intlTelInputUtils.numberType",{FIXED_LINE:0,MOBILE:1,FIXED_LINE_OR_MOBILE:2,TOLL_FREE:3,PREMIUM_RATE:4,SHARED_COST:5,VOIP:6,PERSONAL_NUMBER:7,PAGER:8,UAN:9,VOICEMAIL:10,UNKNOWN:-1});m("intlTelInputUtils.validationError",{IS_POSSIBLE:0,INVALID_COUNTRY_CODE:1,TOO_SHORT:2,TOO_LONG:3,NOT_A_NUMBER:4});})();
+m("intlTelInputUtils.numberType",{FIXED_LINE:0,MOBILE:1,FIXED_LINE_OR_MOBILE:2,TOLL_FREE:3,PREMIUM_RATE:4,SHARED_COST:5,VOIP:6,PERSONAL_NUMBER:7,PAGER:8,UAN:9,VOICEMAIL:10,UNKNOWN:-1});m("intlTelInputUtils.validationError",{IS_POSSIBLE:0,INVALID_COUNTRY_CODE:1,TOO_SHORT:2,TOO_LONG:3,NOT_A_NUMBER:4});}).bind(window)();

Alternatively, In a Vite context, instead of applying a patch you can set an alias to libphonenumber-js-utils imports :

1. Create a libphonenumber-js-utils-alias.js file in the same folder as your vite config, with the following content

   
   // libphonenumber-js-utils-alias.js

(function alias() { import('libphonenumber-js-utils'); })(window);

2. Update your Vite config to resolve imports of `libphonenumber-js-utils` to the alias file
```ts
// vite.config.js

import { defineConfig } from 'vite';

import path from 'path';

export default defineConfig(() => ({
  resolve: {
    alias: {
      'libphonenumber-js-utils': path.resolve(__dirname, 'libphonenumber-js-utils-alias.js'),
    },
  },
}));