Search code examples
javascriptreactjsreact-nativesessionsession-variables

React-Client-Session TypeError: undefined is not an object (evaluating '_reactClientSession.default.setStoreType')


I am trying to use react-client-session :https://github.com/grizzthedj/react-session in a react native application. I am almost literally copying the example:

import ReactSession from 'react-client-session';

  <Button
                style = {styles.button}
                title="Submit"
                        onPress={() => {
                          ReactSession.setStoreType("localStorage");
                          ReactSession.set("playerName", selectedValue);
                             /* 1. Navigate to the Character Skill Sheet route with params */
                             navigation.navigate('SkillSheet', {
                              playerName: selectedValue
                            });
                        }}
                color="#19AC52"
            />

The expected result is that I press the button and along with navigating to the SkillSheet view it will set the session variable playerName = selectedValue.

But when I click the button I get this error: TypeError: undefined is not an object (evaluating '_reactClientSession.default.setStoreType')

Is react-client-session still in use? If so what am I doing wrong? Here is the other link to it: https://www.npmjs.com/package/react-client-session

This is the full file that I am trying to do this in:

CharacterSelectScreen.js

import React, {useState} from 'react'
import { StyleSheet, Text, View, TouchableOpacity, TextInput, Button, Picker, ScrollView} from 'react-native'
import { NavigationContainer, useNavigation, useRoute } from '@react-navigation/native';
import { userFetch } from '../../sharedComponents/userFetch.js';
import { styles } from './styles.js';
import ReactSession from 'react-client-session';

const CharacterSelectScreen = ({navigation, route}) => {
  const [characterList, setCharacterList] = useState([]);
  const [selectedValue, setSelectedValue] = useState("Choose..");

  //Using React.useEffect to simulate React's #componentDidMount
       React.useEffect(()=>{
        console.log('Select Screen loaded.')
        //Must use an async function to call the userFetch function then set the result equal to characterList
        const asyncFunc = async () => {
          const charList = await userFetch();
          setCharacterList(charList);
        }
        //Call the async function
        asyncFunc();
      },[])

    return (
        <View style={styles.container}>
            <Text style={{marginLeft: 130}} h1>Select a character:</Text>
            <Picker
              style={styles.charPicker}
              mode="dropdown"
              selectedValue={selectedValue}
              onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
              >
              {characterList.map((item, index) => {
                  return (<Picker.Item label={item} value={item} key={index}/>) 
              })}
          </Picker>
          <Button
                style = {styles.button}
                title="Submit"
                        onPress={() => {
                          ReactSession.setStoreType("localStorage");
                          ReactSession.set("playerName", selectedValue);
                             /* 1. Navigate to the Character Skill Sheet route with params */
                             navigation.navigate('SkillSheet', {
                              playerName: selectedValue
                            });
                        }}
                color="#19AC52"
            />
      </View>
    )
}

export default CharacterSelectScreen;

And here is what is in my yarn.lock:

react-client-session@^0.0.7:
  version "0.0.7"
  resolved "https://registry.yarnpkg.com/react-client-session/-/react-client-session-0.0.7.tgz#b1bdee73d2dd29a0cd2ed220c91bd86671787dec"
  integrity sha512-UeiECmKybfqTp/Fk7qCOs0OV/Lnw3km5vNoYnVjygVDwqg8SPm8YzFKJcFsmNDhPh6Ak1oCjAySJfSDrSZglbQ==

Solution

  • Documentation seems to be wrong or out of date.

    The package exports a single named export like this:

    export {
      ReactSession
    };
    

    So it should be imported like this (the difference is in curly brackets):

    import { ReactSession } from 'react-client-session';
    

    P.S.

    You can found out more about two different types of export here.