Cloudflare Developers•12mo ago

ReferenceError process is not defined

I am trying to use UploadThing together with a Cloudflare Worker and tiny-request-router. Currently when I send a POST request with a png file attached via Insomnia to my "api/uploadthing" endpoint, I receive the following error "ReferenceError process is not defined". Here is what my "index.ts file looks like:

import { Env, Handler } from './types';
import { Method, Router } from 'tiny-request-router';
import { uploadRouter } from './uploadthing';
import { createServerHandler } from 'uploadthing/server';
import * as process from 'node:process';

const { GET, POST } = createServerHandler({
    router: uploadRouter,
});

const router = new Router<Handler>();

router.post('/api/uploadthing', async (req, env) => POST(req));
router.get('/api/uploadthing', async (req) => GET(req));

const worker: ExportedHandler<Env> = {
    async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
        process.env.UPLOADTHING_SECRET ??= env.UPLOADTHING_SECRET;
        process.env.UPLOADTHING_APP_ID ??= env.UPLOADTHING_APP_ID;

        const url = new URL(request.url);
        const match = router.match(request.method as Method, url.pathname);

        if (!match) return new Response('Not found', { status: 404 });

        return match.handler(request, env);
    },
};

export default worker;

import { Env, Handler } from './types';
import { Method, Router } from 'tiny-request-router';
import { uploadRouter } from './uploadthing';
import { createServerHandler } from 'uploadthing/server';
import * as process from 'node:process';

const { GET, POST } = createServerHandler({
    router: uploadRouter,
});

const router = new Router<Handler>();

router.post('/api/uploadthing', async (req, env) => POST(req));
router.get('/api/uploadthing', async (req) => GET(req));

const worker: ExportedHandler<Env> = {
    async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
        process.env.UPLOADTHING_SECRET ??= env.UPLOADTHING_SECRET;
        process.env.UPLOADTHING_APP_ID ??= env.UPLOADTHING_APP_ID;

        const url = new URL(request.url);
        const match = router.match(request.method as Method, url.pathname);

        if (!match) return new Response('Not found', { status: 404 });

        return match.handler(request, env);
    },
};

export default worker;

Here is what my "wrangler.toml" file looks like:

name = "backend"
main = "src/index.ts"
compatibility_date = "2023-11-21"
compatibility_flags = [ "nodejs_compat" ]


[vars]
API_HOST = "example.com"
API_ACCOUNT_ID = "example_user"
SERVICE_X_DATA = { URL = "service-x-api.dev.example", MY_ID = 123 }

name = "backend"
main = "src/index.ts"
compatibility_date = "2023-11-21"
compatibility_flags = [ "nodejs_compat" ]


[vars]
API_HOST = "example.com"
API_ACCOUNT_ID = "example_user"
SERVICE_X_DATA = { URL = "service-x-api.dev.example", MY_ID = 123 }

And this is my "types.ts" file:

export interface Env {
    UPLOADTHING_SECRET: string;
    UPLOADTHING_APP_ID: string;
}

export type Handler = (request: Request, env: Env) => Response | Promise<Response>;

export interface Env {
    UPLOADTHING_SECRET: string;
    UPLOADTHING_APP_ID: string;
}

export type Handler = (request: Request, env: Env) => Response | Promise<Response>;

6 Replies

kian•12mo ago

process is not defined so process.env.UPLOADTHING_SECRET ??= env.UPLOADTHING_SECRET; is expected to fail.

kristiankauffeldOP•12mo ago

how and where should I define process?

kian•12mo ago

Move createServerHandler into your fetch handler and pass a config object containing uploadthingId and uploadthingSecret instead. https://github.com/pingdotgg/uploadthing/blob/dbbfceec704dc156ce2b5ba6fa383856c83f3e51/packages/uploadthing/src/internal/handler.ts#L84-L91 Unless you're happy to use define to do build-time constants, your import * as process from 'node:process'; isn't going to also import process for UploadThing's code. You could try globalThis.process.env.UPLOADTHING_SECRET ??= env.UPLOADTHING_SECRET; as an alternative, to make sure that it's a global.

kristiankauffeldOP•12mo ago

If I do it like this, then I won't get the "ReferenceError: process is not defined" error anymore, but instead I get a "400 bad request" and this JSON response: { "message": "No slug provided" }

import { Env, Handler } from './types';
import { Method, Router } from 'tiny-request-router';
import { uploadRouter } from './uploadthing';
import { createServerHandler } from 'uploadthing/server';

const router = new Router<Handler>();

router.post('/api/uploadthing', async (req, env) => {
    const { GET, POST } = createServerHandler({
        router: uploadRouter,
        config: {
            uploadthingId: env.UPLOADTHING_APP_ID,
            uploadthingSecret: env.UPLOADTHING_SECRET,
            callbackUrl: 'http://localhost:8787/api/uploadthing',
        },
    });
    return POST(req);
});

router.get('/api/uploadthing', async (req) => GET(req));

const worker: ExportedHandler<Env> = {
    async fetch(request, env, ctx) {
        const url = new URL(request.url);
        const match = router.match(request.method as Method, url.pathname);

        if (!match) return new Response('Not found', { status: 404 });

        return match.handler(request, env);
    },
};

export default worker;

import { Env, Handler } from './types';
import { Method, Router } from 'tiny-request-router';
import { uploadRouter } from './uploadthing';
import { createServerHandler } from 'uploadthing/server';

const router = new Router<Handler>();

router.post('/api/uploadthing', async (req, env) => {
    const { GET, POST } = createServerHandler({
        router: uploadRouter,
        config: {
            uploadthingId: env.UPLOADTHING_APP_ID,
            uploadthingSecret: env.UPLOADTHING_SECRET,
            callbackUrl: 'http://localhost:8787/api/uploadthing',
        },
    });
    return POST(req);
});

router.get('/api/uploadthing', async (req) => GET(req));

const worker: ExportedHandler<Env> = {
    async fetch(request, env, ctx) {
        const url = new URL(request.url);
        const match = router.match(request.method as Method, url.pathname);

        if (!match) return new Response('Not found', { status: 404 });

        return match.handler(request, env);
    },
};

export default worker;

kian•12mo ago

https://github.com/pingdotgg/uploadthing/blob/dbbfceec704dc156ce2b5ba6fa383856c83f3e51/packages/uploadthing/src/internal/handler.ts#L147-L157C10

kristiankauffeldOP•12mo ago

@kian thanks for your help I have solved it now!

Gaming

Programming

ReferenceError process is not defined