Reasoning component crashes next build command

[Andrew-Chen-Wang]

When running next build, you'll get an error due to isOpen variable being boolean | undefined

const [isOpen, setIsOpen] = useControllableState({
      prop: open,
      defaultProp: defaultOpen,
      onChange: onOpenChange,
    })

Same goes for the duration variable as well.

You can see this issue is due to the underlying radix library. See this issue (that is still open in radix) radix-ui/primitives#2791

It affects this line

<ReasoningContext.Provider value={{ isStreaming, isOpen, setIsOpen, duration }}>

and then crashes nextjs in production build

It also says that useControllableState is not intended for public usage, so I feel like we should change this to react primitives.

[haydenbleasel]

@Andrew-Chen-Wang I'm able to run next build fine without it crashing, are you able to submit a repro? replit or something similar.

[Andrew-Chen-Wang]

This was from Vercel logs when running next build:

Failed to compile.
./src/components/ai-elements/reasoning.tsx:100:56
Type error: Type 'boolean | undefined' is not assignable to type 'boolean'.
  Type 'undefined' is not assignable to type 'boolean'.
   98 |
   99 |     return (
> 100 |       <ReasoningContext.Provider value={{ isStreaming, isOpen, setIsOpen, duration }}>
      |                                                        ^
  101 |         <Collapsible
  102 |           className={cn("not-prose mb-4", className)}

my code:

          {messages.map((message) => (
            <Message from={message.role} key={message.id}>
              <MessageContent>
                {/*<ToolMessage message={message} />*/}
                {message.parts.map((part, i) => {
                  switch (part.type) {
                    case "text":
                      return <Response key={`${message.id}-${i}`}>{part.text}</Response>
                    case "reasoning":
                      return (
                        <Reasoning
                          key={`${message.id}-${i}`}
                          className="w-full"
                          isStreaming={
                            status === "streaming" &&
                            i === message.parts.length - 1 &&
                            message.id === messages.at(-1)?.id
                          }
                        >
                          <ReasoningTrigger />
                          <ReasoningContent>{part.text}</ReasoningContent>
                        </Reasoning>
                      )

I'm just following the ai sdk ui documentation utilizing useChat. It shouldn't deviate that much. Could you try reproducing using Vercel itself maybe? Even in my IDE, it shows I have a ts compilation error

The issue I linked in my original comment which is still open also addresses this nuisance.