'useUIState' is not exported from 'ai/rsc'

[RaduIm]

Description

When I try to run build, I get:

   ⚠ Compiled with warnings

....../components/chat/chat-messages.tsx
Attempted import error: 'useUIState' is not exported from 'ai/rsc' (imported as 'useUIState').

Because of the warning, my deployment to Vercel fails.

Code example

import { useUIState } from "ai/rsc";

const ChatMessages = () => {
  const [messages] = useUIState<typeof AI>();

Additional context

"dependencies": {
    "@ai-sdk/openai": "^0.0.9",
    "@emotion/cache": "^11.11.0",
    "@emotion/react": "^11.11.4",
    "@emotion/server": "^11.11.0",
    "@emotion/styled": "^11.11.5",
    "@mui/icons-material": "^5.15.15",
    "@mui/material": "^5.15.15",
    "@vercel/blob": "^0.23.2",
    "ai": "^3.1.1",
    "aos": "^2.3.4",
    "date-fns": "^3.6.0",
    "date-fns-tz": "^3.1.3",
    "next": "^14.2.3",
    "openai": "^4.40.1",
    "react": "^18",
    "react-dom": "^18",
    "react-markdown": "^9.0.1",
    "react-material-ui-carousel": "^3.4.2",
    "react-slick": "^0.30.2",
    "remark-gfm": "^4.0.0",
    "slick-carousel": "^1.8.1",
    "use-debounce": "^10.0.0",
    "zod": "^3.22.4",
    "zod-to-json-schema": "^3.22.5"
  },
  "devDependencies": {
    "@types/aos": "^3.0.7",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@typescript-eslint/eslint-plugin": "^7.6.0",
    "@typescript-eslint/parser": "^7.6.0",
    "constructs": "^10.3.0",
    "eslint": "^8",
    "eslint-config-next": "^14.2.3",
    "eslint-plugin-react": "^7.34.1",
    "prettier": "^3.2.5",
    "typescript": "^5"
  }

[lgrammel]

Are you using es modules or commonjs? Would you mind sharing your tsconfig.json?

[RaduIm]

Here is my tsconfig.json. Thanks for looking into this!

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

[lonelyheartsclubcode]

were you able to resolve this? i'm struggling with a similar issue

[shuding]

useUIState is a Client Component API, which means that you have to use it in a Client Component (with "use client" directive on top):

"use client"

import { useUIState } from "ai/rsc"

Let me know if this solves your issue!

[RaduIm]

useUIState is a Client Component API, which means that you have to use it in a Client Component (with "use client" directive on top):

"use client"

import { useUIState } from "ai/rsc"

Let me know if this solves your issue!

Yes, this was it! Thanks a lot!