文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >使用Firebase/auth - firebase__WEBPACK_IMPORTED_MODULE_3 __登录

问使用Firebase/auth - firebase__WEBPACK_IMPORTED_MODULE_3 __登录
EN

Stack Overflow用户
提问于 2021-09-02 07:08:35
回答 1查看 328关注 0票数 1

Auth.onAuthStateChanged不是一个函数

我已经用React npx创建反应应用我的应用程序创建了一个web应用程序)

它是一个简单的应用程序，它显示了商店的产品列表，用户可以在其中添加更多的产品。一旦完成，我决定通过电子邮件注册是强制性的，以查看内容和能够添加产品。

我需要它是强制性的登录访问应用程序。

由于我没有很多后端经验，所以我使用了Firebase。

我已经阅读了信息，我看到了一些例子，最后我给我的应用程序添加了必要的代码，以便在输入它时，必须输入电子邮件和密码。一旦我登录，我将输入主页<Sidebar />

我已经重复了几次步骤，而且我总是得到同样的错误。

我曾在其他地方和同一地方找过例子，但我无法解决我的问题。

我显示了我的错误，我创建的一些文件就是原因。

控制台错误：

代码语言：javascript
运行
复制
App.js:17 Uncaught TypeError: firebase__WEBPACK_IMPORTED_MODULE_3__.auth.onAuthStateChanged is not a function
    at App.js:17
    at invokePassiveEffectCreate (react-dom.development.js:23487)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at flushPassiveEffectsImpl (react-dom.development.js:23574)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushPassiveEffects (react-dom.development.js:23447)
    at react-dom.development.js:23324
    at workLoop (scheduler.development.js:417)
    at flushWork (scheduler.development.js:390)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)
(anonymous) @ App.js:17
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
index.js:1 The above error occurred in the <App> component:

    at App (http://localhost:3000/static/js/main.chunk.js:67:81)
    at x (http://localhost:3000/static/js/vendors~main.chunk.js:118342:13)
    at w (http://localhost:3000/static/js/vendors~main.chunk.js:117967:13)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
flushPassiveEffectsImpl @ react-dom.development.js:23620
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
scheduler.development.js:171 Uncaught TypeError: firebase__WEBPACK_IMPORTED_MODULE_3__.auth.onAuthStateChanged is not a function
    at App.js:17
    at invokePassiveEffectCreate (react-dom.development.js:23487)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at flushPassiveEffectsImpl (react-dom.development.js:23574)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushPassiveEffects (react-dom.development.js:23447)
    at react-dom.development.js:23324
    at workLoop (scheduler.development.js:417)
    at flushWork (scheduler.development.js:390)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)

文件App.js

代码语言：javascript
运行
复制
import React, { useState, useEffect } from 'react'
import { Routes, Route } from 'react-router'

import firebase, { FirebaseContext } from './firebase'
import { auth } from 'firebase'

import Ordenes from './components/paginas/Ordenes'
import Menu from './components/paginas/Menu'
import NuevoPlato from './components/paginas/NuevoPlato'
import Sidebar from './components/ui/Sidebar'
import Signin from './components/Signin'

function App() {

  const [user, setUser] = useState(null)
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(userAuth => {
      const user = {
        uid: userAuth?.uid,
        email: userAuth?.email
      }
      if (userAuth) {
        console.log(userAuth)
        setUser(user)
      } else {
        setUser(null)
      }
    })
    return unsubscribe
  }, [])

  return (
    <FirebaseContext.Provider
      value={{
        firebase
      }}
    >
      <div className="md:flex min-h-screen" >
      <Sidebar />
        <div className="md:w-2/5 xl:w-4/5 p-6">
          {user ? <Sidebar /> : <Signin />}
        </div>
      </div>

      <div className="md:w-2/5 xl:w-4/5 p-6">
        <Routes>
          <Route path="/" element={<Ordenes />} />
          <Route path="/menu" element={<Menu />} />
          <Route path="/nuevo-plato" element={<NuevoPlato />} />
        </Routes>
      </div>
    </FirebaseContext.Provider>


  )
}

export default App

文件Signin.js

代码语言：javascript
运行
复制
import React, { useRef } from 'react'
//import { auth } from '../firebase'
import { auth } from 'firebase';
const Signin = () => {
    const emailRef = useRef(null);
    const passwordRef = useRef(null);
    const signUp = e => {
        e.preventDefault();
        auth.createUserWithEmailAndPassword(
            emailRef.current.value,
            passwordRef.current.value
        ).then(user => {
            console.log(user)
        }).catch(err => {
            console.log(err)
        })
    }
    const signIn = e => {
        e.preventDefault();
        auth.signInWithEmailAndPassword(
            emailRef.current.value,
            passwordRef.current.value
        ).then(user => {
            console.log(user)
        }).catch(err => {
            console.log(err)
        })
    }
    return (
        <div className="mb-4">
            <form action="">
                <h1>Sign in</h1>
                <input
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                ref={emailRef} type="email" placeholder="email"/>
                <input 
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                ref={passwordRef} type="password" />
                <button onClick={signIn}>Sign in </button>
            </form>
        </div>
    )
}

export default Signin




**File firebase.js**

import app from 'firebase/app'
import 'firebase/firestore'
import 'firebase/storage'
import 'firebase/auth'

import firebaseConfig from './config'

class Firebase {
  constructor() {
    if (!app.apps.length) {
      app.initializeApp(firebaseConfig)
    }
    this.db = app.firestore()
    this.storage = app.storage()
    this.auth = app.auth()
  }
}

const firebase = new Firebase()
export default firebase

文件package.json

代码语言：javascript
运行
复制
{
  "name": "mYStore",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "firebase": "^7.19.0",
    "formik": "^2.2.9",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-firebase-file-uploader": "^2.4.4",
    "react-router-dom": "^6.0.0-beta.0",
    "react-scripts": "^4.0.3",
    "web-vitals": "^1.0.1",
    "yup": "^0.32.9"
  },
  "scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/css/tailwind.css -o src/css/main.css",
    "watch:css": "postcss src/css/tailwind.css -o src/css/main.css"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.3.1",
    "history": "^5.0.0",
    "postcss-cli": "^8.3.1",
    "react-router": "^6.0.0-beta.0",
    "tailwindcss": "^2.2.7"
  }
}

--这是应用程序的结构

​

​

javascript
reactjs
firebase
firebase-authentication
react-router
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-09-02 07:12:45

您应该尝试从auth (而不是Firebase模块)导入firebase.js：

代码语言：javascript
运行
复制
import fireObj from './firebase'
// valid path here    ^^

路径应该相对于导入它的文件。例如，要在signin.js中导入它，路径应该是：

代码语言：javascript
运行
复制
import fireObj from '../firebase/firebase.js'

const auth = fireObj.auth

auth.onAuthStateChanged(...)

此外，您正在导出Fire基类的单个对象，因此请尝试更改您的导入，如上面所示。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69025632

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档