Skip to content

Commit f9dcdf1

Browse files
committed
fix(insights): fix coming soon list
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.
1 parent 8723e12 commit f9dcdf1

File tree

1 file changed

+2
-0
lines changed
  • apps/insights/src/components/PriceFeedIcon

1 file changed

+2
-0
lines changed

apps/insights/src/components/PriceFeedIcon/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
"use client";
2+
13
import type { ComponentProps } from "react";
24

35
import Commodities from "./commodities.svg";

0 commit comments

Comments
 (0)