AmazonAIPredictions provider gives a Cant't find variable: Buffer error on a React Native app created with Expo

[Sebas1245]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React Native

Amplify APIs

Predictions

Amplify Categories

predictions

Environment information

# Put output below this line
System:
    OS: macOS 12.1
    CPU: (8) arm64 Apple M1
    Memory: 136.63 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
    Watchman: 2022.01.31.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 98.0.4758.80
    Safari: 15.2
  npmPackages:
    @babel/core: ^7.12.9 => 7.17.2 
    @react-native-async-storage/async-storage: ^1.16.0 => 1.16.0 
    @react-native-community/netinfo: ^7.1.12 => 7.1.12 
    @react-native-picker/picker: ^2.2.1 => 2.2.1 
    @types/react: ~17.0.21 => 17.0.39 
    @types/react-native: ~0.64.12 => 0.64.23 
    HelloWorld:  0.0.1 
    aws-amplify: ^4.3.14 => 4.3.14 
    aws-amplify-react-native: ^6.0.2 => 6.0.2 
    buffer: ^6.0.3 => 6.0.3 (4.9.2, 5.7.1)
    expo: ~44.0.0 => 44.0.6 
    expo-camera: ~12.1.2 => 12.1.2 
    expo-status-bar: ~1.2.0 => 1.2.0 
    expo-updates: ~0.11.6 => 0.11.6 
    hermes-inspector-msggen:  1.0.0 
    react: 17.0.1 => 17.0.1 (16.14.0)
    react-dom: 17.0.1 => 17.0.1 
    react-native: 0.64.3 => 0.64.3 
    react-native-web: 0.17.1 => 0.17.1 
    typescript: ~4.3.5 => 4.3.5 
  npmGlobalPackages:
    @angular/cli: 13.2.1
    corepack: 0.10.0
    expo-cli: 5.1.2
    npm: 8.1.2
    react-native-cli: 2.0.1

Describe the bug

I am using the Identify text library to detect text from an image. I tried using the bytes option on the source object to avoid having to set up the storage option and it gave me a Cant't find variable: Buffer error.

Expected behavior

I am able to take a picture and the Predictions.identify() method returns a response.

Reproduction steps

1. Have expo-cli installed.
2. Initialize an expo application.
3. Add Cognito and Predictions to Amplify Backend
4. Add expo-camera package and add the function described below to take pictures.

Code Snippet

// Put your code below this line.
const takePicture = async () => {
        if (!camera) return;
        setShowActivityMonitor(true)
        try {
            const options = { quality: 0.7, base64: true };
            const photo = await camera.takePictureAsync(options);
            if (photo.base64) {
                const buffer = Buffer.from(photo.base64, 'base64');
                const identifiedText = await Predictions.identify({
                    text: {
                        source: {
                           bytes: buffer
                        }
                    }
                });
                const fullText = identifiedText.text.fullText;
                Alert.alert('Recognized text', `${fullText}`, [
                    {
                    text: 'Ok',
                    style: 'cancel',
                    },
                ]);
            }
            setCapturedImage(photo);
            setPreviewVisible(true);
        } catch (error) {
            console.log(error);
            Alert.alert('Error', `${error}`, [
                {
                text: 'Ok',
                style: 'cancel',
                },
            ]);
        } finally {
            setShowActivityMonitor(false);
        }
    };

Log output

// Put your logs below this line
Can't find variable: Buffer
at http://192.168.1.132:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:415430:69 in <unknown>
at node_modules/@aws-amplify/predictions/lib-esm/Providers/AmazonAIIdentifyPredictionsProvider.js:84:4 in <anonymous>
at http://192.168.1.132:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:415473:45 in <unknown>
at http://192.168.1.132:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:441473:26 in step
at node_modules/@aws-sdk/client-textract/node_modules/@aws-crypto/sha256-js/node_modules/tslib/tslib.js:122:34 in <anonymous>
at node_modules/@aws-sdk/client-textract/node_modules/@aws-crypto/sha256-js/node_modules/tslib/tslib.js:112:44 in fulfilled

aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "us-east-1",
    "aws_appsync_graphqlEndpoint": "https://d77jkhagifhdzipnkcwjh4xcw4.appsync-api.us-east-1.amazonaws.com/graphql",
    "aws_appsync_region": "us-east-1",
    "aws_appsync_authenticationType": "API_KEY",
    "aws_appsync_apiKey": "da2-eqa3ojnshjffhmykeretvskaf4",
    "aws_cognito_identity_pool_id": "us-east-1:33376764-c000-499b-8a61-9f1e45af33d6",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "us-east-1_JtohzxK1L",
    "aws_user_pools_web_client_id": "5uou5h1rr0rbvd2k6bm4pmde3u",
    "oauth": {},
    "aws_cognito_username_attributes": [
        "EMAIL",
        "PHONE_NUMBER"
    ],
    "aws_cognito_social_providers": [],
    "aws_cognito_signup_attributes": [
        "EMAIL"
    ],
    "aws_cognito_mfa_configuration": "OFF",
    "aws_cognito_mfa_types": [
        "SMS"
    ],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyMinLength": 8,
        "passwordPolicyCharacters": []
    },
    "aws_cognito_verification_mechanisms": [
        "EMAIL"
    ],
    "predictions": {
        "identify": {
            "identifyText": {
                "proxy": false,
                "region": "us-east-1",
                "defaults": {
                    "format": "ALL"
                }
            }
        }
    }
};


export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

A workaround I found, at least to get the Predictions library to work with my logic was to place the following on the first line of the file node_modules/@aws-amplify/predictions/lib-esm/Providers/AmazonAIIdentifyPredictionsProvider.js:

global.Buffer = global.Buffer || require('buffer').Buffer

I am aware that this is not an acceptable solution but I hope this is helpful to figuring out what the fix would be.

[julum]

Something new here? I got the same error with aws-amplify@4.3.39.

[kchhan-ampa]

I am also experiencing this with aws-amplify@5.1.3

[nadetastic]

Hi @Sebas1245 @kchhan-ampa @julum following up here - a recent update for a different issue may have addressed this error related to Buffer. Could you try with the latest version of aws-amplify to see if you are still facing the error?

[nadetastic]

Hi @Sebas1245 @kchhan-ampa follow up here again. I have a potential work around for you and although it involves the uses a 3rd party dependency (react-native-quick-base64), essentially what happens is it converts the base64 string provided by expo-camera and returns a byte array. You can then pass this to Predictions.identify().

An example of how this looks like:

import { toByteArray } from 'react-native-quick-base64';

const options = { quality: 0.7, base64: true };
const photo = await camera.current.takePictureAsync(options);
const bytes = toByteArray(photo.base64)

await Predictions.identify({
	text: { 
		source: { bytes },
	} 
})

[cwomack]

Closing this issue as we have not heard back from you. If you are still experiencing this, please feel free to reply back and provide any information previously requested and we'd be happy to re-open the issue. There is also a workaround provided in the comment above by @nadetastic should anyone else come across this issue.

Thank you!

[nadetastic]

Related to #12218