Child Item

Javascript SDK on Next JS Server Components / Routes

Hi,

I am trying to use the dropbox sdk in a next js 14 application.
I want to download files on the server and pass them to the client.

const dbx = new Dropbox({ accessToken });
const response = await dbx.filesDownload({ path: "file/path"})

However when fetching files on the server I am getting an error:

Error fetching file from Dropbox: TypeError: _this2.fetch is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/dropbox/es/src/dropbox.js:141:23)
    at async GET (webpack-internal:///(rsc)/./app/api/dropbox/route.ts:22:26)
    at async /Users/owner/code/real-estate-os/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:55038
    at async ek.execute (/Users/owner/code/real-estate-os/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:45808)
    at async ek.handle (/Users/owner/code/real-estate-os/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:56292)
    at async doRender (/Users/owner/code/real-estate-os/node_modules/next/dist/server/base-server.js:1377:42)
    at async cacheEntry.responseCache.get.routeKind (/Users/owner/code/real-estate-os/node_modules/next/dist/server/base-server.js:1599:28)
    at async DevServer.renderToResponseWithComponentsImpl (/Users/owner/code/real-estate-os/node_modules/next/dist/server/base-server.js:1507:28)
    at async DevServer.renderPageComponent (/Users/owner/code/real-estate-os/node_modules/next/dist/server/base-server.js:1931:24)
    at async DevServer.renderToResponseImpl (/Users/owner/code/real-estate-os/node_modules/next/dist/server/base-server.js:1969:32)
    at async DevServer.pipeImpl (/Users/owner/code/real-estate-os/node_modules/next/dist/server/base-server.js:920:25)
    at async NextNodeServer.handleCatchallRenderRequest (/Users/owner/code/real-estate-os/node_modules/next/dist/server/next-server.js:272:17)
    at async DevServer.handleRequestImpl (/Users/owner/code/real-estate-os/node_modules/next/dist/server/base-server.js:816:17)
    at async /Users/owner/code/real-estate-os/node_modules/next/dist/server/dev/next-dev-server.js:339:20
    at async Span.traceAsyncFn (/Users/owner/code/real-estate-os/node_modules/next/dist/trace/trace.js:154:20)
    at async DevServer.handleRequest (/Users/owner/code/real-estate-os/node_modules/next/dist/server/dev/next-dev-server.js:336:24)
    at async invokeRender (/Users/owner/code/real-estate-os/node_modules/next/dist/server/lib/router-server.js:174:21)
    at async handleRequest (/Users/owner/code/real-estate-os/node_modules/next/dist/server/lib/router-server.js:353:24)
    at async requestHandlerImpl (/Users/owner/code/real-estate-os/node_modules/next/dist/server/lib/router-server.js:377:13)
    at async Server.requestListener (/Users/owner/code/real-estate-os/node_modules/next/dist/server/lib/start-server.js:141:13)

Is it possible to fetch dropbox files on a NextJS 14 server ?

Find more posts tagged with

API

Abuse

Comments

Greg-DB

The Dropbox JavaScript SDK isn't built to specifically support Next.JS, but I'll pass this along as a feature request. I can't promise if or when that might be implemented though.

That said, based on the error you shared it looks like the issue is that the fetch function is not available in your environment. The Dropbox SDK does need the fetch function to make network requests though, so if you do have access to the fetch function, you can pass it in to the Dropbox constructor. There's some more information here.