It affects iOS and Android, using Expo Go.
I get the error on the opening screen of the app, where there’s a fetch to my own back-end API, but not on any other screen with a fetch. I’ve never had this syntax error before with previous SDKs, and the data I’m fetching hasn’t changed.
The npx expo start process complained about react-native being 0.69.5 rather than 0.69.6 - I upgraded but this didn’t make a difference. Any thoughts?
Hi @lpgm
Can you log the response you get before trying to decode it as JSON? If so, what does it look like? Is it very large? Is it truncated?
Hello. Here it is.
{
"type": "default",
"status": 200,
"ok": true,
"statusText": "",
"headers": {
"map": {
"access-control-allow-origin": "*",
"connection": "keep-alive",
"content-length": "39",
"content-type": "application/json; charset=utf-8",
"date": "Tue, 11 Oct 2022 21:07:21 GMT",
"etag": "W/\"27-NyUnkV3l1GgDR4Hu9GJlhSouH+U\"",
"x-powered-by": "Express"
}
},
"url": "[MY BACK-END ENDPOINT]",
"bodyUsed": false,
"_bodyInit": {
"_data": {
"size": 39,
"offset": 0,
"blobId": "89E38D87-71B8-41EC-BCD4-4DDAF6297223",
"type": "application/json",
"name": "met-now",
"__collector": {
}
}
},
"_bodyBlob": {
"_data": {
"size": 39,
"offset": 0,
"blobId": "89E38D87-71B8-41EC-BCD4-4DDAF6297223",
"type": "application/json",
"name": "met-now",
"__collector": {
}
}
}
}
This looks like valid JSON to me. The only slightly suspect bit to me is the escaped quotes, which should of course be fine.
So you got that by logging the actual response that the app received before trying to decode it? Could you post the snippet of code that you’re using to fetch that and decode it?
Another random thought: What JS engine are you using? For testing purposes, what happens if you switch from JSC to Hermes or vice versa?
Thanks, wodin. Yes, that’s the response before doing .json() - the code’s below.
I’m just a hobbyist, and not sure what JS engine is involved with all this!
Usually I’d think the error is a red herring, but then this one is specific, and doesn’t mention any problems with modules/packages and doesn’t mention any particular line of my code.
useEffect(() => {
const fetchData = async () => {
const response = await fetch("[MY END-POINT]");
console.log(`Response: ${JSON.stringify(response)}`);
const data = await response.json();
setWeather(data);
};
fetchData();
const interval = setInterval(fetchData, 60000);
return () => clearInterval(interval);
}, []);
OK, I created a new Expo 46 app and replaced the code in App.js with the following:
import { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { Button, StyleSheet, Text, View } from 'react-native';
const devHost = '192.168.88.123';
export default function App() {
const [data, setWeather] = useState();
const fetchData = async () => {
const response = await fetch(`http://${devHost}:3000/assets/data.json`);
console.log(`Response: ${JSON.stringify(response)}`);
const data = await response.json();
setWeather(data);
};
return (
<View style={styles.container}>
<Text>Data: {JSON.stringify(data, null, 2)}</Text>
<Button title="Fetch" onPress={fetchData} />
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I then put the example JSON from your previous message in assets/data.json.
I then ran npx serve in the app’s root directory and ran npx expo start in another terminal.
If I press the button it fetches the JSON and decodes it without a problem. Does it also work for you? (You’d need to change devHost to your dev machine’s IP address.)
By default it will be using JavaScriptCore, a.k.a. JSC. You can change it to Hermes. It should not make a difference for something like this, but there’s a chance that the behaviour will be different and it might give you more clues.
Thanks a lot for taking the trouble to do this. I’ve just done what you said, and the app works fine - no parse error. I then replaced the local JSON with my actual API endpoint, and the JS object containing the weather data appeared fine, with no error. So something else must be going on. I’m beginning to think maybe this parse error is happening with the already released app based on SDK 45 - the app doesn’t crash, after all, and you wouldn’t know about it. But then I don’t remember getting the parse error back then.
I’ll have a look at changing the JS engine then - if you think this might possibly give me some more clues.
I think that switching to hermes is not likely to help, but I don’t have any better suggestions right now.
Fixed it!
I’ve got another API, which I use to send messages to the front screen of the app, and which I forgot about!
When I last took a message off, I accidentally put response.send(JSON.stringify()) rather than response.send(JSON.stringify("")). Whoops!
Thanks again for helping out.
No problem 
I’m glad you figured it out.
This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.