TanStack•8mo ago•

47 replies

full-green

Environment Variables Issue with TanStack Start v1.129.7

Hi! I deployed a new TanStack Start app (

v1.129.7

v1.129.7

) and noticed it no longer uses Vinxi.

I'm having problems accessing environment variables in server-side code during

pnpm run dev

pnpm run dev

. Can anyone point me to resources for solving or diagnosing this issue?

I've already checked the Vite env guide, but nothing seems amiss.

Sample Code

export const getRecords = createServerFn({ 
  method: "GET", 
  response: "data", 
  type: "dynamic" 
})
  .validator(
    z.object({
      period: z.enum(["hour", "day", "week", "month", "year", "all_time"]),
    }),
  )
  .handler(async ({ data }) => {
    console.log("SERVER", import.meta.env.VITE_APP_URL);
    console.log("SERVER", import.meta.env.POCKETBASE_URL);
    console.log("SERVER", process.env.POCKETBASE_URL);
    console.log("SERVER", import.meta.env.MODE);
    // ...
  });

export const getRecords = createServerFn({ 
  method: "GET", 
  response: "data", 
  type: "dynamic" 
})
  .validator(
    z.object({
      period: z.enum(["hour", "day", "week", "month", "year", "all_time"]),
    }),
  )
  .handler(async ({ data }) => {
    console.log("SERVER", import.meta.env.VITE_APP_URL);
    console.log("SERVER", import.meta.env.POCKETBASE_URL);
    console.log("SERVER", process.env.POCKETBASE_URL);
    console.log("SERVER", import.meta.env.MODE);
    // ...
  });

Issue

During

pnpm run dev

pnpm run dev

:
- Variables are defined when using

process.env

process.env

- Variables are undefined when using

import.meta.env

import.meta.env

My theory:

createServerFn

createServerFn

might be treated as client-side code since the test env

VITE_APP_URL

VITE_APP_URL

is defined. Is there a way to check if this is the case?

Note: Same behavior occurs with

pnpm run build && pnpm run start

pnpm run build && pnpm run start

Configuration

vite.config.ts:

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

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tanstackStart({ customViteReactPlugin: true }),
    viteReact(),
  ],
  envPrefix: "VITE_",
});

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

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tanstackStart({ customViteReactPlugin: true }),
    viteReact(),
  ],
  envPrefix: "VITE_",
});

package.json (relevant parts):

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build && tsc --noEmit",
    "start": "node .output/server/index.mjs"
  },
  "dependencies": {
    "@tanstack/react-start": "^1.129.7",
    // ... other deps
  }
}

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build && tsc --noEmit",
    "start": "node .output/server/index.mjs"
  },
  "dependencies": {
    "@tanstack/react-start": "^1.129.7",
    // ... other deps
  }
}

.env sample

POCKETBASE_URL=http://localhost:8090
[email protected]
POCKETBASE_PASSWORD=password123
VITE_APP_URL=http://example.com

POCKETBASE_URL=http://localhost:8090
[email protected]
POCKETBASE_PASSWORD=password123
VITE_APP_URL=http://example.com

Any insights would be greatly appreciated!

TanStack•8mo ago•

47 replies

full-green

Environment Variables Issue with TanStack Start v1.129.7

Hi! I deployed a new TanStack Start app (

v1.129.7

v1.129.7

) and noticed it no longer uses Vinxi.

I'm having problems accessing environment variables in server-side code during

pnpm run dev

pnpm run dev

. Can anyone point me to resources for solving or diagnosing this issue?

I've already checked the Vite env guide, but nothing seems amiss.

Sample Code

export const getRecords = createServerFn({ 
  method: "GET", 
  response: "data", 
  type: "dynamic" 
})
  .validator(
    z.object({
      period: z.enum(["hour", "day", "week", "month", "year", "all_time"]),
    }),
  )
  .handler(async ({ data }) => {
    console.log("SERVER", import.meta.env.VITE_APP_URL);
    console.log("SERVER", import.meta.env.POCKETBASE_URL);
    console.log("SERVER", process.env.POCKETBASE_URL);
    console.log("SERVER", import.meta.env.MODE);
    // ...
  });

export const getRecords = createServerFn({ 
  method: "GET", 
  response: "data", 
  type: "dynamic" 
})
  .validator(
    z.object({
      period: z.enum(["hour", "day", "week", "month", "year", "all_time"]),
    }),
  )
  .handler(async ({ data }) => {
    console.log("SERVER", import.meta.env.VITE_APP_URL);
    console.log("SERVER", import.meta.env.POCKETBASE_URL);
    console.log("SERVER", process.env.POCKETBASE_URL);
    console.log("SERVER", import.meta.env.MODE);
    // ...
  });

Issue

During

pnpm run dev

pnpm run dev

:
- Variables are defined when using

process.env

process.env

- Variables are undefined when using

import.meta.env

import.meta.env

My theory:

createServerFn

createServerFn

might be treated as client-side code since the test env

VITE_APP_URL

VITE_APP_URL

is defined. Is there a way to check if this is the case?

Note: Same behavior occurs with

pnpm run build && pnpm run start

pnpm run build && pnpm run start

Configuration

vite.config.ts:

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

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tanstackStart({ customViteReactPlugin: true }),
    viteReact(),
  ],
  envPrefix: "VITE_",
});

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

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tanstackStart({ customViteReactPlugin: true }),
    viteReact(),
  ],
  envPrefix: "VITE_",
});

package.json (relevant parts):

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build && tsc --noEmit",
    "start": "node .output/server/index.mjs"
  },
  "dependencies": {
    "@tanstack/react-start": "^1.129.7",
    // ... other deps
  }
}

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build && tsc --noEmit",
    "start": "node .output/server/index.mjs"
  },
  "dependencies": {
    "@tanstack/react-start": "^1.129.7",
    // ... other deps
  }
}

.env sample

POCKETBASE_URL=http://localhost:8090
[email protected]
POCKETBASE_PASSWORD=password123
VITE_APP_URL=http://example.com

POCKETBASE_URL=http://localhost:8090
[email protected]
POCKETBASE_PASSWORD=password123
VITE_APP_URL=http://example.com

Any insights would be greatly appreciated!

Environment Variables Issue with TanStack Start v1.129.7

Sample Code

Issue

Configuration

Environment Variables Issue with TanStack Start v1.129.7

Sample Code

Issue

Configuration

Similar Threads

Similar Threads

Similar Threads