Javascript react/redux谷歌身份验证登录问题（firebase）

我正在使用redux工具箱模板创建react/redux应用程序。 我试图创建谷歌登录，当我试图使它工作时，我得到下面的错误。如果有人知道为什么会这样，请告诉我

---

这是我的app.js代码

---

视图编译 ▶ 2个烟囱框架倒塌。 应用程序 src/App.js:20

 17 | 
  18 | function App() {
  19 |   const sendMessagesOpen = useSelector(selectsendMesgOpen);
> 20 |   const user = useSelector(selectUser);
  21 |   const dispatch = useDispatch();
  22 |   useEffect(() => {
  23 |     auth.onAuthStateChanged((user) => {

视图编译 ▶ 17个烟囱框架倒塌

---

---

下面是userslice redux文件

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

export const useSlice = createSlice({
  name: "user",
  initialState: {
    user: null,
  },
  reducers: {
    loginuser: (state, action) => {
      state.user = action.payload;
    },
    logoutuser: (state) => {
      state.user = null;
    },
  },
});

export const { loginuser, logoutuser } = useSlice.actions;
export const selectUser = (state) => state.user.user;

export default useSlice.reducer;

import React from "react";
import { auth } from "./firebase";
import { provider } from "./firebase";
import { useDispatch } from "react-redux";
import { loginuser } from "./features/counter/useSlice";
const Login = () => {
  const dispatch = useDispatch();
  const SignIn = () => {
    auth
      .signInWithPopup(provider)
      .then(({ user }) => {
        dispatch(
          loginuser({
            displayName: user.displayName,
            email: user.email,
            photoUrl: user.photoURL,
          })
        );
      })
      .catch((error) => alert(error.message));
  };

  return (
    <div>
      <button onClick={SignIn}>sign in</button>
    </div>
  );
};

export default Login;

---

登录文件在下面

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

export const useSlice = createSlice({
  name: "user",
  initialState: {
    user: null,
  },
  reducers: {
    loginuser: (state, action) => {
      state.user = action.payload;
    },
    logoutuser: (state) => {
      state.user = null;
    },
  },
});

export const { loginuser, logoutuser } = useSlice.actions;
export const selectUser = (state) => state.user.user;

export default useSlice.reducer;

import React from "react";
import { auth } from "./firebase";
import { provider } from "./firebase";
import { useDispatch } from "react-redux";
import { loginuser } from "./features/counter/useSlice";
const Login = () => {
  const dispatch = useDispatch();
  const SignIn = () => {
    auth
      .signInWithPopup(provider)
      .then(({ user }) => {
        dispatch(
          loginuser({
            displayName: user.displayName,
            email: user.email,
            photoUrl: user.photoURL,
          })
        );
      })
      .catch((error) => alert(error.message));
  };

  return (
    <div>
      <button onClick={SignIn}>sign in</button>
    </div>
  );
};

export default Login;

从“React”导入React；
从“/firebase”导入{auth}”；
从“/firebase”导入{provider}”；
从“react redux”导入{useDispatch}；
从“/features/counter/useSlice”导入{loginuser}”；
常量登录=（）=>{
const dispatch=usedpatch（）；
常量符号=（）=>{
认证
.signInWithPopup（提供程序）
。然后（{user}）=>{
派遣(
登录用户({
displayName:user.displayName，
电子邮件：user.email，
photoUrl:user.photoUrl，
})
);
})
.catch（（错误）=>警报（错误消息））；
};
返回(
登录
);
};
导出默认登录；