{"record":{"id":"6f85eb5a4cbe5b95","repo":"vercel/ai","slug":"invalid-value-this-hook-only-accepts-values-creat-6f85eb","errorCode":null,"errorMessage":"Invalid value: this hook only accepts values created via `createStreamableValue`.","messagePattern":"Invalid value: this hook only accepts values created via `createStreamableValue`\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/rsc/src/streamable-value/use-streamable-value.tsx","lineNumber":10,"sourceCode":"import { startTransition, useLayoutEffect, useState } from 'react';\nimport { readStreamableValue } from './read-streamable-value';\nimport type { StreamableValue } from './streamable-value';\nimport { isStreamableValue } from './is-streamable-value';\n\nfunction checkStreamableValue(value: unknown): value is StreamableValue {\n  const hasSignature = isStreamableValue(value);\n\n  if (!hasSignature && value !== undefined) {\n    throw new Error(\n      'Invalid value: this hook only accepts values created via `createStreamableValue`.',\n    );\n  }\n\n  return hasSignature;\n}\n\n/**\n * `useStreamableValue` is a React hook that takes a streamable value created via the `createStreamableValue().value` API,\n * and returns the current value, error, and pending state.\n *\n * This is useful for consuming streamable values received from a component's props. For example:\n *\n * ```js\n * function MyComponent({ streamableValue }) {\n *   const [data, error, pending] = useStreamableValue(streamableValue);\n *\n *   if (pending) return <div>Loading...</div>;","sourceCodeStart":1,"sourceCodeEnd":28,"githubUrl":"https://github.com/vercel/ai/blob/69428b1f8b037e4d118fb4853428d5c4e620493c/packages/rsc/src/streamable-value/use-streamable-value.tsx#L1-L28","documentation":"useStreamableValue validates its argument through checkStreamableValue: anything that lacks the internal StreamableValue signature and is not undefined throws. The hook only works with values produced by createStreamableValue.","triggerScenarios":"Calling useStreamableValue with a plain object, a raw Promise, or a value from a different stream API (e.g. createStreamableUI); passing a value deserialized/JSON-copied so the internal signature was lost.","commonSituations":"Confusing streamable UI chunks with streamable values; round-tripping the value through JSON storage before using the hook; mixed package versions between producer and consumer.","solutions":["Pass the `.value` from createStreamableValue directly to the hook","Do not serialize/deserialize StreamableValue before consumption","Align AI SDK versions across server and client packages"],"exampleFix":"// before\nuseStreamableValue(somePromiseOrObject);\n// after\nconst valueStream = createStreamableValue(0);\nuseStreamableValue(valueStream.value);","handlingStrategy":"type-guard","validationCode":"import { isStreamableValue } from 'ai/rsc';\nif (!isStreamableValue(candidate)) throw new TypeError('useStreamableValue requires createStreamableValue().value');","typeGuard":"function isStreamableValueLike(v: unknown): v is StreamableValue {\n  return typeof v === 'object' && v !== null && 'type' in v && 'curr' in v;\n}","tryCatchPattern":"try {\n  const [value, error, pending] = useStreamableValue(input);\n} catch (e) {\n  if (e instanceof Error && e.message.includes('createStreamableValue')) {\n    console.error('Invalid argument to useStreamableValue');\n  }\n}","preventionTips":["Pass createStreamableValue().value directly, unmodified","Never persist/serialize the StreamableValue before the hook consumes it","Keep @ai-sdk/rsc versions aligned across the app"],"tags":["streaming","invalid-argument","hooks"],"backgroundTag":"invalid-streamable-value","analyzedSha":"69428b1f8b037e4d118fb4853428d5c4e620493c","analyzedAt":"2026-08-30T12:32:21.016Z","schemaVersion":2},"datasetVersion":"2026-08-30T13:17:10.514Z"}