compatible-crimson

server fn error in fresh trellaux example

I decided to start learning about tanstack start by running the trelleaux example but I hit an exceptioin when hovering on the "first board" it creates:

ServerFn Request: app_db_board_ts--getBoard_createServerFn_handler

Server Fn Error!

Error: [
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "undefined",
    "path": [],
    "message": "Required"
  }
]
    at execValidator (/project/workspace/node_modules/@tanstack/react-start-client/dist/esm/createServerFn.js:242:30)
    at next (/project/workspace/node_modules/@tanstack/react-start-client/dist/esm/createServerFn.js:261:24)
    at executeMiddleware (/project/workspace/node_modules/@tanstack/react-start-client/dist/esm/createServerFn.js:279:10)
    at run (/project/workspace/node_modules/@tanstack/react-start-client/dist/esm/createServerFn.js:138:29)
    at AsyncFunction.__executeServer (/project/workspace/node_modules/@tanstack/react-start-client/dist/esm/createServerFn.js:171:18)
    at eval (/project/workspace/app/db/board.ts?tsr-directive-use-server=:22:19)
    at eval (/project/workspace/node_modules/@tanstack/react-start-server-functions-handler/dist/esm/index.js:84:24)
    at eval (/project/workspace/node_modules/@tanstack/react-start-server-functions-handler/dist/esm/index.js:92:9)
    at handleServerRequest (/project/workspace/node_modules/@tanstack/react-start-server-functions-handler/dist/esm/index.js:130:5)
    at async handleServerAction (/project/workspace/node_modules/@tanstack/react-start-server-functions-handler/dist/esm/index.js:13:20)
    at async _callHandler (file:///project/workspace/node_modules/h3/dist/index.mjs:1837:16)
    at async file:///project/workspace/node_modules/h3/dist/index.mjs:1978:19
    at async Object.callAsync (file:///project/workspace/node_modules/unctx/dist/index.mjs:72:16)
    at async Server.toNodeHandle (file:///project/workspace/node_modules/h3/dist/index.mjs:2270:7)

ServerFn Request: app_db_board_ts--getBoard_createServerFn_handler

Server Fn Error!

Error: [
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "undefined",
    "path": [],
    "message": "Required"
  }
]
    at execValidator (/project/workspace/node_modules/@tanstack/react-start-client/dist/esm/createServerFn.js:242:30)
    at next (/project/workspace/node_modules/@tanstack/react-start-client/dist/esm/createServerFn.js:261:24)
    at executeMiddleware (/project/workspace/node_modules/@tanstack/react-start-client/dist/esm/createServerFn.js:279:10)
    at run (/project/workspace/node_modules/@tanstack/react-start-client/dist/esm/createServerFn.js:138:29)
    at AsyncFunction.__executeServer (/project/workspace/node_modules/@tanstack/react-start-client/dist/esm/createServerFn.js:171:18)
    at eval (/project/workspace/app/db/board.ts?tsr-directive-use-server=:22:19)
    at eval (/project/workspace/node_modules/@tanstack/react-start-server-functions-handler/dist/esm/index.js:84:24)
    at eval (/project/workspace/node_modules/@tanstack/react-start-server-functions-handler/dist/esm/index.js:92:9)
    at handleServerRequest (/project/workspace/node_modules/@tanstack/react-start-server-functions-handler/dist/esm/index.js:130:5)
    at async handleServerAction (/project/workspace/node_modules/@tanstack/react-start-server-functions-handler/dist/esm/index.js:13:20)
    at async _callHandler (file:///project/workspace/node_modules/h3/dist/index.mjs:1837:16)
    at async file:///project/workspace/node_modules/h3/dist/index.mjs:1978:19
    at async Object.callAsync (file:///project/workspace/node_modules/unctx/dist/index.mjs:72:16)
    at async Server.toNodeHandle (file:///project/workspace/node_modules/h3/dist/index.mjs:2270:7)

2 Replies

compatible-crimsonOP•7mo ago

I've recreated the issue on codesandbox here: https://codesandbox.io/p/devbox/5gd45g The only setup was as recommended in the quick start guide:

npx degit https://github.com/tanstack/router/examples/react/start-trellaux start-trellaux
cd start-trellaux
npm install
npm run dev

npx degit https://github.com/tanstack/router/examples/react/start-trellaux start-trellaux
cd start-trellaux
npm install
npm run dev

Any suggestion on what might be wrong? I put some debug logging in and I discovered: * The getBoard() call in queries.ts on the client has a proper id=1 * The server-side validator sees the id as undefined. I'm interested in learning to debug server function calls in a case like this.

absent-sapphire•6mo ago

Looks like the example was never updated when we moved to having the server function input be nested under data. This'll be fixed shortly. This has been fixed and merged into main.

Gaming

Programming

server fn error in fresh trellaux example

Did you find this page helpful?