Using web-component in a React project, flags, and utils not working

[nidamunir-extreme]

Plugin version

e.g. v24.5.0 (please try latest version)

Steps to reproduce

I created a web-component using Lit.

Here is how I initialise this:

import intlTelInputWithUtils from 'intl-tel-input/intlTelInputWithUtils';

private initializeIntlTelInput(input: HTMLInputElement): any {
    const iti = intlTelInputWithUtils(input, {
      initialCountry: 'us',
      separateDialCode: true,
      strictMode: this.strictMode,
      countrySearch: this.countrySearch,
    });

    iti.setDisabled(this.isDisabled);
    iti.setNumber(this.initialValue);

    return iti;
  }

in .scss

// Import intl-tel-input styles
$flags-image-path: '~intl-tel-input/build/img/';
@import '~intl-tel-input/build/css/intlTelInput.css';

 --iti-path-flags-1x: url('#{$flags-image-path}flags.webp');

InitialValue, StrictMode, and CountrySearch are working just fine in web-components project.

But when I build my web-components project and use this component in another react project, InitialValue, StrictMode, and CountrySearch and flags are not working.

I don't understand how webpack is bundling this or how to configure this.

If I use import intlTelInputWithUtils from 'intl-tel-input/intlTelInputWithUtils';, shouldn't this automatically work in react project too? Can you tell me if I am missing any configuration?

[jackocnr]

I'm afraid I have no experience with web components. You'd be better off asking this question on StackOverflow.

Though one thing I would say: if you want to use this plugin in a react project, it might be easier to just use our react component directly (see readme)!