beforeLoad never called when using with Webpack's FederationPlugin
I'm still trying to figure out issue, but it's haunting me for a while. I have a special routing library built on top of the Tanstack Router, and when I use the library directly it works pretty well – I have specific contexts defined in the beforeLoad, which are becoming part of the Route Context.
However, when I start it in an environment with Webpack's FederationPlugin, the context is never collected as the beforeLoad is never ever called. Other issues aside, I cannot figure out the conditions where that could happen.
I see that, hypothetically, there could be some silenced exception here: https://github.com/TanStack/router/blob/9d98af6659004e226970e6e49f7a756353e8f055/packages/react-router/src/router.ts#L1365, but I've tried to catch that – no luck.
GitHub
router/packages/react-router/src/router.ts at 9d98af6659004e226970e...
🤖 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
11 Replies
helpful-purpleOP•2y ago
I am not certain but how likely are the chances that async generators in webpack are bugged?
helpful-purpleOP•2y ago
I was so desperate I started to look at the original non mapped code and it looks like it tries to get a length of an iterator instead of array itself, thinks that matches are empty in
loadMatches and it results in beforeLoad never being called as the loop at https://github.com/TanStack/router/blob/9d98af6659004e226970e6e49f7a756353e8f055/packages/react-router/src/router.ts#L1011 is never triggered... even though by the original code, it absolutely should
Upd: the __generator is added by the typescript, not webpackoptimistic-gold•2y ago
Weird. Is this happening on the server?
helpful-purpleOP•2y ago
That is one of the craziest bugs I've had. It's caused by "ts-loader": "^9.4.1", with target es5
I've changed tartget to es2020 and the context is finnaly there and the beforeLoad works
optimistic-gold•2y ago
WAT
That’s insane
helpful-purpleOP•2y ago
I can't believe my eyes to be honest
Not
ts-loader, looks like it's a feature of TypeScript transpiller. I can't wrap my head around what is really happening there, but on es5, with __generator - I don't have any context, the loop is skipped, on es2020 - I do.optimistic-gold•2y ago
That’s a weird 🐛
helpful-purpleOP•2y ago
I'm having a hard time narrowing down the problem really, but overall:
The module/library on top of Tanstack Router is built fine, it does not turn original Tanstack code into es5 js.
When I import it, however, in a webpack project with typescript es5 target, it's somehow polyfilled, and polyfilled by the typescript it seems like because changing target in webpack doesn't change anything, but changing target in tsconfig.json does. Why and how typescript tries to polyfill JS code is beyond me, but this seems like exactly the issue here, that ts does something that it should not do. When these generators are added, the Tanstack Router match loop is entierly skipped, causing beforeLoad to never trigger.
optimistic-gold•2y ago
That's weird
I'm not even sure where to file a bug
helpful-purpleOP•2y ago
Looking more into it, I think it's my fault because I've somehow got ts-loader running over JS files (which it did for a while surprisingly well!), and exclusion of /node_modules/ didn't stop it for some reason. It's just a very weird and unexpected result of misconfiguration. Okay, thank you very much, closing this topic!
optimistic-gold•2y ago
Nice! Good to hear