Unable to resolve "ai/react" in React Native

[timothymiller]

I am trying to use the following code in React Native:

import { useCompletion } from 'ai/react'

const { completion, input, stop, isLoading, handleInputChange, handleSubmit } = useCompletion()

Behavior

It throws this exception when starting the app:

Unable to resolve "ai/react"

Is this package supported in React environments? Or only Next.js?

[Death666Machine]

Also experiencing this issue.

[karaggeorge]

Might have to enable https://reactnative.dev/blog/2023/06/21/package-exports-support#enabling-package-exports-beta

/react is a package export field, defined here

[karaggeorge]

Looking a bit more into it, even if the package resolution is fixed, it doesn't seem to work with React Native yet because this package uses streams, and RN hasn't yet implemented streams for their fetch API

[sebnun]

Looks like now there is a fetch implementation that support streams in React Native
https://github.com/react-native-community/fetch

Would it be possible to use this with ai/react ?

[MaxLeiter]

@sebnun I gave it a quick try and couldn't make it work, but it may be possible.

[MaxLeiter]

As this isn't really a problem with the ai ibrary, I'm going to convert it to a discussion.

[shiroyasha9]

Any update on this?

[ekimcem]

This will be needed a lot in the near future

[codybrouwers]

I was able to find workarounds for both the exports issue and streaming.

Enabling unstable_enablePackageExports in my Metro config didn't fix being able to import ai/react so instead I just use:
import { useChat } from 'ai/react/dist'

and then to fix TypeScript types created a type declaration file:

// ai.d.ts
declare module 'ai/react/dist' {
  export * from 'ai/react';
}

Fixing streams requires installing some polyfills and using react-native-fetch-api.

react-native-polyfill-globals can do a lot of the heavy lifting for you but I opted to install the polyfill packages myself and make a few changes:

• Use react-native-fast-encoder instead of text-encoding
• Only polyfill TextDecoder because as of React Native 0.74.1 TextEncoder is added to Hermes (commit)
• Ensure reactNative: { textStreaming: true } is included in all fetch requests.
  • ⚠️ this could cause performance issues on fetch requests that don't need streaming so keep that in mind.

// index.js or whatever the root of your app is

import { polyfillGlobal } from 'react-native/Libraries/Utilities/PolyfillFunctions';
import TextEncoder from 'react-native-fast-encoder';
import { ReadableStream } from 'web-streams-polyfill';
import { fetch, Headers, Request, Response } from 'react-native-fetch-api';

polyfillGlobal('ReadableStream', () => ReadableStream);
polyfillGlobal('TextDecoder', () => TextEncoder);
polyfillGlobal(
  'fetch',
  () =>
    (...args) =>
      fetch(args[0], { ...args[1], reactNative: { textStreaming: true } }),
);
polyfillGlobal('Headers', () => Headers);
polyfillGlobal('Request', () => Request);
polyfillGlobal('Response', () => Response);

The only remaining issue I'm encountering is the first chunk of the stream is always 515 bytes and then the rest flow in as expected. This causes a delay in showing data until a bunch pops in and the rest of the stream continues. Still investigating why this is happening.

[lpatrun]

@codybrouwers did you encounter
"Multiple commands produce '.../react-native-fast-encoder/react_native_fast_encoder.framework/Headers/libencoder_bridge.h'" when trying to install run iOS?

I had to remove
'./ios/ nativeUtils.xcframework/ios-arm64/Headers/libencoder_bridge.h'
'./ios/ nativeUtils.xcframework/ios-arm64_x86_64-simulator/Headers/libencoder_bridge.h'to

from Pods/react-native-fast-encoder/Headers
from inside the xcode

[iarickvigasi]

For those who are trying to get this working on Expo,
Note that you need to
Create an index.js file and make your polyfill the first import:

import 'polyfill'
import 'expo-router/entry'
Then change the main field in the package.json to point to the "main": "./index".

as discussed here

[aretrace]

@iarickvigasi @codybrouwers @nucleartide @AntoineKM @karaggeorge

Could y'all try out this solution (feedback is welcomed, especially for ai/react and android usage):
👉 https://gist.github.com/aretrace/bcb0777c2cfd2b0b1d9dcfb805fe2838

[biendou]

Hello react-native-fast-encoder doesn't have support for the new architecture on IOS @aretrace what could me the way to solve this?

[aretrace]

@biendou my solution should work for the new architecture. follow all the steps exactly, let me know if anything goes wrong.

[nucleartide]

Hey folks, first of all I love what the Vercel AI SDK has to offer, and I'm excited to try it on a nights-and-weekends project idea.

However, I've been trying to set up the AI SDK in React Native, using Expo Router (as recommended by the official docs). The problem that I run into is TransformStream needing to be polyfilled, which I don't have free time to resolve:

So would I be correct in saying that the Vercel AI SDK is solely designed for web at the moment?

I'd be happy to just use Next.js, then figure out a way to convert that Next.js app into a mobile app later — perhaps by using Capacitor as recommended elsewhere online. I'm also aware that React Server Components will be brought to React Native at some point, so perhaps at that point this AI library will also "just work".

Thoughts? Just curious about what y'all would recommend as a starting point.

[nucleartide]

@lgrammel Ahh sorry, I think there was some miscommunication. The call to OpenAI (which is server side) is working fine for me, it's the client-side in useChat() that is reporting errors. So if there is a way to pass in a custom fetch to useChat(), that'd be great. :)

[lgrammel]

@nucleartide i've just released a new version that supports custom fetch functions in useChat, useCompletion, useAssistant, and useObject. You can set them with the fetch option. please let me know if that resolves the issue

[nucleartide]

@lgrammel Wow amazing! I can check it out tonight as usual :)

[lgrammel]

@nucleartide did it work out?

[AntoineKM]

@nucleartide did it work out?

still doeesnt work on my side