导入Firebase后调用ValidateEmail提示未定义引用错误如何解决？

• 只要JS文件中使用了import语法，浏览器会自动将该文件识别为ES 模块，模块内部定义的函数默认属于模块私有作用域，不会挂载到全局window对象上。
  • 如果你是在HTML标签内通过onclick="logIn()"这种内联方式绑定事件，浏览器会在全局作用域查找logIn函数，找不到就会报错；就算logIn能被找到，它内部调用的ValidateEmail如果也在模块作用域内，同样会因为全局找不到抛出引用错误。
• 如果ValidateEmail和logIn分别放在不同的独立JS文件中，没有做模块的导出、导入操作的话，两个文件的作用域互相隔离，自然也无法互相访问对方定义的函数。
• 另外你现有代码中auth变量未初始化，后续就算函数引用问题解决，调用auth.createUserWithEmailAndPassword也会抛出引用错误。

情况1：两个函数在同一个JS文件中 #

1. 移除HTML中登录按钮的内联onclick绑定，改为在JS文件内通过事件监听绑定，示例：

// 原有导入、ValidateEmail、logIn函数逻辑保持不变
// 初始化firebase和auth（你之前漏了这一步）
const firebaseConfig = {
  // 替换为你自己的firebase项目配置
};
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();

// 绑定登录按钮点击事件，对应修改你HTML中登录按钮的id为loginBtn即可
document.getElementById('loginBtn').addEventListener('click', logIn);

2. 引入该JS文件时，必须在script标签上添加type="module"属性，否则浏览器无法识别import语法：

<script type="module" src="你的js文件路径.js"></script>

情况2：两个函数放在不同的JS文件中 #

1. 在存放ValidateEmail的JS文件末尾添加导出语句：

// 原有ValidateEmail函数逻辑保持不变
export { ValidateEmail };

2. 在存放logIn的JS文件顶部导入ValidateEmail：

// 原有firebase导入逻辑保持不变
import { ValidateEmail } from './你存放ValidateEmail的文件路径.js';

// 后续logIn函数逻辑、firebase初始化、事件绑定逻辑和情况1一致

临时兼容方案（不推荐） #

如果一定要保留HTML内联onclick绑定，可以手动把函数挂载到全局window对象上，在函数定义完成后添加如下代码：

window.ValidateEmail = ValidateEmail;
window.logIn = logIn;

这种方式会污染全局作用域，非必要不建议使用。

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