使用formsy-react遇Uncaught TypeError: _formsyReact2.default.addValidationRule不是函数

我之前在React Starter Kit里集成formsy-react的时候，也踩过完全一样的坑——Babel会自动把formsyReact.addValidationRule转成formsyReact.default.addValidationRule，结果运行时就抛出Uncaught TypeError: _formsyReact2.default.addValidationRule is not a function的错误，折腾了好一会儿才搞定。

问题根源 #

这本质是模块导出格式不兼容导致的：

• Formsy-React是用CommonJS规范直接通过module.exports导出整个对象的；
• 而React Starter Kit里的Babel配置默认会把import导入的模块当作ES模块处理，自动尝试去访问.default属性，但Formsy的导出里根本没有这个属性，自然就报错了。

解决方案 #

这里有两种靠谱的解决方式，优先推荐第一种：

1. 调整导入方式（最简单直接）

放弃默认导入，改用命名导入的方式把整个模块导出对象导入：

// 原来的错误写法
import Formsy from 'formsy-react';

// 修改后的正确写法
import * as Formsy from 'formsy-react';

这样导入后，Formsy就直接指向Formsy-React模块导出的原始对象，调用Formsy.addValidationRule时，Babel就不会多此一举地去访问.default了。

2. 调整Babel配置（适合需要保留默认导入的场景）

如果你坚持要用默认导入，可以在React Starter Kit的Babel配置中，让Babel不对formsy-react进行ES模块转译处理。比如在项目的.babelrc或者babel.config.js中添加配置：

{
  "plugins": [
    ["transform-es2015-modules-commonjs", {
      "exclude": ["node_modules/formsy-react"]
    }]
  ]
}

不过这种方式可能会影响其他依赖的转译，所以更推荐第一种方法。

验证修改 #

改完导入后，再试试添加验证规则：

Formsy.addValidationRule('isValidEmail', function(value) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
});

这时候应该就能正常运行，不会再出现那个类型错误了。

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