{"record":{"id":"261fb8fe75a133fc","repo":"nosir/cleave.js","slug":"please-include-phone-type-formatter-country-js-l","errorCode":null,"errorMessage":"Please include phone-type-formatter.{country}.js lib","messagePattern":"Please include phone-type-formatter\\.(.+?)\\.js lib","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/Cleave.react.js","lineNumber":179,"sourceCode":"    },\n\n    initPhoneFormatter: function () {\n        var owner = this,\n            pps = owner.properties;\n\n        if (!pps.phone) {\n            return;\n        }\n\n        // Cleave.AsYouTypeFormatter should be provided by\n        // external google closure lib\n        try {\n            pps.phoneFormatter = new PhoneFormatter(\n                new pps.root.Cleave.AsYouTypeFormatter(pps.phoneRegionCode),\n                pps.delimiter\n            );\n        } catch (ex) {\n            throw new Error('Please include phone-type-formatter.{country}.js lib');\n        }\n    },\n\n    setRawValue: function (value) {\n        var owner = this,\n            pps = owner.properties;\n\n        value = value !== undefined && value !== null ? value.toString() : '';\n\n        if (pps.numeral) {\n            value = value.replace('.', pps.numeralDecimalMark);\n        }\n\n        pps.postDelimiterBackspace = false;\n\n        owner.onChange({\n            target: {value: value},\n","sourceCodeStart":161,"sourceCodeEnd":197,"githubUrl":"https://github.com/nosir/cleave.js/blob/a966c95cf5193f223485a10eec8405bb32b8f6dd/src/Cleave.react.js#L161-L197","documentation":"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.","triggerScenarios":"Rendering <Cleave options={{ phone: true, phoneRegionCode: 'GB' }} /> without importing the corresponding phone-type-formatter.gb.js addon before the component initializes.","commonSituations":"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.","solutions":["Import the addon for your region before the Cleave component renders, e.g. import 'cleave.js/dist/addons/phone-type-formatter.gb.js'.","Verify phoneRegionCode matches an addon file you actually loaded (case-insensitive).","Drop the phone option if you only need credit-card/date/numeral formatting.","In SSR environments, load the addon on the client bundle side, not just server."],"exampleFix":"// before\nimport Cleave from 'cleave.js/react';\n<Cleave options={{ phone: true, phoneRegionCode: 'GB' }} />\n// after\nimport Cleave from 'cleave.js/react';\nimport 'cleave.js/dist/addons/phone-type-formatter.gb.js';\n<Cleave options={{ phone: true, phoneRegionCode: 'GB' }} />","handlingStrategy":"validation","validationCode":"import CleaveCore from 'cleave.js';\nif (typeof CleaveCore.AsYouTypeFormatter !== 'function' && options.phone) {\n  throw new Error('Import cleave.js/dist/addons/phone-type-formatter.{country}.js before rendering <Cleave phone>');\n}","typeGuard":"function phoneOptionsAreSafe(core, options) {\n  return !options.phone || typeof core.AsYouTypeFormatter === 'function';\n}","tryCatchPattern":"try {\n  ReactDOM.render(<Cleave options={{ phone: true, phoneRegionCode: 'GB' }} />, mount);\n} catch (e) {\n  if (e.message.includes('phone-type-formatter')) {\n    console.warn('Missing phone addon — render Cleave without phone option');\n    ReactDOM.render(<Cleave options={{}} />, mount);\n  } else { throw e; }\n}","preventionTips":["Import the addon at the app entry point so it loads before any <Cleave> mounts.","Keep a map of country code -> addon import path and validate options.phone against it.","In SSR, import the addon in client-only bundles or guard on window.","Add a unit test that constructs Cleave with each configured phoneRegionCode."],"tags":["react","phone","missing-dependency","addon"],"backgroundTag":"missing-dependency","analyzedSha":"a966c95cf5193f223485a10eec8405bb32b8f6dd","analyzedAt":"2026-09-02T23:44:35.488Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}