binding cloudflare undefined

[akawahuynh]

Which project does this relate to?

Start

Describe the bug

// src/middleware.tsx
import { defineMiddleware } from "@tanstack/react-start/server";

export default defineMiddleware({
  onRequest: async (event) => {
    if (import.meta.env.DEV) {
      const { getPlatformProxy } = await import("wrangler");
      const proxy = await getPlatformProxy();
      event.context.cloudflare = proxy;
    }
  },
});

// app.config.ts
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "@tanstack/react-start/config";
import tsConfigPaths from "vite-tsconfig-paths";
import { cloudflare } from 'unenv'
import nitroCloudflareBindings from "nitro-cloudflare-dev";

export default defineConfig({
  vite: {
    plugins: [
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
      tailwindcss(),
    ],
  },
  // https://react.dev/learn/react-compiler
  react: {
    babel: {
      plugins: [
        [
          "babel-plugin-react-compiler",
          {
            target: "19",
          },
        ],
      ],
    },
  },


  tsr: {
    // https://github.com/TanStack/router/discussions/2863#discussioncomment-12458714
    appDirectory: "./src",

  },
  routers: {
    server: {
      middleware: "./src/middleware.tsx",
      base: "/",

    }
  },
  server: {
    // https://tanstack.com/start/latest/docs/framework/react/hosting#deployment
    // preset: "netlify",\

    preset: 'cloudflare-pages',
    unenv: cloudflare,
    modules: [nitroCloudflareBindings],


  },
})

Your Example Website or App

https://github.com/TanStack/router/tree/main/examples/react/start-basic

Steps to Reproduce the Bug or Issue

1. add middleware.tsx
   2 hosting cloudflare pages
   3 config nitro-cloudflare-dev
   4 start dev server

Expected behavior

how to get all binding cloudflare (wrangler)

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Chrome
• Version: 135.0.7049.95

Additional context

No response

[CogitoBurrito]

export const cloudflareMiddleware = createMiddleware().server<{
  cloudflare: PlatformProxy<Env>;
}>(async ({ next }) => {
  if (import.meta.env.DEV) {
    const { getPlatformProxy } = await import("wrangler");
    const proxy = await getPlatformProxy<Env>();
    return next({
      context: {
        cloudflare: proxy,
      },
    });
  }
  return next();
});

[akawahuynh]

very helpful. thanks

[akawahuynh]

thank you very much for your reply, but i just tested it, with local dev it works very well but build and dev with wrangler or deploy it gives error

Cannot read properties of undefined (reading 'env')

here is the code i used:

import { createFileRoute, useRouter } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";
import { cloudflareMiddleware } from "../server/cfmd";

const updateCount = createServerFn({ method: "POST" })
  .validator((d: number) => d)
  .middleware([cloudflareMiddleware])
  .handler(async ({ data, context }) => {
    const count = parseInt(
      (await context.cloudflare.env.TESTING.get("counting")) as string
    );
    await context.cloudflare.env.TESTING.put(
      "counting",
      (count + data).toString()
    );
    console.log(count);
  });
const getCount = createServerFn({
  method: "GET",
})
  .middleware([cloudflareMiddleware])
  .handler(async ({ context }) => {
    return parseInt(
      (await context.cloudflare.env.TESTING.get("counting")) as string
    );
  });

export const Route = createFileRoute("/")({
  component: Home,
  loader: async () => await getCount(),
});

function Home() {
  const router = useRouter();
  const state = Route.useLoaderData();

  return (
    <button
      type="button"
      onClick={() => {
        updateCount({ data: 1 }).then(() => {
          router.invalidate();
        });
      }}
    >
      Add 1 to {state}?
    </button>
  );
}

[khashvin]

// src/lib/cf-binding.ts
export async function getBindings() {
  if (import.meta.env.DEV) {
    const wrangler = await import('wrangler');
    const { env } = await wrangler.getPlatformProxy<Env>();
    return env;
  }

  return process.env as unknown as Env;
}

You can just use this in your api routes or server function

Example

import { getBindings } from '@/lib/cf-bindings';

const updateCount = createServerFn({ method: "POST" })
  .validator((d: number) => d)
  .handler(async ({ data, context }) => {
    const env = await getBindings();
    const count = parseInt(env.TESTING.get("counting")) as string);
    await env.TESTING.put("counting", (count + data).toString());
    console.log(count);
  });

It should work with middlewares too.

[vovsemenv]

Is this workaround still working after moving start off the vinxi??

[schiller-manuel]

start now supports the cloudflare vite plugin

https://tanstack.com/start/latest/docs/framework/react/hosting#cloudflare-workers--official-partner