Error [TypeError]: Cannot read properties of null (reading 'useId')

[ChrisB007]

Hello guys,
I am trying to run my PromptGenerator function, and got this error - error Error [TypeError]: Cannot read properties of null (reading 'useId'). While debugging, I tried to isolate sections in the code to catch the issue, and I believe this is the part that is throwing the error:

import React, { useState } from "react";
import { useChat } from "ai/react";

export default function PromptGenerator() {
  const {
    messages: prompt,
    user,
    input,
    handleInputChange,
    handleSubmit: handleFormSubmit,
  } = useChat({
    api: "./chat_bot",
  })};

I am running the packages below with latest NextJS and react installed:

"dependencies": {
    "@clerk/nextjs": "^4.16.1",
    "@clerk/themes": "^1.6.1",
    "@headlessui/react": "^1.7.14",
    "@heroicons/react": "^2.0.17",
    "@huggingface/inference": "^1.8.0",
    "@prisma/client": "^4.15.0",
    "ai": "^2.1.8",
    "dotenv": "^16.3.1",
    "eslint": "8.37.0",
    "eslint-config-next": "^13.4.7",
    "langchain": "^0.0.81",
    "next": "^13.4.7",
    "pdf-parse": "^1.1.1",
    "pgvector": "^0.1.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typewriter-effect": "^2.20.1"
  },

Full error message/ warning is:

See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
- error Error [TypeError]: Cannot read properties of null (reading 'useId')

• The function call is at the top-level in the function component as shown.
• Would it matter if my app's structure is pages/api/fileName.js rather than pages/app/page.tsx?

My full code:

import React, { useState } from "react";
import { useChat } from "ai/react";

export default function PromptGenerator() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: "./chat_bot",
  });

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          {m.role === "user" ? "User: " : "AI: "}
          {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <label>
          Say something...
          <input
            id={2}
            className="fixed w-full max-w-md bottom-0 border border-gray-300 rounded mb-8 shadow-xl p-2"
            value={input}
            name="formInput"
            placeholder="Describe your business..."
            onChange={handleInputChange} // updating the input state
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Any and every comment is very much appreciated. Thanks in advance.

[raunakdoesdev]

Running into the same issue - bump on this!