fascinating-indigo

process is not defined error when calling server function

Hello, I am trying to call a dummy server function inside my app context like this:

import testFn from "@/test";

...
const AppContext = createContext<AppContextType | null>(null);

export const AppContextProvider = ({ children }: { children: ReactNode }) => {
  const [userMode, setUserMode] = useState<UserMode | undefined>(undefined);
  const [isMounted, setIsMounted] = useState(false);
  useEffect(() => {
    if (typeof window !== "undefined") {
      const appContextStored = localStorage.getItem(AppContextStorage.STORAGE_KEY);
      if (appContextStored) {
        try {
          const parsed = JSON.parse(appContextStored) as AppContextStorage;
          setUserMode(parsed.userMode);
        } catch (error) {
          testFn();  // CALL SERVER FN
          setUserMode(UserMode.User);
...

import testFn from "@/test";

...
const AppContext = createContext<AppContextType | null>(null);

export const AppContextProvider = ({ children }: { children: ReactNode }) => {
  const [userMode, setUserMode] = useState<UserMode | undefined>(undefined);
  const [isMounted, setIsMounted] = useState(false);
  useEffect(() => {
    if (typeof window !== "undefined") {
      const appContextStored = localStorage.getItem(AppContextStorage.STORAGE_KEY);
      if (appContextStored) {
        try {
          const parsed = JSON.parse(appContextStored) as AppContextStorage;
          setUserMode(parsed.userMode);
        } catch (error) {
          testFn();  // CALL SERVER FN
          setUserMode(UserMode.User);
...

test server fn:

import { createServerFn } from "@tanstack/react-start";

const testFn = createServerFn({
  method: "POST",
}).handler(() => {
  console.log("Kepa");
});

export default testFn;

import { createServerFn } from "@tanstack/react-start";

const testFn = createServerFn({
  method: "POST",
}).handler(() => {
  console.log("Kepa");
});

export default testFn;

Error:

index.js?v=e1735df9:6 Uncaught (in promise) ReferenceError: process is not defined
    at createClientRpc (index.js?v=e1735df9:6:41)
    at test.tsx:1:55

index.js?v=e1735df9:6 Uncaught (in promise) ReferenceError: process is not defined
    at createClientRpc (index.js?v=e1735df9:6:41)
    at test.tsx:1:55

createClientRpc uses process:

const createClientRpc = (functionId, serverBase) => {
    const sanitizedAppBase = sanitizeBase(process.env.TSS_APP_BASE || "/");

const createClientRpc = (functionId, serverBase) => {
    const sanitizedAppBase = sanitizeBase(process.env.TSS_APP_BASE || "/");

I guess that server code is leaking into my client code 😭 but I dont know the cause

19 Replies

rival-black•3mo ago

which version of start are you using?

fascinating-indigoOP•3mo ago

@tanstack/react-start@1.131.49 I have upgraded to 1.132, but now createServerRootRoute no longer exists ☹️ and I don't find any references about it in the docs or in github, what the ...?

ratty-blush•3mo ago

https://tanstack.com/start/latest/docs/framework/react/server-routes

Server Routes | TanStack Start React Docs

Server routes are a powerful feature of TanStack Start that allow you to create server-side endpoints in your application and are useful for handling raw HTTP requests, form submissions, user authenti...

ratty-blush•3mo ago

There's brand new breaking changes with the latest release.

fascinating-indigoOP•3mo ago

Oh dang... thanks for the info, but I am still unable to find anything 😭😭 Why searching for references of createServerRootRoute in github/tanstack docs does not show anything?

ratty-blush•3mo ago

Yeah at this moment, better to wait for everything to roll out...

fascinating-indigoOP•3mo ago

watching history of the web in real time, what a time to be alive

ratty-blush•3mo ago

oh yes baby That's exactly the docs i was missing lol

fascinating-indigoOP•3mo ago

Now I can not overcome this issue 😭

TypeError: (intermediate value).routerEntry.getRouter is not a function
    at getRouter (C:\Repos\ResanoRP\node_modules\@tanstack\start-server-core\src\createStartHandler.ts:145:55)
    ... 2 lines matching cause stack trace ...
    at async eval (C:\Repos\ResanoRP\node_modules\@tanstack\start-server-core\src\createStartHandler.ts:263:32) {
  cause: TypeError: (intermediate value).routerEntry.getRouter is not a function
      at getRouter (C:\Repos\ResanoRP\node_modules\@tanstack\start-server-core\src\createStartHandler.ts:145:55)
      at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
      at async handleServerRoutes (C:\Repos\ResanoRP\node_modules\@tanstack\start-server-core\src\createStartHandler.ts:375:18)
      at async eval (C:\Repos\ResanoRP\node_modules\@tanstack\start-server-core\src\createStartHandler.ts:263:32),
  status: 500,
  statusText: undefined,
  headers: undefined,
  data: undefined,
  body: undefined,
  unhandled: true
}

TypeError: (intermediate value).routerEntry.getRouter is not a function
    at getRouter (C:\Repos\ResanoRP\node_modules\@tanstack\start-server-core\src\createStartHandler.ts:145:55)
    ... 2 lines matching cause stack trace ...
    at async eval (C:\Repos\ResanoRP\node_modules\@tanstack\start-server-core\src\createStartHandler.ts:263:32) {
  cause: TypeError: (intermediate value).routerEntry.getRouter is not a function
      at getRouter (C:\Repos\ResanoRP\node_modules\@tanstack\start-server-core\src\createStartHandler.ts:145:55)
      at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
      at async handleServerRoutes (C:\Repos\ResanoRP\node_modules\@tanstack\start-server-core\src\createStartHandler.ts:375:18)
      at async eval (C:\Repos\ResanoRP\node_modules\@tanstack\start-server-core\src\createStartHandler.ts:263:32),
  status: 500,
  statusText: undefined,
  headers: undefined,
  data: undefined,
  body: undefined,
  unhandled: true
}

rival-black•3mo ago

rival-black•3mo ago

https://github.com/TanStack/router/discussions/2863#discussioncomment-14052148

GitHub

Start BETA - Tracking · TanStack router · Discussion #2863

Tracking any important changes for TanStack Start during the BETA period. If you are coming from the ALPHA of TanStack Start, you can see all the breaking changes that were made here - #2403

fascinating-indigoOP•3mo ago

Yeeeah, just found this: https://github.com/TanStack/router/blob/0b33aa5cb40a585f19a3876d2ef5e7ae06338f2e/examples/react/start-basic/src/router.tsx Thanks Manuel! ❤️

GitHub

router/examples/react/start-basic/src/router.tsx at 0b33aa5cb40a585...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

absent-sapphire•2mo ago

@Jaime02 @Manuel Schiller If you guys could provide an update on this, recently upgraded from 1.2.23 to 1.2.32 and now my serverFns are showing up on the client ("createClientRpc.js?v=5d579772:9 Uncaught (in promise) ReferenceError: process is not defined") even though all of the docs I have read says that tanstack start splits them automatically

export const setTheme = createServerFn({ method: "POST" })
  .inputValidator((data: unknown) => {
    if (typeof data != "string" || (data != "dark" && data != "light")) {
      throw new Error("Invalid theme provided");
    }
    return data as Theme;
  })
  .handler(async ({ data }) => {
    setCookie(storageKey, data);
  });

export const setTheme = createServerFn({ method: "POST" })
  .inputValidator((data: unknown) => {
    if (typeof data != "string" || (data != "dark" && data != "light")) {
      throw new Error("Invalid theme provided");
    }
    return data as Theme;
  })
  .handler(async ({ data }) => {
    setCookie(storageKey, data);
  });

No other errors

harsh-harlequin•2mo ago

Facing the same exact issue @̾̒̊҉̱̹͙ ͧͬͤ did you manage to solve this? Only happens in dev mode, when building it works fine.

harsh-harlequin•2mo ago

createClientRpc.js?v=da92de13:9 Uncaught (in promise) ReferenceError: process is not defined
    at createClientRpc (createClientRpc.js?v=da92de13:9:43)
    at auth.ts:1:55

createClientRpc.js?v=da92de13:9 Uncaught (in promise) ReferenceError: process is not defined
    at createClientRpc (createClientRpc.js?v=da92de13:9:43)
    at auth.ts:1:55

package.json:

    "@tanstack/react-router": "^1.132.0",
    "@tanstack/react-router-devtools": "^1.132.0",
    "@tanstack/react-start": "^1.132.0",

    "@tanstack/react-router": "^1.132.0",
    "@tanstack/react-router-devtools": "^1.132.0",
    "@tanstack/react-start": "^1.132.0",

harsh-harlequin•2mo ago

noticed it only happens when hmr: false in vite.config.ts, strange...

rival-black•2mo ago

can you please provide a complete example project ? same for you @Ariel

absent-sapphire•2mo ago

it went away for me sometime when i was reviewing the migration process on github

absent-sapphire•2mo ago

for me it was an issue in both, i recommend you look at this really closely https://github.com/TanStack/router/discussions/2863#discussioncomment-14052148

GitHub

Start BETA - Tracking · TanStack router · Discussion #2863

Tracking any important changes for TanStack Start during the BETA period. If you are coming from the ALPHA of TanStack Start, you can see all the breaking changes that were made here - #2403

Gaming

Programming

process is not defined error when calling server function

Did you find this page helpful?