Error: Unexpected token n in JSON at position 0 (course: react native part 2)

React Native
1

HI, i am taking the course ‘react native part 2’ and for the backend i downloaded the files everything worked till chapter ‘14 - posting data’. I have the following error from the server:
Unexpected token n in JSON at position 0

when i post normal json data from the react native it works , but when I use formData() with images it just doesn’t anymore… I am not able to solve this it is a bit frustrating … the code is just like moshe’s i checked line by line. I looked so much all i know is that apisauce may not support multipart/form-data but in the video the post works without any issues. Please is you know what could be happening it will be a great help.

import apiClient from ‘./client’;

const endpoint = ‘/listings’;
const getListings = () => apiClient.get(endpoint);

const addListing = (listing) => {
console.log(‘:: image ::’, listing.images[0]);
const data = new FormData();
data.append(‘title’, listing.title);
data.append(‘price’, listing.price);
data.append(‘categoryId’, listing.category.value);
data.append(‘description’, listing.description);

listing.images.forEach((image, index) =>
    data.append('images', {
        name: 'image' + index,
        type: 'image/jpeg',
        uri: image
    })
);

if (listing.location)
    data.append('location', JSON.stringify(listing.location));

return apiClient.post(endpoint, data);
// return apiClient.post(endpoint, {
//     title: 'Test',
//     price: '23',
//     categoryId: 4,
//     description: 'Test',
//     location: {
//         latitude: 37.33233141,
//         longitude: -122.0312186
//     }
// });

};

export default {
addListing,
getListings
};

the above code is exactly like the one in the video.

2

the commented code works that was my test, but when I send the formData object i receive the error. = (

4

Hello Danny,

I have the same problem.
Have you found a solution ?

Thanks

Best regards,

5

Yes, something weird happens with the npm 'cause after two weeks of trying to fix it with no success, i downloaded the whole project again… this time i verified that npm doesn’t update some packages specially multer for imgaes… i guess in my first try npm altered it and when running npm install. It’s weird but since then i am not changing the package json. Hope this can fix the error as it worked in my local environment.

1 Like
6

I experienced the same issue. In order to continue the training i commented out the upload or resize image logic. Hope somebody from the support team to resolve the issue.

@moshhamedani

7

I found the solution for the above error. Turns out that apisauce doesn’t convert the Content-Type header as Mosh suggests in the tutorial and you have to pass in the header when sending the post request.

Change the following line from:

return apiClient.post(endpoint, data);

To:

return apiClient.post(endpoint, data, {headers: { “Content-Type”: “multipart/form-data” }});

I hope this will fix the issue. Happy hacking :slight_smile:

2 Likes
8

Hello Danny,

I have the same problem.
Have you found a solution ?

Thanks

Best regards,

9

yes, as i mentioned before mine is working
This is my current package.json hope it helps:

{
    "name": "done-with-it-backend",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start": "node index.js"
    },
    "engines": {
        "node": "12.6.x"
    },
    "keywords": [],
    "author": "Mosh Hamedani",
    "license": "ISC",
    "dependencies": {
        "body-parser": "^1.19.0",
        "compression": "^1.7.4",
        "config": "^3.3.1",
        "expo-server-sdk": "^3.5.0",
        "express": "^4.17.1",
        "helmet": "^3.22.0",
        "joi": "^14.3.1",
        "jsonwebtoken": "^8.5.1",
        "multer": "^1.4.2",
        "sharp": "^0.32.6"
    },
    "devDependencies": {
        "nodemon": "^2.0.2"
    }
}
10

Thanks man, you saved me a lot of time. That was it.