SyntaxError for UploadThing

using any UploadThing component breaks my code, because of this error

- error SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)

- error SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)

I dont seem to know where I'm messing up,

"use client";
// You need to import our styles for the button to look right. Best to import in the root /layout.tsx but this is fine
import "@uploadthing/react/styles.css";

import { UploadButton } from "@uploadthing/react";

import { OurFileRouter } from "@/app/api/uploadthing/core";

export default function Upload() {
    return (
        <div>
            <UploadButton<OurFileRouter>
                endpoint="imageUploader"
                onClientUploadComplete={(res) => {
                    // Do something with the response
                    console.log("Files: ", res);
                    alert("Upload Completed");
                }}
                onUploadError={(error: Error) => {
                    // Do something with the error.
                    alert(`ERROR! ${error.message}`);
                }}
            />

        </div>
    );
}

"use client";
// You need to import our styles for the button to look right. Best to import in the root /layout.tsx but this is fine
import "@uploadthing/react/styles.css";

import { UploadButton } from "@uploadthing/react";

import { OurFileRouter } from "@/app/api/uploadthing/core";

export default function Upload() {
    return (
        <div>
            <UploadButton<OurFileRouter>
                endpoint="imageUploader"
                onClientUploadComplete={(res) => {
                    // Do something with the response
                    console.log("Files: ", res);
                    alert("Upload Completed");
                }}
                onUploadError={(error: Error) => {
                    // Do something with the error.
                    alert(`ERROR! ${error.message}`);
                }}
            />

        </div>
    );
}

14 Replies

ablc•13mo ago

Currently trying the app router examples here to no avail too: https://github.com/pingdotgg/uploadthing/tree/main/examples/appdir

GitHub

uploadthing/examples/appdir at main · pingdotgg/uploadthing

File uploads for modern web devs. Contribute to pingdotgg/uploadthing development by creating an account on GitHub.

markr•13mo ago

Do you have a public repo I can take a look at? What package manager are you using?

ablc•13mo ago

Hi mark, here's my repo: https://github.com/louisuy/Next-13-Social-Media-App/tree/uploadthing

GitHub

GitHub - louisuy/Next-13-Social-Media-App at uploadthing

Contribute to louisuy/Next-13-Social-Media-App development by creating an account on GitHub.

ablc•13mo ago

And I use npm.

markr•13mo ago

We have noticed some oddities with npm recently, though ideally you should be able to use any package manager. I will check out your repo shortly!

ablc•13mo ago

Yeah it surely is odd, cause the moment <UploadButton ... /> or <UploadDropzone ... /> is uncommented/pasted in, the page breaks. And all I get in the logs are:

- error SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)

- error SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)

Where everything else seems to be fine, and atleast 1:1 with the docs.

markr•13mo ago

IT looks like you don't have the API route or file router definition in this repo That error actually makes sense if you are missing the API route, because it will try to hit that endpoint, and get back an HTML response (instead of JSON)

ablc•13mo ago

Those are the files in the docs, which are these right?

markr•13mo ago

Yep those are the ones

ablc•13mo ago

Yeah they exist in that branch in the repo, let me add it to the main and let me push.

ablc•13mo ago

Okay yeah, I've brought it back to the master branch, and still I've replicated

- error SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)

- error SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)

ablc•13mo ago

https://github.com/louisuy/Next-13-Social-Media-App/tree/master/app/api/uploadthing

ablc•13mo ago

Hey @markr, I've fixed it, It had to do with:

.onUploadComplete(async ({ metadata, file }) => {})

.onUploadComplete(async ({ metadata, file }) => {})

This metadata which remained unused. Removing it fixed it.

markr•13mo ago

Ah, interesting. Will definitely have to look into that. Cc @theo

Gaming

Programming

SyntaxError for UploadThing