Amplify-js: Can't find Variable: Symbol

[Samykills]

Describe the bug
Using the library 1.1.27

Expected behavior
No error should occur, since this was working fine untill now.

Screenshots

Smartphone (please complete the following information):

• Device: Redmi note 5 pro
• OS: android

Sample code
Adding the sample code here
https://github.com/Samykills/AwsAmplifyExp

awsAmplify.js
`import Amplify, { Analytics } from "aws-amplify";
import Config from "react-native-config";
import { Platform } from "react-native";
import { AppContext } from "react-native-ss-app-core";
class AwsAmplify {
static initalize() {
const amplifyConfig = {
Auth: {
identityPoolId: Config.AWS_COGNITO_IDENTITY_POOL_ID,
region: "us-east-1"
}
};
//Initialize Amplify
Amplify.configure(amplifyConfig);

const analyticsConfig = {
  AWSPinpoint: {
    // Amazon Pinpoint App Client ID
    appId: Config.AWS_PINPOINT_APP_ID,
    // Amazon service region
    region: "us-east-1",
    mandatorySignIn: false
  }
};

Analytics.configure(analyticsConfig);

}

/**
*

• @param {String} eventName - name of the event or module - "traffic"
• @param {String} type - Type of event- ("entry"/"exit") or anything
• @param {String} value - Type of event- can be null or anything
  */
  static recordEvent(eventName, action, title) {
  let attributesJson = {};
  let appContext = AppContext.getAppContext();
  attributesJson["action"] = JSON.stringify(action);
  attributesJson["title"] = title;
  attributesJson["zoneSelected"] = appContext.parentZoneName;
  attributesJson["os"] = Platform.OS;
  attributesJson["version"] = Config.CODE_PUSH_VERSION;
  attributesJson["eventTimeStamp"] = new Date().getTime().toString();
  if (appContext.sessionData) {
  let sessionData = JSON.parse(appContext.sessionData);
  attributesJson["userId"] = sessionData.userId.toString();
  sessionData.tenantId
  ? (attributesJson["tenantId"] = sessionData.tenantId.toString())
  : null;
  sessionData.tenantDto
  ? (attributesJson["tenantname"] = sessionData.tenantDto.name.toString())
  : null;
  }

Analytics.record({
  name: eventName,
  attributes: attributesJson
});

}
}

export default AwsAmplify;`
You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.
Adding debug log here :

Can't find variable: Symbol

constants.js:19:54
loadModuleImplementation
require.js:214:12
guardedLoadModule
require.js:148:36
_require
require.js:132:20

API.js:74:18
loadModuleImplementation
require.js:214:12
guardedLoadModule
require.js:148:36
_require
require.js:132:20

index.js:15:12
loadModuleImplementation
require.js:214:12
guardedLoadModule
require.js:148:36
_require
require.js:132:20

index.js:26:12
loadModuleImplementation
require.js:214:12
guardedLoadModule
require.js:148:36
_require
require.js:132:20

SSAnalytics.js:1
loadModuleImplementation
require.js:214:12
guardedLoadModule
require.js:148:36
_require
require.js:132:20

index.js:1
loadModuleImplementation
require.js:214:12
guardedLoadModule
require.js:148:36
_require
require.js:132:20

emsLocationComponent.js:14
loadModuleImplementation
require.js:214:12
guardedLoadModule
require.js:148:36
_require
require.js:132:20

index.js:1
loadModuleImplementation
require.js:214:12
guardedLoadModule
require.js:148:36
_require
require.js:132:20

firebaseNotification.js:6
loadModuleImplementation
require.js:214:12
guardedLoadModule
require.js:148:36
_require
require.js:132:20

index.js:2
loadModuleImplementation
require.js:214:12
guardedLoadModule
require.js:148:36
_require
require.js:132:20

campusFeedbackServiceManager.js:2
loadModuleImplementation
require.js:214:12
guardedLoadModule
require.js:148:36
_require
require.js:132:20

