TypeError: input.getAttribute is not a function

[mcpacific]

Plugin version

e.g. v24.3.4 (please try latest version) 24.3.4

Steps to reproduce

1. Import in vue.js import { ref, onMounted } from 'vue'; import intlTelInput from 'intl-tel-input'; const input = ref(); onMounted(() => { intlTelInput(input, { initialCountry: 'us', utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@24.3.4/build/js/utils.js", }); });
2. Load page and see error.

Expected behaviour

Tell us what should happen Should work with no errors in dev console.

Actual behaviour

Tell us what actually happens Uncaught (in promise) TypeError: input.getAttribute is not a function at new Iti (intlTelInput.js:1759:50)

Initialisation options

List any options you're using e.g. utilsScript or onlyCountries I've tried with both cdn and local copies of utils.js but the results are the same.

[jackocnr]

const input = ref();

It looks like the input you're passing into the plugin is not an input element, but is actually a ref.

By the way, if you're using Vue, you could try our new Vue component

[mcpacific]

I did try the vue component. However, during install I get the following deprecation notices:

npm warn deprecated osenv@0.1.5: This package is no longer supported. npm warn deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs npm warn deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead npm warn deprecated domexception@4.0.0: Use your platform's native DOMException instead npm warn deprecated puppeteer@19.11.1: < 21.8.0 is no longer supported added 1417 packages, and audited 1418 packages in 1m

185 packages are looking for funding run npm fund for details

5 vulnerabilities (1 moderate, 4 high)

To address issues that do not require attention, run: npm audit fix

To address all issues (including breaking changes), run: npm audit fix --force

Run npm audit for details.

Afterwards, npm run vue:demo produces:

intl-tel-input@24.3.4 vue:demo vite --config vue/demo/validation/vite.config.js

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

VITE v5.4.2 ready in 313 ms

➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help Error: Failed to scan for dependencies from entries: d:/node.js/teltest/vue/demo/validation/index.html

X [ERROR] Unexpected "."

vue/src/intl-tel-input/intlTelInputWithUtils.ts:1:0:
  1 │ ../../../src/js/intl-tel-input/intlTelInputWithUtils.ts
    ╵ ^

at failureErrorWithLog (d:\node.js\teltest\node_modules\vite\node_modules\esbuild\lib\main.js:1472:15)
at d:\node.js\teltest\node_modules\vite\node_modules\esbuild\lib\main.js:945:25
at runOnEndCallbacks (d:\node.js\teltest\node_modules\vite\node_modules\esbuild\lib\main.js:1315:45)
at buildResponseToResult (d:\node.js\teltest\node_modules\vite\node_modules\esbuild\lib\main.js:943:7)
at d:\node.js\teltest\node_modules\vite\node_modules\esbuild\lib\main.js:955:9
at new Promise (<anonymous>)
at requestCallbacks.on-end (d:\node.js\teltest\node_modules\vite\node_modules\esbuild\lib\main.js:954:54)
at handleRequest (d:\node.js\teltest\node_modules\vite\node_modules\esbuild\lib\main.js:647:17)
at handleIncomingPacket (d:\node.js\teltest\node_modules\vite\node_modules\esbuild\lib\main.js:672:7)
at Socket.readFromStdout (d:\node.js\teltest\node_modules\vite\node_modules\esbuild\lib\main.js:600:7)

[mcpacific]

Ultimately I got it working with:

const input = ref();

onMounted(() => { intlTelInput(input.value, { initialCountry: 'us', utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@24.3.4/build/js/utils.js", }); });

[mcpacific]

Thank you for your help. I moved to the new Vue component and it's working great. Thank you!

[jackocnr]

👍🏻