TanStack
registerGlobalMiddleware has no effect.
Which project does this relate to?
Start
Describe the bug
middlewares added globally with registerGlobalMiddleware never run.
Your Example Website or App
https://stackblitz.com/github/tanstack/router/tree/main/examples/react/start-basic?file=src%2Fglobal-middleware.ts
Steps to Reproduce the Bug or Issue
- Go to stackblitz example.
- Test with anything that invokes a server function.
- See that the logger middleware never runs, and nothing is logged to the console.
Expected behavior
The logger middleware is expected to output to the console, but nothing is being showed.
Screenshots or Videos
No response
Platform
- OS: Windows, and Linux
- Browser: Edge
- Version: 134.0
Additional context
No response
What is weird, on my mac it works as intended, but on windows it does nothing
What is weird, on my mac it works as intended, but on windows it does nothing
It worked once in a stackblitz container, and then I tried my codebase, and nothing. Even inside a docker container.
The same template and problem. I even added throw new Error("test") to the file and it didn't cause the program to crash. It seems that the file is not executed at all.
On server with linux also everything works as intended, so I assume it could be only windows node problem
just thought how windows and Linux/Mac differ. and one difference is whether the file system is case sensitive or not.
just thought how windows and Linux/Mac differ. and one difference is whether the file system is case sensitive or not.
If it's Windows related, it's probably an issue with the backslashes
It's at least partly related to slashes.
https://github.com/TanStack/router/blob/8edeeaa6a13aab67211299e8cf38cf5f3533d123/packages/react-start-plugin/src/index.ts#L56-L62
It fails on this check because they use different slashes.
id.includes(entry)
id ~/src/client.tsx
entry ~\src\client.tsx
Windows 11, Node 22.13.0
Do not forget : global middlewares are ONLY used with serverFunction. Global middlewares are not called globally in your application when you are navigating.
Steps to Reproduce the Bug or Issue
1. Go to [stackblitz example](https://stackblitz.com/github/tanstack/router/tree/main/examples/react/start-basic?file=src%2Fglobal-middleware.ts). 2. Test with anything that invokes a server function. 3. See that the logger middleware never runs, and nothing is logged to the console.
Do not forget : global middlewares are ONLY used with serverFunction. Global middlewares are not called globally in your application when you are navigating.
That's exactly whats written on the issue.
Seeing a similar issue on my mac
Resolved - I had not put the file in the right place https://github.com/TanStack/router/pull/3501
For me it seems not to be working too. Mac OS sequoia. It can be a regression on the new version.
Just wanted to mention that I'm running into this as well in my TanStack Start project.
I wanted to use global middleware to inject the authorization header like described here so that I can check the authorization header in server middleware that runs before a server function inside beforeLoad
// from https://tanstack.com/start/latest/docs/framework/react/middleware#modifying-the-client-request
import { getToken } from 'my-auth-library'
const authMiddleware = createMiddleware({ type: 'function' }).client(
async ({ next }) => {
return next({
headers: {
Authorization: `Bearer ${getToken()}`,
},
})
},
)
But I couldn't get it to work properly using the global middleware. I also tried adding it before my server middleware but that didn't work when refreshing the current page.
// does not work when refreshing the page
export const getUserId = createServerFn({ method: 'GET' })
.middleware([authMiddleware, serverAuthMiddleware])
.handler(async ({ context }) => {
return context?.user?.id
})
It might has being removed at some point but global-middleware.ts auto loading has being removed. It's still referenced in the docs but just placing that file would do nothing on the the whole flow.
Make sure that you are loading that file(or any other middleware file) explicitly so it runs.
@schiller-manuel posted on Discord: "yes this is a known issue, we still need to implement global middlware registration now that devinxi has happened".
Any updates on this? It should be warned in docs or remove it entirely. Lost an hour of my life.
I just imported the global middleware in the server.tsx file and it seems to work quite well. This is with the latest version without vinxi.
Sure. On the latest tanstack start repo (the one without vinxi) You should have a server,ts file at the same level as your routeTree.gen.ts file. This is mine. You can see I just import my global-middleware file here.
server.ts
import { createStartHandler, defaultStreamHandler } from "@tanstack/react-start/server";
import { createRouter } from "./router";
import "@/global-middleware";
export default createStartHandler({
createRouter,
})(defaultStreamHandler);
global-middleware.ts
import { registerGlobalMiddleware } from "@tanstack/react-start";
import { authMiddleware } from "./middleware/auth-middleware";
import { emitErrors } from "./middleware/emit-errors";
console.log("Registering global middleware");
registerGlobalMiddleware({
middleware: [emitErrors, authMiddleware],
});
emit-errors.ts
import { createMiddleware } from "@tanstack/react-start";
export const emitErrors = createMiddleware({ type: "function" })
.client(async ({ next }) => {
try {
const result = await next();
return result;
} catch (error: any) {
if (typeof error?.message === "string") {
const actualError = JSON.parse(error.message);
window.dispatchEvent(new CustomEvent("server-error", { detail: actualError }));
}
throw error;
}
})
.server(async ({ next }) => {
try {
const result = await next();
return result;
} catch (error: any) {
console.error(error);
throw error;
}
});
Please update the docs. Trying to run npx create-start-app and setting global middleware according to the latest version of the docs does not work anymore.
Updating the docs should be a prerequisite to publishing any packages, especially starter repos as this is the point highest risk of churn from your project. It shows you are not serious and people will go back to next or RR.
global middleware handling changed completely in RC. please see the docs https://tanstack.com/start/latest/docs/framework/react/middleware#global-middleware
global middleware handling changed completely in RC. please see the docs https://tanstack.com/start/latest/docs/framework/react/middleware#global-middleware
Your link 404s and when I run @tanstack/start@latest with Sentry integration, it references registerGlobalMiddleware from the @tanstack/react-start which does not exist.
@EverybodyKurts sorry about the link, please see https://tanstack.com/start/latest/docs/framework/react/guide/middleware#global-middleware
sentry integration is still being updated for RC so this won't work yet