campusFeedbackComponent.js:18
loadModuleImplementation
require.js:214:12
guardedLoadModule
require.js:148:36
_require
require.js:132:20

index.js:1
loadModuleImplementation
require.js:214:12
guardedLoadModule
require.js:148:36
_require
require.js:132:20

app-router.js:19
loadModuleImplementation
require.js:214:12
guardedLoadModule
require.js:148:36
_require
require.js:132:20

index.android.js:4
loadModuleImplementation
require.js:214:12
guardedLoadModule
require.js:148:36
_require
require.js:132:20

App.js:3
loadModuleImplementation
require.js:214:12
guardedLoadModule
require.js:148:36
_require
require.js:132:20

index.js:2
loadModuleImplementation
require.js:214:12
guardedLoadModule
require.js:141:45
_require
require.js:132:20
global code

[powerful23]

@Samykills Hi, are you using expo? Can you provide more code snippets so we can reproduce it?

[Samykills]

@powerful23 this is not an expo app, as soon as i import the library it blows up. have already added the logs and that i get when i see this error , a thing to notice is there is no error shown in metro when this happens

[Samykills]

@powerful23 added a sample

[Samykills]

@powerful23 here is a sample project, which is getting the same error.
https://github.com/Samykills/AwsAmplifyExp

[dinukasal]

I got the same error, running not with expo

[Samykills]

@dinukasal which version are you using?

[ambeshHappiestMinds]

To those who are still facing this issue

To resolve this followed following post
https://github.com/facebook/react-native/issues/15786#issuecomment-404834632

basically this issue occurred since JavaScriptCore might be not updated on your device or emulator your best bet will be to try jsc-android-buildscripts to provide this compatibility below is the instruction to integrate same on Android

https://github.com/react-native-community/jsc-android-buildscripts#how-to-use-it-with-my-react-native-app

[Samykills]

@ambeshHappiestMinds Does it solve the problem for you?
i started receving this error two days ago and before that all was well.
I am on target api version 27 and also i get the same on IOS

[ambeshHappiestMinds]

@Samykills yes it did i was able to create Andorid builds properly

[Samykills]

@ambeshHappiestMinds ios?

[ambeshHappiestMinds]

opps sry for iOS i was able to create builds easily since our deployment target was greater tha iOS 10 on this we did not got this issue i suggest you may use react-native 0.57.5and check

[dinukasal]

this worked for me. thanks @ambeshHappiestMinds

[jessedoyle]

@powerful23, @jordanranz - This is generating an issue with our build using react-native 0.58.X on Android.

While the workaround here may resolve the issue, I think updating to a custom JavaScriptCore version is a heavy-handed solution that's not feasible for all.

The root cause is that aws-amplify is referencing Symbol directly assuming that it's defined for every JS interpreter.

Here's the offending line: https://github.com/aws-amplify/amplify-js/blob/d8c972dff0ad4483db8a7122f5bf4952cc8a295a/packages/core/src/constants.ts#L18

In most other locations, Amplify checks the existence of Symbol (example).

I believe this is definitely a bug in aws-amplify.

[Samykills]

@jessedoyle i replaced the code in node_modules/@aws-amplify/core/constants.ts with the one provided by you and still facing the same error, can you try the same with the sample-project i have added and verify? it would be great help :)

[jessedoyle]

@Samykills - You're right - I think the guard clause is insufficient.

I think we'll need a condition similar to the other Symbol reference checks through aws-amplify:

export const INTERNAL_AWS_APPSYNC_PUBSUB_PROVIDER = (typeof(Symbol) !== 'undefined' && typeof(Symbol.for) === 'function') ?
    Symbol.for('INTERNAL_AWS_APPSYNC_PUBSUB_PROVIDER') : '@@INTERNAL_AWS_APPSYNC_PUBSUB_PROVIDER';

I modified the corresponding code in node_modules/@aws-amplify/core/lib/constants.js and it resolves the issue for our app.

I'm going to update my PR to include this condition.

[Samykills]

Updating JSCore for android works!