TypeScript环境下react-number-format v5.4.0报错：NumericFormat无构造/调用签名

你在使用react-number-format v5.4.0搭配TypeScript时，遇到报错：JSX元素类型‘NumericFormat’不存在任何构造或调用签名，错误标记在<NumericFormat>组件下方，可复现代码如下：

import NumericFormat from 'react-number-format';

export default function CurrencyInput(){
  return (
    <NumericFormat />
  );
}

修复方案 #

方案1：改用命名导入（推荐） #

react-number-format v5+版本的默认导出并非可直接渲染的JSX组件，需使用命名导入方式：

import { NumericFormat } from 'react-number-format';

export default function CurrencyInput(){
  return (
    <NumericFormat />
  );
}

方案2：类型断言绕过检查（不推荐） #

若需保留默认导入写法，可通过类型断言跳过TypeScript的类型校验，但这种方式不符合规范，仅作临时 workaround：

import NumericFormat from 'react-number-format';

export default function CurrencyInput(){
  return (
    <NumericFormat as any />
  );
}

额外验证步骤 #

• 执行npm list react-number-format确认安装的版本确实是v5.4.0
• 检查tsconfig.json中moduleResolution字段是否设置为node16或nodenext，确保ES模块导出能被正确识别

内容的提问来源于stack exchange，提问作者Jasperan