cloudinary / cloudinary/cloudinary_npm

Unexpected token < in JSON at position 0. Status code 500 in Nextjs 13 production build (App router)

Open
#633 9 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
666
Forks
319
Avg merge
17h 18m
Merged PRs (30d)
3

Description

## Describe the bug in a sentence or two.
Unexpected token < in JSON at position 0. Status code 500 in Nextjs 13 production build (App router)

## Issue Type (Can be multiple)
[ ] Build - Can’t install or import the SDK
[ ] Babel - Babel errors or cross browser issues
[ ] Performance - Performance issues
[X] Behaviour - Functions aren’t working as expected (Such as generate URL)
[ ] Documentation - Inconsistency between the docs and behaviour
[ ] Incorrect Types - For typescript users who are having problems with our d.ts files
[ ] Other (Specify)

## Steps to reproduce
Create a route src/app/api/upload/route.ts and use the _upload_stream_ method to upload any image
```
//src/app/api/upload/route.ts

import { NextRequest, NextResponse } from "next/server";
import { UploadApiResponse, v2 as cloudinary } from "cloudinary";

const cloud_name = process.env.NEXT_CLOUDINARY_CLOUDNAME;
const api_key = process.env.NEXT_CLOUDINARY_API_KEY;
const api_secret = process.env.NEXT_CLOUDINARY_API_SECRET;

cloudinary.config({
cloud_name,
api_key,
api_secret,
});

export async function POST(request: NextRequest) {
const data = await request.formData();
const image = data.get("file") as File;

const bytes = await image.arrayBuffer();
const buffer = Buffer.from(bytes);

const response = await new Promise((resolve, reject) => {
const stream = cloudinary.uploader.upload_stream({}, (err, res) => {
if (err) reject(err);

resolve(res!);
});

stream.write(buffer);
stream.end();
});

return NextResponse.json({
message: "File successfully uploaded",
url: response.secure_url,
id: response.public_id,
});
}
```
Run `next dev` command and send a request to `http://localhost:3000/api/upload` with the image. This works fine

Now, run `next build && next start` and send same request to the same url and server will throw an HTTP 500 error:

## Error screenshots
![Screenshot 2023-10-07 at 7 56 47 PM](https://github.com/cloudinary/cloudinary_npm/assets/62427837/d659aa21-e1b1-4d52-a868-4a755992cbc7)

## Browsers (if issue relates to UI, else ignore)
[ ] Chrome
[ ] Firefox
[ ] Safari
[ ] Other (Specify)
[ ] All

## Versions and Libraries (fill in the version numbers)
Cloudinary_NPM SDK version 1.41.0
Node - 18.15.0
NPM - 9.6.4

## Config Files (Please paste the following files if possible)
```
// package.json
{
"name": "cloudinary-test",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"cloudinary": "^1.41.0",
"next": "13.5.4",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"typescript": "^5"
}
}

```

## Repository
https://github.com/DongnutLa/cloudinary-next13

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.