如何使用模块导出的变量？浏览器报require未定义错误

问题根源 #

require()是Node.js专属的CommonJS模块语法，浏览器原生环境并不支持这种写法，直接运行会抛出"require is not defined"错误。另外要注意：你用的admin.firestore()是Firebase Admin SDK，这是仅能在服务器端使用的工具，不能直接在浏览器代码里调用——不仅会有环境兼容问题，还会暴露敏感的服务端密钥。

解决方案 #

1. 改用浏览器支持的ES模块语法

如果要在浏览器中实现模块导入，需使用ES标准的import/export语法，同时替换为浏览器端可用的Firebase SDK：

• 创建浏览器专用的Firebase初始化文件（比如firebase.js）：

  import { initializeApp } from "firebase/app";
  import { getFirestore } from "firebase/firestore";
  
  // 从Firebase控制台获取你的项目公开配置
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  
  const app = initializeApp(firebaseConfig);
  export const firestore = getFirestore(app);
  

• 修改script.js导入模块并修正调用逻辑：

  import { firestore } from "../../firebase.js";
  
  const getAllUsers = () => {
    firestore.listCollections()
      .then((snapshot) => {
        snapshot.forEach((snaps) => {
          console.log(snaps); // 输出所有集合列表
        });
      })
      .catch((error) => console.error(error));
  };
  
  getAllUsers();
  

• 在HTML中引入脚本时，必须添加type="module"属性：

  <script type="module" src="path/to/script.js"></script>
  

2. 使用打包工具（适合复杂项目）

如果你的项目依赖大量Node.js风格模块，可使用Webpack、Vite或Parcel这类打包工具，它们会将CommonJS/ES模块打包成浏览器能识别的单文件。配置完成后，你可以继续使用require()语法，最终通过打包后的文件在浏览器运行。

关键提醒

绝对不要在浏览器环境中使用Firebase Admin SDK，它依赖服务端私钥运行，私钥暴露在前端代码中会导致你的Firebase项目被恶意攻击。浏览器端必须使用Firebase Web SDK，通过公开的项目配置初始化服务。

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