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:
But server's log showing this error, when I try to submit my form:
(I used
Does that mean that there is no distinction between server and client environments?.. I'm little confused.
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.
