stormy-gold

Deploying to Cloudflare issues

Hi everyone! I recently started looking into tanstack start and wanted to deploy my first project to cloudflare workers. But I'm having some issues with building the project. Here's my vite config:

import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import tailwindcss from "@tailwindcss/vite";
import viteReact from "@vitejs/plugin-react";
import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
  plugins: [
    tsconfigPaths(),
    cloudflare({ viteEnvironment: { name: "ssr" } }),
    tailwindcss(),
    tanstackStart(),
    viteReact(),
  ],
});

When i run bun run build i get error from screenshot. It says that i can't use env like that: import { env } from "cloudflare:workers";. What should i do ?

13 Replies

xenial-black•5w ago

could be a bun issue? try building with pnpm also, maybe that import is happening on client side, which is not possible so make sure that import is only referenced in e.g. server functions

rival-black•5w ago

try:

build: {
    rollupOptions: {
      external: ['cloudflare:workers'],
    },
  },

build: {
    rollupOptions: {
      external: ['cloudflare:workers'],
    },
  },

had the same issue witf cf when i initially started on node

stormy-goldOP•5w ago

this helped me to build the project and deploy. However, when i go to a website and check devtools, the env.VITE_SERVER_URL is resolved as string "cloudflare:workers". Do you know why by any chance? I made sure this variable is in cloudflare dashboard and in wrangle config

stormy-goldOP•5w ago

rival-black•5w ago

hmm. how are you accessing env? process.env or import.meta? if through the import env from cloudflare, should be okay during server rendering

stormy-goldOP•5w ago

Like this. However this doesn't seem to be working properly

rival-black•5w ago

is that being run client side? or server side? sorry not familiar with better-auth env wouldn't work on client. import.meta should tho or process.env (haven't tried that) if its on server side, then i'm not really sure could be a bun issue as @Manuel Schiller mentioned

stormy-goldOP•5w ago

i think it runs both on client and server. Okay i tried using import.mena.VITE_SERVER_URL and now the url on website is http://localhost:3000 however there's no mentioning of that in the code except .env, but .env is in gitignore. Not sure what to do😔

rival-black•5w ago

add your .env to cloudflare using secrets npx wrangler secret bulk .env you'd probably need to make that function isomorphic i think, just to be sure what env to access for client or server

stormy-goldOP•5w ago

Thank you so much @mubrik !

rival-black•5w ago

all good if it works lol

stormy-goldOP•5w ago

it works. I changed .env files and put production URLs, then did bunx wrangler secret bulk .env for both client and server (honojs), deployed, and now it works.

rival-black•5w ago

nice!!

Gaming

Programming

Deploying to Cloudflare issues

Did you find this page helpful?