React Native with TypeScript tfjs-models/universal-sentence-encoder error on model load

Question

I'm trying to use tfjs-models/universal-sentence-encoder within a React Native app by following these instructions. However, I get the following error when I try to load the model:

ERROR: TypeError: undefined is not an object (evaluating '_universalSentenceEncoder.default.load'

Code:

import React, { useEffect, useState } from 'react';
require('@tensorflow/tfjs');
const use = require('@tensorflow-models/universal-sentence-encoder');

export default function App() {

  useEffect(() => {
    console.log("App is starting...")
    
    const init = async () => {
      // initialize state variables 
      // console.log("App is initializing services...")
      
      // Load the model.
      try {
        use.load().then((model: any) => {
          // Embed an array of sentences.
          const sentences = [
            'Hello.',
            'How are you?'
          ];
          model.embed(sentences).then((embeddings: any) => {
            // `embeddings` is a 2D tensor consisting of the 512-dimensional embeddings for each sentence.
            // So in this example `embeddings` has the shape [2, 512].
            embeddings.print(true /* verbose */);
          });
        });
      }
      catch (err) {
        console.log(`ERROR: ${err}`);
      }
    };
  }, []);

Package versions:

• [email protected]
• @tensorflow-models/[email protected]
• @tensorflow/[email protected]
• @tensorflow/[email protected]

Answer 1

The answer yudhiesh provided fixes the cited error but produces another. A couple more changes need to be made to the code, and @tensorflow/tfjs needs to be downgraded from 3.3.0 to 3.0.0 (following this post).

Here's the updated code:

import React, { useEffect, useState } from 'react';
import "@tensorflow/tfjs-react-native";
import * as tf from '@tensorflow/tfjs';
import * as use from '@tensorflow-models/universal-sentence-encoder';

export default function App() {

  useEffect(() => {
    console.log("App is starting...")
    
    const init = async () => {
      // initialize state variables 
      // console.log("App is initializing services...")
      
      await tf.ready();
      
      // Load the model.
      try {
        use.load().then((model: any) => {
          // Embed an array of sentences.
          const sentences = [
            'Hello.',
            'How are you?'
          ];
          model.embed(sentences).then((embeddings: any) => {
            // `embeddings` is a 2D tensor consisting of the 512-dimensional embeddings for each sentence.
            // So in this example `embeddings` has the shape [2, 512].
            embeddings.print(true /* verbose */);
          });
        });
      }
      catch (err) {
        console.log(`ERROR: ${err}`);
      }
    };
  }, []);

Notice the import of @tensorflow/tfjs-react-native, the changes in how to import @tensorflow/tfjs, @tensorflow-models/universal-sentence-encoder, and the addition of calling await tf.ready() to ensure the tensorflow is initialized before attempting to load the use model.

This code produces the embeddings as expected when running on an iOS emulator, but it produces an embeddings vector full of NaNs when run on my physical iPhone. This is likely a separate issue, so consider this issue solved.