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

オープン
  • 何か問題がありますか？
#633 コメント 9 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
nextjs, nodejs, typescript
領域
api, backend

調査の方向性

まず src/app/api/upload/route.ts と upload_stream 呼び出しから始め、提供されたパッケージバージョンを使って next dev と next build && next start でリクエストを再現します。本番環境での 500 レスポンスと開発環境での結果を比較します。同じ画像のアップロードが JSON パースエラーなしで本番ビルドに成功すれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
JavaScript
スター
672
フォーク
318
30日以内にマージされた PR はありません

環境構築

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートあり
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

cloudinary/cloudinary_npm のほかの issue

cloudinary/cloudinary_npm の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。