Firebase注册报错：createUserWithEmailAndPassword未定义的解决方法

问题根源 #

你在type="module"的脚本里导入了Firebase方法并初始化了auth，但模块脚本的变量属于局部作用域，普通的main.js（非模块脚本）无法访问这些变量，因此触发了未定义错误。

修复方案（推荐第一种） #

方案1：将main.js改为模块脚本

1. 修改HTML中引入main.js的标签，添加type="module"：

<script type="module" src="js/main.js"></script>

2. 在main.js顶部补充Firebase的导入与初始化代码：

// main.js 开头新增
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js";
import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-auth.js";

// 填入你从Firebase控制台获取的配置
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

// 保留原有的表单监听逻辑
const login_form = document.getElementById('registro-form');

login_form.addEventListener('submit',(event) => {
    event.preventDefault();
    const email = document.getElementById('registro-user').value;
    const password = document.getElementById('registro-pass').value;

    createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
        const user = userCredential.user;
        console.log(user);
    })
    .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log(errorCode);
        console.log(errorMessage)
    });
});

3. 删除HTML中原有的Firebase模块脚本，避免重复初始化。

方案2：将所有逻辑合并到同一个模块脚本

直接把main.js的代码放到HTML里的Firebase模块脚本中，无需单独引入main.js：

<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js";
    import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword }  from "https://www.gstatic.com/firebasejs/9.14.0/firebase-auth.js";
    
    const firebaseConfig = {
      apiKey: "",
      authDomain: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: ""
    };
  
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);

    // 表单监听逻辑
    const login_form = document.getElementById('registro-form');
    login_form.addEventListener('submit',(event) => {
        event.preventDefault();
        const email = document.getElementById('registro-user').value;
        const password = document.getElementById('registro-pass').value;

        createUserWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
            const user = userCredential.user;
            console.log(user);
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.log(errorCode);
            console.log(errorMessage)
        });
    });
</script>

随后删掉HTML中的<script src="js/main.js"></script>标签。

注意事项 #

• 确保firebaseConfig内的参数是从Firebase控制台复制的真实有效配置，不要留空。
• 模块脚本在本地直接打开时可能出现CORS问题，建议用本地服务器（比如VS Code的Live Server插件）运行页面。

内容的提问来源于stack exchange，提问作者tito jesus yanac saldaña