Not able to console log anything in Formik in a RN app-CodePudding

Where ever I have used console.log() in formik to the get the data from the client, it is not showing anything in the console, anytime.

This is my form schema

const formSchema = yup.object({
    title: yup.string().required().min(3).max(50),
    image: yup.string().required(),
    homeType: yup.string().required(),
    price: yup.number().required(),
    yearBuilt: yup.number().required(),
    address: yup.string().required().min(10).max(50),
    description: yup.string().required().min(5),
})

this is where the form component is called

<Formik
                initialValues={{
                    title:"",
                    image:"",
                    homeType:"",
                    price:"",
                    yearBuilt:"",
                    address:"",
                    description:""
                }}
                validationSchema={formSchema}
                onSubmit={(values) => {
                    console.log('values submitted', values);
                    setIsLoading(true)
                    dispatch(houseAction.createHome(values))
                        .then(() => {
                            setIsLoading(false)
                            Alert.alert(JSON.stringify("Created Successfully", [{ text: 'OK'}]))
                        })
                        .catch(() => {
                            setIsLoading(false)
                            Alert.alert(JSON.stringify("An error occured. Try again!", [{text: "OK"}]))
                        })
                }
            }
            >
                {(props)=>{
                    .....}

And handle submit button is separate

<View style={styles.buttonContainer}>
                                <Button 
                                    title="Add Home"
                                    onPress={console.log('handle submit pressed', props.handleSubmit)}
                                />
                            </View>

This same code is running fine in windows and showing the error in console. But in mac it is showing nothing in console and this error comes up whenever I start the app.

  * debugger-ui/debuggerWorker.aca173c4(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json)
  * debugger-ui/debuggerWorker.aca173c4/index(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json)
    at ModuleResolver.resolveDependency (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:136:15)
    at DependencyGraph.resolveDependency (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at /Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/lib/transformHelpers.js:129:24
    at Server._resolveRelativePath (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/Server.js:1107:12)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at Server._explodedSourceMapForURL (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/Server.js:1058:35)
    at async Promise.all (index 1)
    at Server._symbolicate (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/Server.js:1009:26)
    at Server._processRequest (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/Server.js:429:7)
Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4 from /Users/gourabsanyal/Desktop/house-listing-app/client/.: 

None of these files exist:
  * debugger-ui/debuggerWorker.aca173c4(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json)
  * debugger-ui/debuggerWorker.aca173c4/index(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json)
    at ModuleResolver.resolveDependency (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:136:15)
    at DependencyGraph.resolveDependency (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at /Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/lib/transformHelpers.js:129:24
    at Server._resolveRelativePath (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/Server.js:1107:12)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at Server._explodedSourceMapForURL (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/Server.js:1058:35)
    at async Promise.all (index 1)
    at Server._symbolicate (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/Server.js:1009:26)
    at Server._processRequest (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/Server.js:429:7)

CodePudding user response：

It looks like you have a bug in Button code:

onPress={console.log('handle submit pressed', props.handleSubmit)}

You invoke the console.log right away. Try:

onPress={() => console.log('handle submit pressed', props.handleSubmit)}

If it works, you should be aware that creating the function like is not best practice as i will cause the child components to re-render each time the form component re-render. See useCallback for how to avoid this

CodePudding user response：

there was an error with cache and I watchman watch-del-all, expo start -c to clean expo cache, deleted node modules, and ran npm install reinstalled and it worked.

for the errors, if you are not getting anything in the terminal, check if the remote debugging is on in your browser, if so, close it from the app toggle menu, google how to get to your toggle menu (its different in different OS and development kit). It will be resolved.

when the remote debugger is on, mostly all the console logs will be logged in the browser debugger.it took me a while to figure that out.