Showing invalid number even if the number is valid

[hasanomi778]

In my react app i used this package, i followed the instruction and copyed the code from (intl-tel-input/react/demo/ValidationApp.js). But there is a issue Im facing. Validation is not working. It is showing invalid everytime. Even if I put the valid number it is showing invalid.
I tryed to console the value of the input, but it is showing blank. I think the blank value is the resone for showing invalid number. But I haven't find the main issue.

See my component code blow

`import React, { useState } from 'react';
import IntlTelInput from 'intl-tel-input/react/build/IntlTelInput.esm';
import 'intl-tel-input/build/css/intlTelInput.css';

const errorMap = [
"Invalid number",
"Invalid country code",
"Too short",
"Too long",
"Invalid number",
];

function NumValid() {
const [isValid, setIsValid] = useState(null);
const [number, setNumber] = useState(null);
const [errorCode, setErrorCode] = useState(null);
const [notice, setNotice] = useState(null);

const handleSubmit = () => {
  if (isValid) {
    setNotice(`Valid number: ${number}`);
  } else {
    const errorMessage = errorMap[errorCode] || "Invalid number";
    setNotice(`Error: ${errorMessage}`);
  }
};

return (
  <form>
    <IntlTelInput
      onChangeNumber={setNumber}
      onChangeValidity={setIsValid}
      onChangeErrorCode={setErrorCode}
      initOptions={{
        initialCountry: "bd",
        showSelectedDialCode: true,
        utilsScript: "/intl-tel-input/js/utils.js?1707906286003",
      }}
    />
    <button type="button" onClick={handleSubmit}>Validate</button>
    {notice && <div className="notice">{notice}</div>}
  </form>
);

}

export default NumValid`

[jackocnr]

Can you check in the JS console, network tab - is the utils script loading successfully?

[hasanomi778]

Can you check in the JS console, network tab - is the utils script loading successfully?

its looking good status = 200

[jackocnr]

If you open intl-tel-input/react/demo/validation.html in a browser, does it work as expected?

[hasanomi778]

If you open intl-tel-input/react/demo/validation.html in a browser, does it work as expected?

Yes its working.

but my react component is not working, also there is another error appear (Uncaught SyntaxError: Unexpected token '<' (at utils.js?1707906286003:1:1)"). if i save in my ide then the error goes away.

[jackocnr]

The only thing I can think is to make sure you're using the latest version of the plugin.

Otherwise, I would need a live demo to be able to debug it.

[jackocnr]

Here is a codepen using the react component if you want to fork it.

Tho I have to say, if the demo is working ok, then it sounds like an issue with your own code, so StackOverflow might be the best place to ask for help with that.

[hasanomi778]

Here is a codepen using the react component if you want to fork it.

Tho I have to say, if the demo is working ok, then it sounds like an issue with your own code, so StackOverflow might be the best place to ask for help with that.

can you pleace take a look at my code, i have use this in a fresh react app

check the git repo

[hasanomi778]

@jackocnr do you have any solution for this? you can check my code.
I need it to be solve. This is required for my project. Help me to solve this.

[jackocnr]

but my react component is not working, also there is another error appear (Uncaught SyntaxError: Unexpected token '<' (at utils.js?1707906286003:1:1)")

This is because the utils.js is not loading properly (despite the 200 status). You've set utilsScript to "/intl-tel-input/js/utils.js?1707906286003" but that path does not exist in the project (I don't know why it's returning status 200 - perhaps this is a create-react-app configuration setting?). If you change this path to instead load utils.js from the CDN, then it should work fine: "https://cdn.jsdelivr.net/npm/intl-tel-input@19.2.20/build/js/utils.js"