fix(insights): fix coming soon list #3150
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This is a very obscure, very tricky issue. I'll try to explain the problem and fix: We use the React Compiler on IH, the component library, and a few other places. There's a limitation where the react compiler only works properly for client components. It makes sense given the purpose of the compiler is to add caching and caching only matters client-side; in general nextjs will handle separating client from server components and only applying the react compiler to client components, however it cannot do so in the component library, where the code is transpiled separately outside of nextjs. Working with the React Compiler in such an environment is a bit obscure, see the React ticket [here](facebook/react#31702) which describes the exact issues we've run into in the past. At the time I first encountered this limitation, it seemed like the best solution was to mark every component exported by the component library as `"use client"`. This works, however it seems to cause errors only in production mode when passing `ReactNode` props to components exported by the component library, if the props themselves are not also client components. This was the case with `<PriceFeedIcon>` being passed in to `<SymbolPairTag>`, and it was causing the Coming Soon list to throw an exception when rendering. Marking `<PriceFeedIcon>` as a client component -- while unnecessary conceptually -- does fix this issue. In my opinion, this commit is a stopgap solution. We need to revisit how we use React Compiler so these kinds of obscure interactions don't happen. Either we need a better way of applying the react compiler to the component library, or perhaps we should just not use react compiler at all if we don't believe it's stable enough to avoid these kinds of bizarre problems.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
5 Skipped Deployments
|
benduran
approved these changes
Oct 27, 2025
alexcambose
approved these changes
Oct 27, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is a very obscure, very tricky issue. I'll try to explain the problem and fix:
We use the React Compiler on IH, the component library, and a few other places.
There's a limitation where the react compiler only works properly for client components. It makes sense given the purpose of the compiler is to add caching and caching only matters client-side; in general nextjs will handle separating client from server components and only applying the react compiler to client components, however it cannot do so in the component library, where the code is transpiled separately outside of nextjs.
Working with the React Compiler in such an environment is a bit obscure, see the React ticket here which describes the exact issues we've run into in the past.
At the time I first encountered this limitation, it seemed like the best solution was to mark every component exported by the component library as
"use client". This works, however it's a bit suboptimal as a lot of components that don't have client-side behavior is now shipped to the browser unnecessarily.However, I realized with this bug that this approach seems to cause errors -- only when running in production mode -- when passing
ReactNodeprops to components exported by the component library, if the props themselves are not also client components.This was the case with
<PriceFeedIcon>being passed in to<SymbolPairTag>, and it was causing the Coming Soon list to throw an exception when rendering.Marking
<PriceFeedIcon>as a client component -- while unnecessary conceptually -- does fix this issue.In my opinion, this commit is a stopgap solution. We need to revisit how we use React Compiler so these kinds of obscure interactions don't happen. Either we need a better way of applying the react compiler to the component library, or perhaps we should just not use react compiler at all if we don't believe it's stable enough to avoid these kinds of bizarre problems.