T
TanStack•5mo ago
flat-fuchsia

Using Bun functions in server functions

Hello, I am trying to call this in TS Start in order to get a pre-signed upload url for AWS S3: 
// s3.ts
import { randomUUIDv7, s3 } from 'bun'

function getPresignedUploadURL(file: File): string {
  const fileId = randomUUIDv7()

  const uploadUrl = s3.presign(fileId, {
    method: 'PUT',
    expiresIn: 3600,
    type: file.type,
    acl: 'public-read',
  })

  return uploadUrl
}
// s3.ts
import { randomUUIDv7, s3 } from 'bun'

function getPresignedUploadURL(file: File): string {
  const fileId = randomUUIDv7()

  const uploadUrl = s3.presign(fileId, {
    method: 'PUT',
    expiresIn: 3600,
    type: file.type,
    acl: 'public-read',
  })

  return uploadUrl
}
import { createServerFn } from '@tanstack/react-start'
import { z } from 'zod'
import { getPresignedUploadURL } from '@/lib/s3'

const getUploadURL = createServerFn({ method: 'POST' })
  .validator(uploadCretationSchema)
  .handler(({ data }) => {
    console.log('handler', data.title)
    return getPresignedUploadURL(data.image)
  })

function RouteComponent() {

  const getURL = useServerFn(getUploadURL)

  const form = useForm({
    onSubmit: async ({ value }: { value: UploadCreationSchema }) => {
      const uploadURL = await getURL({ data: value })

      await fetch(uploadURL, {
        method: 'PUT',
        body: value.image,
        headers: {
          'Content-Type': 'image/jpeg',
        },
      })
    },
//...
import { createServerFn } from '@tanstack/react-start'
import { z } from 'zod'
import { getPresignedUploadURL } from '@/lib/s3'

const getUploadURL = createServerFn({ method: 'POST' })
  .validator(uploadCretationSchema)
  .handler(({ data }) => {
    console.log('handler', data.title)
    return getPresignedUploadURL(data.image)
  })

function RouteComponent() {

  const getURL = useServerFn(getUploadURL)

  const form = useForm({
    onSubmit: async ({ value }: { value: UploadCreationSchema }) => {
      const uploadURL = await getURL({ data: value })

      await fetch(uploadURL, {
        method: 'PUT',
        body: value.image,
        headers: {
          'Content-Type': 'image/jpeg',
        },
      })
    },
//...
But server's log showing this error, when I try to submit my form: 
Error when evaluating SSR module /Users/......../src/routes/mypage/creations/submit.tsx?tsr-split=component&tsr-directive-use-server=: Cannot find module 'bun' imported from '/Users/........../src/lib/s3.ts'
Error when evaluating SSR module /Users/......../src/routes/mypage/creations/submit.tsx?tsr-split=component&tsr-directive-use-server=: Cannot find module 'bun' imported from '/Users/........../src/lib/s3.ts'
(I used ...... to hide the folder names) Does that mean that there is no distinction between server and client environments?.. I'm little confused.
1 Reply
continuing-cyan
continuing-cyan•5mo ago
looks like this https://github.com/oven-sh/bun/issues/4704#issuecomment-1742250897
GitHub
Sveltekit +page.server.js unable to find bun:sqlite · Issue #4704 ...
What version of Bun is running? 1.0.0+822a00c4d508b54f650933a73ca5f4a3af9a7983 What platform is your computer? Linux 6.3.11-200.fc38.x86_64 x86_64 unknown What steps can reproduce the bug? install ...

Did you find this page helpful?