I get console warning "Possible unhandled promise rejection TypeError:0,_jwtDecode.default is not a function (it is undefined)"

Question

I have installed and imported jwtDecode properly but why is there any error here is the code:- My jwtDecode doesn't seem to work i don't know the cause i have tried some sort of things i m new in react-native so please help and why is it not working

import { StyleSheet, Text, View } from 'react-native';
import { useContext, useLayoutEffect, useEffect, useState } from 'react';
import { useNavigation } from '@react-navigation/native';
import { Ionicons } from '@expo/vector-icons';
import { MaterialIcons } from '@expo/vector-icons';
import { UserType } from '../userContext';
import AsyncStorage from '@react-native-async-storage/async-storage';
import jwtDecode from 'jwt-decode';
import axios from 'axios';
import Users from '../Components/Users';

const Chat_feature = () => {
  const navigation = useNavigation();
  const { userId, setUserId } = useContext(UserType);
  const [users, setUsers] = useState([]);

  useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: '',
      headerLeft: () => (
        <Text style={{ fontSize: 16, fontWeight: 'bold', paddingLeft: 4 }}>FRIENDS</Text>
      ),
      headerRight: () => (
        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, paddingRight: 4 }}>
          <Ionicons name="chatbox-ellipses-outline" size={24} color="black" />
          <MaterialIcons name="people-outline" size={24} color="black" />
        </View>
      ),
    });
  }, []);

  useEffect(() => {
    console.log('reached first');
    const fetchUsers = async () => {
      const token = await AsyncStorage.getItem('authToken');
      
      console.log('Token:', token);
      console.log('reached second');

      const decodedToken = jwtDecode(token);

      console.log('reached third');

      const userId = decodedToken.userId;
      setUserId(userId);
      console.log('reached here');
      console.log('Fetching users...');
      axios.get(`http://localhost:8000/users/${userId}`).then((response) => {
        setUsers(response.data);
      }).catch((error) => {
        console.log('Error while retrieving users', error);
      });
    };

    fetchUsers();
  }, [setUserId]);

  console.log('users=', users);

  return (
    <View>
      <View>
        {users.map((item, index) => (
          <Users key={index} item={item} />
        ))}
      </View>
      <Text>Chat</Text>
    </View>
  );
};

export default Chat_feature;

const styles = StyleSheet.create({});

I tried importing jwtDecode in different ways like import * as jwtDecode, import {decode as jwtDecode} ....I expected my jwtDecode to run but it wasn't running that is why "reached third was not printing"

Answer 1

Instead of jwtDecode i used atob and that worked for me..here is the implementation

import { decode as base64decode } from 'base-64';

 global.atob = base64decode;


const decodedToken = JSON.parse(atob(token.split('.')[1]));