React - online not rendering

Question

I am in my final steps of placing my react web app on the internet, everything works fine on my localhost, but as soon as I place it on the internet, I get the error below.

Uncaught TypeError: Object(...) is not a function
y AuthProvider.js:64
React 12
80 index.js:8
u (index):1
t (index):1
r (index):1
<anonymous> main.9b7fd734.chunk.js:1
AuthProvider.js:64:36
y AuthProvider.js:64
React 12
80 index.js:8
u (index):1
t (index):1
r (index):1
<anonymous> main.9b7fd734.chunk.js:1

I do not know what I am doing wrong, I read everything multiple times. This is the component where the error is. From what I can tell from the error, the error is in the function setSession.

import { createContext, useState, useMemo, useEffect, useCallback, useContext } from "react";
import config from '../config.json';
import * as usersApi from '../api/users';
import * as api from "../api";

const JWT_TOKEN_KEY = config.token_key;
const AuthContext = createContext();

function parseJwt(token) {
    if (!token) return {};
    const base64url = token.split('.')[1];
    const payload = Buffer.from(base64url, 'base64');
    const jsonPayload = payload.toString('ascii');
    return JSON.parse(jsonPayload);
}

function parseExp(exp) {
    if (!exp) return null;
    if (typeof exp !== 'number') exp = Number(exp);
    if(isNaN(exp)) return null;
    return new Date(exp * 1000);

}

const useAuth = () => useContext(AuthContext);

export const useSession = () => {
    const { loading, error, token, user, ready, hasRole } = useAuth();
    return { loading, 
        error, 
        token, 
        user, 
        ready,
        isAuthed: Boolean(token),
        hasRole,
    };
}

export const useLogin = () => {
    const { login } = useAuth();
    return login;
}

export const useLogout = () => {
    const { logout } = useAuth();
    return logout;
}

export const useRegister = () => {
    const { register } = useAuth();
    return register;
}

export const AuthProvider = ({
    children
}) => {
    const [ready, setReady] = useState(false);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');
    const [token, setToken] = useState(localStorage.getItem(JWT_TOKEN_KEY));
    const [user, setUser] = useState(null);

      const setSession = useCallback(async (token, user) => {
    const { exp, userId } = parseJwt(token);
    const expiry = parseExp(exp);
    const stillValid = expiry >= new Date();

    if (stillValid) {
      localStorage.setItem(JWT_TOKEN_KEY, token);
    } else {
      localStorage.removeItem(JWT_TOKEN_KEY);
      token = null;
    }

    api.setAuthToken(token);
    setToken(token);
    setReady(token && stillValid);

    if (!user && stillValid) {
      user = await usersApi.getById(userId);
    }
    setUser(user);
  }, []);

    useEffect(() => {
        setSession(token, null);
    }, [setSession, token]);

    const login = useCallback( async (email, password) => {
        try {
            setError('');
            setLoading(true);
            const {token, user} = await usersApi.login(email, password);
            await setSession(token, user);
            return true;
        } catch (error) {
            setError(error);
            return false;
        } finally {
            setLoading(false);
        }
    }, [setSession]);

    const logout = useCallback(() => {
        setSession(null, null);
    }, [setSession]);

    const register = useCallback( async ({name, email, password}) => {
        try {
            setError('');
            setLoading(true);
            const {token, user} = await usersApi.register({name, email, password});
            await setSession(token, user);
            return true;
        } catch (error) {
            setError(error);
            return false;
        } finally {
            setLoading(false);
        }
    }, [setSession]);

    const hasRole = useCallback((role) => {
        if (!user) return false;
        return user.roles.includes(role);
    }, [user])

    const value = useMemo(() => ({
        loading, 
        error,
        token,
        user,
        ready,
        login,
        logout,
        register,
        hasRole,
    }), [loading, error, token, user, ready, login, logout, register, hasRole]);

    return(
        <AuthContext.Provider value={value}>
            {children}
        </AuthContext.Provider>
    );
};

This is the function usersApi.getById(userId).

export const getById = async (id) => {
    const { data } = await axios.get(`/users/${id}`);
    return data;
}

Every thing I get from an api, is an api that works fine and is running op Heroku.

Answer 1

Change this

import { useCallback, useContext } from "react/cjs/react.development";

with this

import { useCallback, useContext } from "react";

It works on the localhost because you're importing the React Hook from the local node modules file. Because there is no local node modules file in the deployment, it gives an error for importing.