uploadthing in a server side environment
I have followed the example provided in the github (backend-adapters) and adapted it to my current environment. However when trying to load the webpage I see this error: Uncaught SyntaxError: Cannot use 'import.meta' outside a module (1st picture)
This is a separate github repo to showcase the error (https://github.com/Gui153/UploadthingServerside).
From researching it online, it looks like the script is expecting a vite env variable, but in my case I want to use process.env instead.
stack: Bun, ElysiaJS, React, and TS.
Solution:Jump to solution
After all the help that I got from everyone, I found the UTApi (server SDK). Which was perfect for my situation. It does require a little bit of work and reading, but it works perfectly for my situation
4 Replies
Update: markr tried to solve this issue but was not able to get it to run.
This is what he said:
markr —
Haven't seen this before, taking a look at your code now
That code is coming from std-env, which we use for compatibility across different runtimes,
Vilatoro —
Is there a way for me to circumvent this issue?
markr —
Can you add "type": "module" to your package json?
Seems to run with that
(it did not fix the issue)
markr —
Let me play around with it some more
markr —
Haven't been able to figure out a workaround, but the issue is that you are sending serverside code to the client. It seems that Bun.build() is not smart enough to pull that stuff out for you.
Vilatoro —
Could you tell me which parts of the uploadthing package are client side and which are server side, so that I can try to find a workaround as well?
markr —
Mu guess was that it was coming from this import: https://github.com/Gui153/UploadthingServerside/blob/f4440ffe782ca06ebcc755c223819ae69d5892e5/src/components/uploadthing/components.ts#L8
from createUploadthing
but removing that did not seem to have an effect.
Vilatoro -
Could it be an issue with hydrateRoot in the index folder?
markr-
I don't think so.
markr —
Here's a workaround:
const build = await Bun.build({
entrypoints: ["./src/indexes/UploadButtonTestIndex.tsx"],
outdir: "./build",
minify: true,
});
import path from "path";
for (const res of build.outputs) {
// Can be consumed as blobs
const txt = await res.text()
Bun.write(
"./build/" + path.basename(res.path),
txt.replaceAll("import.meta.env||", "")
);
}
(replace your current Bun.build() call with that)
This is not a good solution, but it does appear to work
Vilatoro —
That fixes the compilation issue, but now it is not passing the process.env secret
If you replace the process.env.UPLOADTHING_SECRET to your actual API key it works.
Vilatoro —
However I do not want to leave the uploadthing secret exposed on the webpage
markr —
You should not need the secret on the frontend at all
The real fix here is getting proper bundle splitting
Solution
After all the help that I got from everyone, I found the UTApi (server SDK). Which was perfect for my situation. It does require a little bit of work and reading, but it works perfectly for my situation