[Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected identifier "An"]

[HiCompany5680]

Hello.

I am doing a project in react -native but when executing my project I am getting the following error:

[Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected identifier "An"]

Stack trace:
  [native code]:null in parse
  node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
  node_modules/promise/setimmediate/core.js:123:25 in setImmediate$argument_0
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:194:17 in _callImmediatesPass
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:458:30 in callImmediates
  [native code]:null in callImmediates
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:407:6 in __callImmediates
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:6 in __guard$argument_0
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:142:17 in __guard$argument_0
  [native code]:null in flushedQueue
  [native code]:null in invokeCallbackAndReturnFlushedQueue
  ...

My code is as follows:

App.js

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import MealsScreen from './src/screens/Meals';
import Modal from './src/screens/Modal';

const AppNavigation = createStackNavigator({
  Meals: {
    screen: MealsScreen
  }
}, {
  initialRouteName: 'Meals'
});

const RootStack = createStackNavigator( {
  Main: AppNavigation,
  Modal: Modal,
}, {
  mode: 'modal',
  headerMode: 'none',
});

export default createAppContainer( RootStack );

Meals.js

import React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import ListItem from '../components/ListItem';
import UseFetch from '../hooks/useFetch';

const Meals = ({navigation}) => {
    const { loading, dato: meals } = UseFetch('https://serverless.mgyavega.now.sh/api/meals');

    return(
        <View style =  { styles.container }>
            { loading ? <Text>Cargando por favor espere...</Text> :
                <FlatList
                    style = { styles.list }
                    data = { meals }
                    keyExtractor = { x => x._id }
                    renderItem = { ({ item }) =>
                        <ListItem
                            onPress = { () => navigation.navigate('Modal', { id: item._id })}
                            name = { item.name }
                        />
                    }
                />
            }
        </View>
    )
}

Meals.navigationOptions = ({
    title: 'Comidas Disponibles',
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'flex-start',
        justifyContent: 'flex-start'
    },
    list: {
        alignSelf: 'stretch'
    }
});

export default Meals;

ListItem.js

import React from 'react';
import {  TouchableOpacity, Text, StyleSheet } from 'react-native';

export default ({ name, onPress }) => {

    return (
        <TouchableOpacity onPress = { onPress } style={ styles.container }>
            <Text style = { styles.text }> {name} </Text>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: 15,
        height: 60,
        justifyContent: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#eee'
    },
    text: {
        fontSize: 16
    }
});

UseFetch.js

import React, { useState, useEffect} from 'react';

const UseFetch = ( url ) => {
    const [ loading, setLoading ] = useState(true);
    const [ dato, setDato] = useState([]); // Este traer al incio un arreglo vacio

    const fetchData = async () => {
        const response = await fetch(url);
        const data = await response.json();
        setDato(data);
        setLoading(false);
    }

    useEffect( () => {
        fetchData();
    }, []);

    return { loading, dato }
}

export default UseFetch;

Modal.js

import React from 'react';
import {  View, Text, } from 'react-native';
import UseFetch from '../hooks/useFetch';

export default ({ navigation }) => {

    const id = navigation.getParam('_id');
    const { loading, dato } = UseFetch(`https://serverless.mgyavega.now.sh/api/meals/${id}`);

    console.log( dato );

    return (

        loading ? <Text>Cargando </Text> :
            <View>
                <Text>  </Text>
                <Text> </Text>
            </View>

    )
}

I could not obtain the _id of the dishes in the Modal, when creating the console.log it indicates that the value is undefined, but when doing the console.log of the database in the method of the console.log modal (data) ; If you show me the data record but it first comes out empty and then the data in the record goes out twice, but in the execution, the error I indicated appears.

I appreciate the collaboration you can provide me.

Thank you.

Mari

[zloirock]

Why do you think that it's related to core-js? I see only JSON parsing error and core-js missed in the stack trace.

[HiCompany5680]

@zloirock
Thank you for your response, the error you give me is the first syntax I show.

But I don't know why the error arises.

Regards.

[zloirock]

I'm not sure that I can help here.

[Katiachilla]

du coupa t'as trouvé une solution? je rencontre le même problème?