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

Đang mở
  • Có gì không ổn?
#633 9 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
nextjs, nodejs, typescript
Lĩnh vực
api, backend

Hướng nghiên cứu

Bắt đầu với src/app/api/upload/route.ts và lệnh gọi upload_stream, sau đó tái hiện request bằng next dev và bằng next build && next start với các phiên bản package được cung cấp. So sánh response 500 trong production với kết quả trong development; hoàn tất khi cùng một lần upload hình ảnh thành công trong production build mà không có lỗi phân tích JSON.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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<UploadApiResponse>((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

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

Ngôn ngữ chính
JavaScript
Star
672
Fork
318
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

  • Không có Dockerfile hay tệp Docker Compose
  • Có mẫu pull request
  • Không có hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của cloudinary/cloudinary_npm

Tất cả issue của cloudinary/cloudinary_npm

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.