We’re Still Here to Help (Even Over the Holidays!) - find out more here.
Forum Discussion
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 ?
1 Reply
- Greg-DB
Dropbox Community Moderator
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.
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
