title: Cleave.js Phone CA
body: <p>I'm trying to format a phone number field using <a href="https://nosir.github.io/cleave.js/" rel="nofollow noreferrer">Cleave.js</a> and it's not working but I can't seem to figure out why.</p>
  
  <p>I started off like this:</p>
  
  <pre><code>import Cleave from 'cleave.js';
  
  var cleave = new Cleave('.phone', {
      'phone': true,
      'phoneRegionCode': 'CA'
  });
  </code></pre>
  
  <p>And I got this error:</p>
  
  <pre><code>&gt; Uncaught Error: [cleave.js] Please include phone-type-formatter.{country}.js lib
  </code></pre>
  
  <p>So I imported the library that I was missing by adding:</p>
  
  <pre><code>import CleavePhone from 'cleave.js/dist/addons/cleave-phone.ca';
  </code></pre>
  
  <p>So now my code is:</p>
  
  <pre><code>import Cleave from 'cleave.js';
  import CleavePhone from 'cleave.js/dist/addons/cleave-phone.ca';
  
  var cleave = new Cleave('.phone', {
      'phone': true,
      'phoneRegionCode': 'CA'
  });
  </code></pre>
  
  <p>I'm not getting any console errors anymore, but the formatting of the phone number doesn't seem to be working at all.</p>
  
  <p>I tried to change the options of the Cleave to a date:</p>
  
  <pre><code>var cleave = new Cleave('.phone', {
      'date': true,
      'datePattern': ['Y', 'm', 'd']
  });
  </code></pre>
  
  <p>And the input seems to format properly. Therefore, I know my query selector for the element is okay.</p>
  
  <p>But I can't seem to figure out why my phone number is not formatting properly.</p>