ReactJS中如何解决模块无法设置多个default exports的报错

问题原因 #

ES模块规范明确规定：单个模块只能有一个默认导出，你在varConstants.js里多次使用export default，直接违反了这个规则，所以才会触发A module cannot have multiple default exports的报错。而且你需要的是命名导入（用大括号包裹变量名的方式），本来就不该用默认导出语法。

修复方法 #

修改constants/varConstants.js的导出方式，换成命名导出，同时给常量加上const声明（常量本身应该是不可变的）：

方式一：逐个命名导出

export const VARIABLE1 = 'VARIABLE1';
export const VARIABLE2 = 'VARIABLE2';
export const VARIABLE3 = 'VARIABLE3';
export const VARIABLE4 = 'VARIABLE4';

方式二：批量命名导出

先统一声明所有常量，再一次性导出：

const VARIABLE1 = 'VARIABLE1';
const VARIABLE2 = 'VARIABLE2';
const VARIABLE3 = 'VARIABLE3';
const VARIABLE4 = 'VARIABLE4';

export { VARIABLE1, VARIABLE2, VARIABLE3, VARIABLE4 };

导入验证 #

你在reducers/reducer.js里的导入代码完全正确，无需修改：

import {VARIABLE1,VARIABLE2,VARIABLE3,VARIABLE4} from '/constants/varConstants'

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