Unable to resolve "ai/react" in React Native #655
Replies: 9 comments
-
Also experiencing this issue. |
Beta Was this translation helpful? Give feedback.
-
Might have to enable https://reactnative.dev/blog/2023/06/21/package-exports-support#enabling-package-exports-beta
|
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
Looks like now there is a fetch implementation that support streams in React Native Would it be possible to use this with ai/react ? |
Beta Was this translation helpful? Give feedback.
-
@sebnun I gave it a quick try and couldn't make it work, but it may be possible. |
Beta Was this translation helpful? Give feedback.
-
As this isn't really a problem with the |
Beta Was this translation helpful? Give feedback.
-
Any update on this? |
Beta Was this translation helpful? Give feedback.
-
This will be needed a lot in the near future |
Beta Was this translation helpful? Give feedback.
-
I was able to find workarounds for both the exports issue and streaming. Enabling 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:
// 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. |
Beta Was this translation helpful? Give feedback.
-
I am trying to use the following code in React Native:
Behavior
It throws this exception when starting the app:
Unable to resolve "ai/react"
Is this package supported in
React
environments? Or onlyNext.js
?Beta Was this translation helpful? Give feedback.
All reactions