nosir/cleave.js · error · Error

Please include phone-type-formatter.{country}.js lib

Error message

Please include phone-type-formatter.{country}.js lib

What it means

Same condition as the vanilla Cleave.js variant, but thrown from the React component wrapper at src/Cleave.react.js:179: phone formatting requires the per-country AsYouTypeFormatter addon, which was not found when initializing the phone formatter.

Source

Thrown at src/Cleave.react.js:179

    },

    initPhoneFormatter: function () {
        var owner = this,
            pps = owner.properties;

        if (!pps.phone) {
            return;
        }

        // Cleave.AsYouTypeFormatter should be provided by
        // external google closure lib
        try {
            pps.phoneFormatter = new PhoneFormatter(
                new pps.root.Cleave.AsYouTypeFormatter(pps.phoneRegionCode),
                pps.delimiter
            );
        } catch (ex) {
            throw new Error('Please include phone-type-formatter.{country}.js lib');
        }
    },

    setRawValue: function (value) {
        var owner = this,
            pps = owner.properties;

        value = value !== undefined && value !== null ? value.toString() : '';

        if (pps.numeral) {
            value = value.replace('.', pps.numeralDecimalMark);
        }

        pps.postDelimiterBackspace = false;

        owner.onChange({
            target: {value: value},

View on GitHub (pinned to a966c95cf5)

Solutions

1. Import the addon for your region before the Cleave component renders, e.g. import 'cleave.js/dist/addons/phone-type-formatter.gb.js'.
2. Verify phoneRegionCode matches an addon file you actually loaded (case-insensitive).
3. Drop the phone option if you only need credit-card/date/numeral formatting.
4. In SSR environments, load the addon on the client bundle side, not just server.

Example fix

// before
import Cleave from 'cleave.js/react';
<Cleave options={{ phone: true, phoneRegionCode: 'GB' }} />
// after
import Cleave from 'cleave.js/react';
import 'cleave.js/dist/addons/phone-type-formatter.gb.js';
<Cleave options={{ phone: true, phoneRegionCode: 'GB' }} />

import CleaveCore from 'cleave.js';
if (typeof CleaveCore.AsYouTypeFormatter !== 'function' && options.phone) {
  throw new Error('Import cleave.js/dist/addons/phone-type-formatter.{country}.js before rendering <Cleave phone>');
}

function phoneOptionsAreSafe(core, options) {
  return !options.phone || typeof core.AsYouTypeFormatter === 'function';
}

try {
  ReactDOM.render(<Cleave options={{ phone: true, phoneRegionCode: 'GB' }} />, mount);
} catch (e) {
  if (e.message.includes('phone-type-formatter')) {
    console.warn('Missing phone addon — render Cleave without phone option');
    ReactDOM.render(<Cleave options={{}} />, mount);
  } else { throw e; }
}

When it happens

Trigger: Rendering <Cleave options={{ phone: true, phoneRegionCode: 'GB' }} /> without importing the corresponding phone-type-formatter.gb.js addon before the component initializes.

Common situations: Forgetting the addon import in a React SPA; addon imported after the component mounts; mismatched country file vs phoneRegionCode; using only `cleave.react` without loading the core's global addon registration path.

Understand the failure class

Background: "not installed", "pip install", "required for": how missing-dependency errors surface across open-source libraries — this error's family across 34 libraries.

Related errors

• [cleave.js] Please include phone-type-formatter.{country}.js
• Invalid region code:
• Invalid region code:
• Invalid region code:
• Invalid region code:

AI-assisted analysis of nosir/cleave.js@a966c95cf5 (2026-09-02). Data as JSON: /api/errors/261fb8fe75a133fc. Report an issue: GitHub.