react-native: Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication()

Description

Hello , I am new to react native and react. I was expo and using maps. I have been breaking my head for the past 24hrs trying to figure out how and y my application keeps failing when I am using useSelector to connect.

Version

0.70.0

Output of npx react-native info

ReferenceError: Can’t find variable: mapStateToProps at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:null in handleError at node_modules\expo\build\errors\ExpoErrorManager.js:null in errorHandler at node_modules\expo\build\errors\ExpoErrorManager.js:null in <anonymous> at node_modules@react-native\polyfills\error-guard.js:null in ErrorUtils.reportFatalError at node_modules\metro-runtime\src\polyfills\require.js:null in guardedLoadModule at http://yw-5ax.anonymous.awesomeproject.exp.direct/node_modules\expo\AppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:null in global code

Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter. A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native. at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:null in handleError at node_modules\expo\build\errors\ExpoErrorManager.js:null in errorHandler at node_modules\expo\build\errors\ExpoErrorManager.js:null in <anonymous> at node_modules@react-native\polyfills\error-guard.js:null in ErrorUtils.reportFatalError at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in callFunctionReturnFlushedQueue

Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter. A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native. at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:null in handleError at node_modules\expo\build\errors\ExpoErrorManager.js:null in errorHandler at node_modules\expo\build\errors\ExpoErrorManager.js:null in <anonymous> at node_modules@react-native\polyfills\error-guard.js:null in ErrorUtils.reportFatalError at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in callFunctionReturnFlushedQueue

Steps to reproduce

Reference error is for maps

Snack, code example, screenshot, or link to a repository

import { StyleSheet, Text, View,Image } from ‘react-native’ import React from ‘react’ import { Component } from “react”; import tw from “tailwind-react-native-classnames”; import * as React from ‘react’;

import MapView,{Marker,Polygon} from ‘react-native-maps’; import { useSelector } from ‘react-redux’;

import { selectOrigin } from ‘…/slices/navSlice’;

class Map extends React.Component { constructor(props) { super(props); this.state = { reports: [], latitude: 0, longitude: 0, error: null,

}
const mapStateToProps = (state) => {
  return {
    origin: selectOrigin

  }

} }

componentDidMount() {
  fetch('https://gist.githubusercontent.com/jo780-full/c42f65154fac8d3d6e495326211e15b7/raw/20e8af7285f9ae5c1328e00cc79b1e2711bd446a/student.json',{
    method: 'GET',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    }

  })
  .then(res => res.json())
  .then(data => {
    this.setState({ reports: data.report })
  })
  .catch(console.error)

} mapMarkers = () => {

return this.state.reports.map((report) => <Marker
  key={report.id}
  coordinate={{ latitude: report.latitude, longitude: report.longitude }}
  title=" student parking spot"
  description="available"
>
</Marker >)

}

render() {

return (

<MapView


mapType="mutedStandard"
showsUserLocation={true}
    followUserLocation={true}
    zoomEnabled={true}
style={tw`h-full w-full`}
initialRegion={
  {
    latitude: this.mapStateToProps.origin.location.lat,
    longitude:this.mapStateToProps.origin.location.longitude,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }
}

{this.mapMarkers()}




  




{/*student area*/}
<Polygon
coordinates={[
  { latitude: 12.908764862118488,   longitude: 77.56763368009942 },
  { latitude: 12.909351220825277,longitude:  77.56756522139399 },
  { latitude: 12.909496879375817,longitude:  77.56763847998074 },
  {latitude:12.909506790161094,longitude: 77.56779777527214},
  {latitude:12.909333117614427, longitude:77.56856604008081},
  {latitude:12.909124598612156,longitude: 77.56852690728837},
  { latitude: 12.909385294896701,  longitude: 77.5681230870149, },
  {latitude:12.909061025711033, longitude:77.5681799298621},
  {latitude:12.909050854045336,longitude:  77.56815645018665},
  { latitude:12.90868749725228, longitude: 77.56800790948633},
  { latitude: 12.908710622492181 , longitude: 77.56762153367315 },


]}
fillColor="rgba(255, 0, 0, 0.1)"
strokeColor="rgba(255, 0, 0, 0.5)" // fallback for when `strokeColors` is not supported by the map-provider
strokeColors={[
  '#7F0000',
  '#00000000', // no color, creates a "long" gradient between the previous and next coordinate
  '#B24112',
  '#E5845C',
  '#238C23',
  '#7F0000'
]}
strokeWidth={1}

/> <Polygon coordinates={[ { latitude: 12.909394643253528,longitude: 77.56614422503371 }, { latitude: 12.909456079146613, longitude: 77.56582255987011 }, { latitude:12.90941582804595,longitude: 77.56577909160477}, {latitude:12.90938405085663, longitude:77.56579213208437}, { latitude:12.909368162260469, longitude:77.56582255987011}, {latitude:12.90934168126461,longitude: 77.56586602813547}, { latitude:12.908920103432747, longitude:77.56579430549765}, {latitude:12.908892563147631, longitude:77.56606489544944} ]} fillColor=“rgba(0, 255, 0, 0.1)” strokeColor=“rgba(0, 255, 0, 0.5)” // fallback for when strokeColors is not supported by the map-provider strokeColors={[ ‘#7F0000’, ‘#00000000’, // no color, creates a “long” gradient between the previous and next coordinate ‘#B24112’, ‘#E5845C’, ‘#238C23’, ‘#7F0000’ ]} strokeWidth={1} /> {/*Hospital */} <Polygon coordinates={[ { latitude:12.908518776874924,longitude: 77.56518322273905 }, { latitude: 12.908724009086619, longitude: 77.56522814973901 }, { latitude:12.908739042012709, longitude: 77.56516914114205 }, { latitude: 12.908535770631334 ,longitude: 77.56512287303762}, ]} fillColor=“rgba(0, 0, 255, 0.1)” strokeColor=“rgba(0, 0, 255, 0.5)” // fallback for when strokeColors is not supported by the map-provider

strokeColors={[
  '#7F0000',
  '#00000000', // no color, creates a "long" gradient between the previous and next coordinate
  '#B24112',
  '#E5845C',
  '#238C23',
  '#7F0000'
]}
strokeWidth={2}

/> {/*Vip Parking */} <Polygon coordinates={[ { latitude:12.909451264916404, longitude: 77.5669158882026 },

  { latitude: 12.909262624852568,  longitude:  77.56687637127314 },

  { latitude: 12.90931398237095 ,longitude: 77.56748432403379},

  { latitude:12.909400895070368, longitude:  77.56744784686815 },
  {latitude:12.909426457234511, longitude:77.56698467532628},

]}
fillColor="rgba(255, 255, 50, 0.3)"
strokeColor="rgba(255, 255, 0, 0.6)"// fallback for when `strokeColors` is not supported by the map-provider
strokeColors={[
  '#7F0000',
  '#00000000', // no color, creates a "long" gradient between the previous and next coordinate
  '#B24112',
  '#E5845C',
  '#238C23',
  '#7F0000'
]}
strokeWidth={2}

/>

</MapView>

) } }

export default connect(mapStateToProps) (Map)

const styles = StyleSheet.create({ text: { color: ‘#fff’, fontSize: 30, fontWeight: ‘bold’, },

})