Can't import useChat from Vercel's AI SDK

Fails on a new project as well.

🔴 ERROR  | Failed to resolve 'ai/react' from './popup.tsx'
🔴 ERROR  | Cannot load file './react' from module 'ai'

🔴 ERROR  | Failed to resolve 'ai/react' from './popup.tsx'
🔴 ERROR  | Cannot load file './react' from module 'ai'

popup.tsx:

import { useChat } from "ai/react"

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()

  return (
    <div className="mx-auto w-full max-w-md py-24 flex flex-col stretch">
      {messages.map((m) => (
        <div key={m.id}>
          {m.role === "user" ? "User: " : "AI: "}
          {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <label>
          Say something...
          <input
            className="fixed w-full max-w-md bottom-0 border border-gray-300 rounded mb-8 shadow-xl p-2"
            value={input}
            onChange={handleInputChange}
          />
        </label>
        <button type="submit">Send</button>
      </form>
    </div>
  )
}

import { useChat } from "ai/react"

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()

  return (
    <div className="mx-auto w-full max-w-md py-24 flex flex-col stretch">
      {messages.map((m) => (
        <div key={m.id}>
          {m.role === "user" ? "User: " : "AI: "}
          {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <label>
          Say something...
          <input
            className="fixed w-full max-w-md bottom-0 border border-gray-300 rounded mb-8 shadow-xl p-2"
            value={input}
            onChange={handleInputChange}
          />
        </label>
        <button type="submit">Send</button>
      </form>
    </div>
  )
}

5 Replies

lab•15mo ago

Which version of plasmo are you using btw @atgctg We might need to add their package into the known ESM module list :d......

atgctg•15mo ago

used the with supabase starter 0.77.5 is there a way to fix it until then?

lab•15mo ago

You can build plasmo locally and fix the resolver in https://github.com/PlasmoHQ/plasmo/blob/main/core/parcel-resolver-post/src/handle-module-exports.ts

GitHub

plasmo/core/parcel-resolver-post/src/handle-module-exports.ts at ma...

🧩 The Browser Extension Framework. Contribute to PlasmoHQ/plasmo development by creating an account on GitHub.

atgctg•14mo ago

Having trouble building it locally.. would you merge this fix if I made a PR?

const knownEsmPackageSet = new Set(["firebase-admin", "svelte", "ai"])

const knownEsmPackageSet = new Set(["firebase-admin", "svelte", "ai"])

postonsundays•11mo ago

@atgctg @louis did either of you get a version of the package AI working in CSUI? if so any links to example repos?

Gaming

Programming

Can't import useChat from Vercel's AI SDK