Why am I getting "property 'submitHandler' doesn't exist" error

Issue

When I run my app using ‘npx expo start --no-dev --minify’ it crashes with this error: Reference error: property ‘submitHandler’ doesn’t exist.

submitHandler function is declared in my AuthForm.js. The submitHandler declaration shows this error message when I hover on it: 'submitHandler' is declared but its value is never read.ts(6133)

I am calling submitHandler in the following states: isPasscodeEntry / isForgot / isLogin else is registration state.

here is the function:

if (isPasscodeEntry && !isNewPassword) {
        // Handle the submission for Passcode Entry screen
        onNewPassword({ passcode: enteredCode });
    } else {
        function submitHandler() { // has dull color indicates inactive code and shows error 'submitHandler' is declared but its value is never read.ts(6133)'
            onSubmit({
                email: enteredEmail,
                confirmEmail: enteredConfirmEmail,
                password: enteredPassword,
                confirmPassword: enteredConfirmPassword,
                passcode: enteredCode,
            });
        }
    }

I don't know why production and dev both show the same 'submitHandler' is declared but its value is never read.ts(6133) error when I hover on submitHandler function but in dev the app starts and submitHandler works.

Here is the AuthForm component:

function AuthForm({ isLogin, isForgot, isPasscodeEntry, isNewPassword, setIsNewPassword, setIsPasscodeEntry, setIsForgot, onSubmit, credentialsInvalid, onNewPassword }) {
    const [enteredEmail, setEnteredEmail] = useState('');
    const [enteredConfirmEmail, setEnteredConfirmEmail] = useState('');
    const [enteredPassword, setEnteredPassword] = useState('');
    const [enteredConfirmPassword, setEnteredConfirmPassword] = useState('');
    const [enteredCode, setEnteredCode] = useState(''); // Added for passcode entry

    const {
        email: emailIsInvalid,
        confirmEmail: emailsDontMatch,
        password: passwordIsInvalid,
        confirmPassword: passwordsDontMatch,
    } = credentialsInvalid;

    function updateInputValueHandler(inputType, enteredValue) {
        switch (inputType) {
            case 'email':
                setEnteredEmail(enteredValue);
                break;
            case 'confirmEmail':
                setEnteredConfirmEmail(enteredValue);
                break;
            case 'password':
                setEnteredPassword(enteredValue);
                break;
            case 'confirmPassword':
                setEnteredConfirmPassword(enteredValue);
                break;
            case 'passcode':
                setEnteredCode(enteredValue);
                break;
        }
    }

    if (isPasscodeEntry && !isNewPassword) {
        // Handle the submission for Passcode Entry screen
        onNewPassword({ passcode: enteredCode });
    } else {
        function submitHandler() {
            onSubmit({
                email: enteredEmail,
                confirmEmail: enteredConfirmEmail,
                password: enteredPassword,
                confirmPassword: enteredConfirmPassword,
                passcode: enteredCode,
            });
        }
    }

    return (
        <KeyboardAvoidingView
            style={{ flex: 1 }}
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
            keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 100}
        >
            <View style={styles.form}>
                <View>
                    {/* // enter email to reset password */}
                    {isForgot && !isPasscodeEntry && !isNewPassword ? (
                        <Input
                            label="Email Address"
                            onUpdateValue={updateInputValueHandler.bind(this, 'email')}
                            value={enteredEmail}
                            textInputConfig={{
                                onChangeText: (text) => updateInputValueHandler('email', text),
                                value: enteredEmail,
                            }}
                            keyboardType="email-address"
                            
                            isInvalid={emailIsInvalid}
                        />
                    ) : (
                        <>
                            {/* //Login or SignUp */}
                            {!isPasscodeEntry && !isNewPassword && (
                                <Input
                                    label="Email Address"
                                    onUpdateValue={updateInputValueHandler.bind(this, 'email')}
                                    value={enteredEmail}
                                    textInputConfig={{
                                        onChangeText: (text) => updateInputValueHandler('email', text),
                                        value: enteredEmail,
                                    }}
                                    keyboardType="email-address"
                                    isInvalid={emailIsInvalid}
                                />
                            )}

                            {/* //onSignup */}
                            {!isLogin && !isForgot && !isNewPassword && (
                                <Input
                                    label="Confirm Email Address"
                                    onUpdateValue={updateInputValueHandler.bind(this, 'confirmEmail')}
                                    value={enteredConfirmEmail}
                                    keyboardType="email-address"
                                    isInvalid={emailsDontMatch}
                                />
                            )}

                            {/* // Login or Sign up */}
                            {!isPasscodeEntry && !isNewPassword && (
                                <Input
                                    label="Password"
                                    onUpdateValue={updateInputValueHandler.bind(this, 'password')}
                                    value={enteredPassword}
                                    textInputConfig={{
                                        onChangeText: (text) => updateInputValueHandler('password', text),
                                        value: enteredPassword,
                                        secureTextEntry: true,
                                    }}
                                    isInvalid={passwordIsInvalid}
                                />
                            )}

                            {/* // onSignUp */}
                            {!isLogin && !isForgot && !isNewPassword && (
                                <Input
                                    label="Confirm Password"
                                    onUpdateValue={updateInputValueHandler.bind(this, 'confirmPassword')}
                                    value={enteredConfirmPassword}
                                    textInputConfig={{
                                        onChangeText: (text) => updateInputValueHandler('confirmPassword', text),
                                        value: enteredConfirmPassword,
                                        secureTextEntry: true,
                                    }}
                                    isInvalid={passwordsDontMatch}
                                />
                            )}

                            {isPasscodeEntry && !isNewPassword && (
                                // Add your passcode entry component here
                                <>
                                    <Input
                                        label="Enter one-time passcode"
                                        onUpdateValue={updateInputValueHandler.bind(this, 'passcode')}
                                        value={enteredCode}
                                        textInputConfig={{
                                            onChangeText: (text) => updateInputValueHandler('passcode', text),
                                            value: enteredCode,
                                        }}
                                    />
                                </>
                            )}

                            {/* Enter new password after correct OTP entered */}
                            {isNewPassword && (
                            <>
                                <Input
                                    label="Enter New Password"
                                        onUpdateValue={updateInputValueHandler.bind(this, 'password')}
                                        value={enteredPassword}
                                        textInputConfig={{
                                            onChangeText: (text) => updateInputValueHandler('password', text),
                                            value: enteredPassword,
                                            secureTextEntry: true,
                                        }}
                                        isInvalid={passwordIsInvalid}
                                />

                                <Input
                                    label="Confirm New Password"
                                        onUpdateValue={updateInputValueHandler.bind(this, 'confirmPassword')}
                                        value={enteredConfirmPassword}
                                        textInputConfig={{
                                            onChangeText: (text) => updateInputValueHandler('confirmPassword', text),
                                            value: enteredConfirmPassword,
                                            secureTextEntry: true,
                                        }}
                                        isInvalid={passwordsDontMatch}
                                    />
                                </>
                            )}
                        </>
                    )}
                </View>
                <View style={styles.buttons}>
                    {isNewPassword && (
                        <Button onPress={() => { submitHandler(); }}>
                            Set New Password
                        </Button>
                    )}
                    {isPasscodeEntry && !isNewPassword ? (
                        <>
                            {/* // add to switch screen setIsNewPassword(); */}
                            <Button onPress={() => { submitHandler(); setIsNewPassword(); }}>
                                Submit Passcode
                            </Button>
                            <Text style={styles.label}>Enter the OTP passcode we sent to your email</Text>
                        </>
                    ) : (
                        isForgot && !isNewPassword && (
                            <Button onPress={() => { submitHandler(); setIsPasscodeEntry(); }}>
                                Reset Password
                            </Button>
                        )
                    )}
                    {!isPasscodeEntry && !isForgot && !isNewPassword && (
                        <Button onPress={submitHandler}>
                            {isLogin ? 'Log In' : 'Sign Up'}
                        </Button>
                    )}
                </View>



            </View>
        </KeyboardAvoidingView>
    );
}

export default AuthForm;

Strangely, or maybe not strange, when I run the app using only the command 'npx expo start' it runs exactly as expected: starts up to the login screen and I am able to login. it's only when I run the production mimic command 'npx expo start --no-dev --minify' that it crashes. I'm suspecting that this has to do with the conditional rendering of my JSX code based on the state isPasscodeEntry / isForgot / isLogin.

Solution

You have declared submitHandler in your else part so its scope is in that else and you have not called "submitHandler" in else part so it is giving error of "'submitHandler' is declared but its value is never read.ts(6133)".

You are calling your function from outside that scope thats why it can't be called.

To make it work, move your submitHandler outside of else, in main function.

Answered By - Kamran