Cleave phone + webpack in vue.js

Hi, i am working in a project made with vue.js, and i am using cleave.js in some components. It was working good, until a couple of weeks ago when we decided to use webpack to build the project. We noticed that our phone input component wasn’t working anymore and it throws an error.

In my component I require it like this (we are also using babel):

import Cleave from 'cleave.js'
require('cleave.js/dist/addons/cleave-phone.mx');

And then create a new instance like this:

this.cleave = new Cleave(this.$el, {
        phone: true,
        phoneRegionCode: 'MX'
});

The error i get is: Error: [cleave.js] Please include phone-type-formatter.{country}.js lib

[aarongerig]

Hi @patriciabobes, This worked for me:

export default function phoneFormatter() {
  const field = document.getElementById('#phone-number');

  if (field) {
    Promise.all([
      import(/* webpackChunkName: 'cleave' */ 'cleave.js/dist/cleave.min'),
      import(/* webpackChunkName: 'cleave-phone-ch' */ 'cleave.js/dist/addons/cleave-phone.ch'),
    ]).then(([{ default: Cleave }]) => {
      const formatter = new Cleave(field, { phone: true, phoneRegionCode: 'CH' });
      formatter.init(); // This is only so ESLint is happy -> no-new/no-unused-vars conflict
    });
  }
}

Hope this helps!

[bronzewind]

Hi! It doesn’t works for me. Kind of a different scenario though.

• Typescript React app
• yarn add cleave.js @types/cleave.js If it works in your end, could you please share the code? Thanks!