You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
0 commit comments