Issues with Turbopack
Unanswered
Kerry Beagle posted this in #help-forum
Kerry BeagleOP
Hi all,
Making this thread to document some issues I've had with Turbopack, mainly to see if it's worth filing an issue on GitHub.
I have a relatively new project, it uses the app router, and enabling Turbopack, I've seen some strange behavior that I believe to be bugs, I'm not entirely sure how to reproduce them since the repository is private, but if needed, I can try to make a minimal repro.
Specifically:
- With Turbopack on the Next.js 15 rc, saving a file causes 3 rebuilds to happen (granted, they are pretty fast, but it's triggering rate limiting on my app because each hot update calls fetch twice (for strict mode rendering) so i'm getting six API calls when only 2 should be triggered whenever I save)
- Occasionally I get this phantom error saying something, I think about React context not being a function (might be misremembering), restarting the dev server fixes it but while it's happening, it becomes completely unusable. I have no clue how to intentionally trigger this, but it's happened multiple times before.
Making this thread to document some issues I've had with Turbopack, mainly to see if it's worth filing an issue on GitHub.
I have a relatively new project, it uses the app router, and enabling Turbopack, I've seen some strange behavior that I believe to be bugs, I'm not entirely sure how to reproduce them since the repository is private, but if needed, I can try to make a minimal repro.
Specifically:
- With Turbopack on the Next.js 15 rc, saving a file causes 3 rebuilds to happen (granted, they are pretty fast, but it's triggering rate limiting on my app because each hot update calls fetch twice (for strict mode rendering) so i'm getting six API calls when only 2 should be triggered whenever I save)
- Occasionally I get this phantom error saying something, I think about React context not being a function (might be misremembering), restarting the dev server fixes it but while it's happening, it becomes completely unusable. I have no clue how to intentionally trigger this, but it's happened multiple times before.
6 Replies
Himalayan
I can't speak to turbopack but the double fetching in strict mode is fixeable. Just cache the fetch result using react cache - pretty sure the second request won't happen. Or, don't use a useEffect for your requests. Use a server action, server component, swr, or react query depending on the context of the request. This is what react advises anyways: https://react.dev/learn/you-might-not-need-an-effect
Tldr don't use useEffect unless you really, really need to.
@Himalayan I can't speak to turbopack but the double fetching in strict mode is fixeable. Just cache the fetch result using react cache - pretty sure the second request won't happen. Or, don't use a useEffect for your requests. Use a server action, server component, swr, or react query depending on the context of the request. This is what react advises anyways: https://react.dev/learn/you-might-not-need-an-effect
Kerry BeagleOP
no but the double fetching isn't the issue, the fact that it's recompiling 3 times per save and as a result doing 6 calls instead of 2 is the problem
Himalayan
I understood. Someone else has to help with that. I was just offering a suggestion to cut your requests at least in half 🤷♂️
@Himalayan I understood. Someone else has to help with that. I was just offering a suggestion to cut your requests at least in half 🤷♂️
Kerry BeagleOP
yeah makes sense, thanks for that though!