Closed Megajin closed 6 years ago
@Megajin so the react native works for you in your windows machine and with amplify@0.3.3?
@powerful23 no, I did update my report about that. The aws-mobile-react-native-starter
example is using "aws-amplify": "^0.2.4"
. The Issue happens with the version amplify@0.3.3
.
Here are the full dependencies on the working example:
"dependencies": {
"aws-amplify": "^0.2.4",
"aws-amplify-react-native": "^0.2.3",
"amazon-cognito-identity-js": "^1.31.0",
"aws-sdk": "2.177.0",
"babel-preset-es2015": "^6.24.1",
"buffer": "^5.0.7",
"mime-type": "^3.0.5",
"path": "^0.12.7",
"prop-types": "^15.6.0",
"react": "16.0.0-alpha.12",
"react-devtools": "^2.5.0",
"react-native": "0.47.1",
"react-native-elements": "^0.15.0",
"react-native-fetch-blob": "^0.10.8",
"react-native-prompt": "^1.0.0",
"react-native-uuid": "^1.4.9",
"react-native-vector-icons": "^4.3.0",
"react-navigation": "1.0.0-beta.12"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.1.0",
"eslint": "^4.4.1",
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.2.0",
"flow-bin": "^0.52.0",
"jest": "20.0.4",
"react-native-cli": "^2.0.1",
"react-test-renderer": "16.0.0-alpha.12"
}
I also get this on the same versions of aws-amplify and aws-amplify-react-native. It appears to be something to do thrown as react native support buffer/typed arrays. I am unsure if it is related but I have also been having trouble with undefineds related to crypto all day. global.crypto and getRandomValues in particular
@Megajin I tried in a Mac machine and no error happened. I didn't do any react-native link. Could you try again without doing that?
@paul-doherty I guess it is somehow related (see below). Hopefully we'll find the cause for this issue.
@powerful23 this is going to be a long comment, I'll share more of my code and steps:
For a "clean" Android Folder without any react-native link
all I did was to delete the Android + iOS folders and did a node_modules/.bin/react-native upgrade
. Now everything is how it was in the beginning (no react-native link
).
cd android/ && gradlew clean
-> Successful Build.
cd .. && react-native run-android
-> Successful Build.
import Amplify from 'aws-amplify;
-> results in the same error as descriped above.
I did try to require this before everyhting else: global.Buffer = global.Buffer || require('buffer').Buffer;
still no luck.
npm install aws-amplify@0.2.4
to downgrade and check if it is working -> Yet another error @paul-doherty take a look, I get the same error as you:
05-09 06:51:56.485 12196 12243 E ReactNativeJS: undefined is not an object (evaluating '_global.crypto')
05-09 06:51:56.496 12196 12243 W ReactNativeJS: Unable to symbolicate stack trace: undefined is not an object (evaluating 'self.fetch')
05-09 06:51:56.498 12196 12243 E ReactNativeJS: Module AppRegistry is not a registered callable module (calling runApplication)
05-09 06:51:56.498 12196 12243 E ReactNativeJS: Requiring module "fetch", which threw an exception: TypeError: undefined is not an object (evaluating 'self.fetch')
05-09 06:51:56.501 12196 12243 W ReactNativeJS: Unable to symbolicate stack trace: Requiring module "fetch", which threw an exception: TypeError: undefined is not an object (evaluating 'self.fetch')
05-09 06:51:56.501 12196 12243 W ReactNativeJS: Unable to symbolicate stack trace: undefined is not an object (evaluating '_require2(_dependencyMap[0], 'fetch').fetch')
Screenshot:
Here is my full source:
./index.js
:
/************************************************************
* Index.js *
* Entry point of App. *
* Just route to the main JS to make things easy and clear. *
************************************************************/
// Appregistry from React to "register" app.
import { AppRegistry } from 'react-native';
// Main JS which holds all logic (App itself).
import App from './src/App';
/**********************************
* Begin Private Area for Module. *
**********************************/
// @NOTE: This Section is shared through every Instance of this given class.
// - You have been warned. -
/********************************
* End Private Area for Module. *
********************************/
/**
* Register Component and route to main app js.
*/
AppRegistry.registerComponent('appName', () => App);
src\App.js
:
/*************************************************
* Main entry for the APP. *
* Everything necessary will start from here on. *
*************************************************/
// global.Buffer = global.Buffer || require('buffer').Buffer; // doesn't matter if used or not, error stays.
import React, { Component } from 'react';
import { View } from 'react-native';
// import { Provider } from 'react-redux';
// import { createStore } from 'redux';
import Amplify from 'aws-amplify'; // Here the error happens!
// import { withAuthenticator } from 'aws-amplify-react-native';
// import {awsmobile} from '../../../core/aws/aws-exports';
import Login from './view/components/render-components/login';
import Register from './view/components/render-components/register';
import LoadingScreen from './view/components/render-components/loading-screen';
import { MainStyle } from './view/assets/styles/main-style';
// Amplify.configure(awsmobile);
/**
* Main Class.
* @extends Component
*/
class App extends Component {
/**
* Do React stuff.
*/
}
export default App;
android\build.gradle
:
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:2.2.3'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
android\settings.gradle
:
rootProject.name = 'YOUR_APP_NAME'
include ':app'
android\app\build.gradle
:
apply plugin: "com.android.application"
import com.android.build.OutputFile
/**
* The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
* and bundleReleaseJsAndAssets).
* These basically call `react-native bundle` with the correct arguments during the Android build
* cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
* bundle directly from the development server. Below you can see all the possible configurations
* and their defaults. If you decide to add a configuration block, make sure to add it before the
* `apply from: "../../node_modules/react-native/react.gradle"` line.
*
* project.ext.react = [
* // the name of the generated asset file containing your JS bundle
* bundleAssetName: "index.android.bundle",
*
* // the entry file for bundle generation
* entryFile: "index.android.js",
*
* // whether to bundle JS and assets in debug mode
* bundleInDebug: false,
*
* // whether to bundle JS and assets in release mode
* bundleInRelease: true,
*
* // whether to bundle JS and assets in another build variant (if configured).
* // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
* // The configuration property can be in the following formats
* // 'bundleIn${productFlavor}${buildType}'
* // 'bundleIn${buildType}'
* // bundleInFreeDebug: true,
* // bundleInPaidRelease: true,
* // bundleInBeta: true,
*
* // whether to disable dev mode in custom build variants (by default only disabled in release)
* // for example: to disable dev mode in the staging build type (if configured)
* devDisabledInStaging: true,
* // The configuration property can be in the following formats
* // 'devDisabledIn${productFlavor}${buildType}'
* // 'devDisabledIn${buildType}'
*
* // the root of your project, i.e. where "package.json" lives
* root: "../../",
*
* // where to put the JS bundle asset in debug mode
* jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
*
* // where to put the JS bundle asset in release mode
* jsBundleDirRelease: "$buildDir/intermediates/assets/release",
*
* // where to put drawable resources / React Native assets, e.g. the ones you use via
* // require('./image.png')), in debug mode
* resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
*
* // where to put drawable resources / React Native assets, e.g. the ones you use via
* // require('./image.png')), in release mode
* resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
*
* // by default the gradle tasks are skipped if none of the JS files or assets change; this means
* // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
* // date; if you have any other folders that you want to ignore for performance reasons (gradle
* // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
* // for example, you might want to remove it from here.
* inputExcludes: ["android/**", "ios/**"],
*
* // override which node gets called and with what additional arguments
* nodeExecutableAndArgs: ["node"],
*
* // supply additional arguments to the packager
* extraPackagerArgs: []
* ]
*/
project.ext.react = [
entryFile: "index.js"
]
apply from: "../../node_modules/react-native/react.gradle"
/**
* Set this to true to create two separate APKs instead of one:
* - An APK that only works on ARM devices
* - An APK that only works on x86 devices
* The advantage is the size of the APK is reduced by about 4MB.
* Upload all the APKs to the Play Store and people will download
* the correct one based on the CPU architecture of their device.
*/
def enableSeparateBuildPerCPUArchitecture = false
/**
* Run Proguard to shrink the Java bytecode in release builds.
*/
def enableProguardInReleaseBuilds = false
android {
compileSdkVersion 23
buildToolsVersion "23.0.1"
defaultConfig {
applicationId "com.yourappname"
minSdkVersion 16
targetSdkVersion 22
versionCode 1
versionName "1.0"
ndk {
abiFilters "armeabi-v7a", "x86"
}
}
splits {
abi {
reset()
enable enableSeparateBuildPerCPUArchitecture
universalApk false // If true, also generate a universal APK
include "armeabi-v7a", "x86"
}
}
buildTypes {
release {
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
}
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
def versionCodes = ["armeabi-v7a":1, "x86":2]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) { // null for the universal-debug, universal-release variants
output.versionCodeOverride =
versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
}
}
}
}
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
}
// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile
into 'libs'
}
android\app\src\main\AndroidManifest.xml
:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.appname">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>
android\app\src\main\java\com\appname\MainActivity.java
:
package com.appname;
import com.facebook.react.ReactActivity;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "appname";
}
}
android\app\src\main\java\com\appname\MainApplication.java
:
package com.appname;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
);
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
@powerful23 @paul-doherty
C:\Users\Megajin\AppData\Local\Temp
.node_modules
.npm install --no-optional
. set RNFB_ANDROID_PERMISSIONS=true
(this is for the current session so I can link react-native-fetch-blob).react-native link
Everything works as expected, but I still do not know what the cause was. I recommend everyone having the same issue to follow my steps above and try a clean install of all packages. If the error still occurs try to remove packages one by one and start with your devDependencies
.
android\gradle\wrapper\gradle-wrapper.properties
:
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip
android\build.gradle
:
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
jcenter()
google() // was needed to prevent the 'lib not found error'
}
dependencies {
classpath 'com.android.tools.build:gradle:3.1.0'
classpath 'com.google.gms:google-services:3.2.1'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
google()
}
}
android\settings.gradle
:
rootProject.name = 'YOUR_APP_NAME'
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-firebase'
project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')
include ':react-native-fetch-blob'
project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fetch-blob/android')
include ':aws-amplify-react-native'
project(':aws-amplify-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/aws-amplify-react-native/android')
include ':amazon-cognito-identity-js'
project(':amazon-cognito-identity-js').projectDir = new File(rootProject.projectDir, '../node_modules/amazon-cognito-identity-js/android')
include ':app'
android\app\build.gradle
:
apply plugin: "com.android.application"
import com.android.build.OutputFile
/**
* The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
* and bundleReleaseJsAndAssets).
* These basically call `react-native bundle` with the correct arguments during the Android build
* cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
* bundle directly from the development server. Below you can see all the possible configurations
* and their defaults. If you decide to add a configuration block, make sure to add it before the
* `apply from: "../../node_modules/react-native/react.gradle"` line.
*
* project.ext.react = [
* // the name of the generated asset file containing your JS bundle
* bundleAssetName: "index.android.bundle",
*
* // the entry file for bundle generation
* entryFile: "index.android.js",
*
* // whether to bundle JS and assets in debug mode
* bundleInDebug: false,
*
* // whether to bundle JS and assets in release mode
* bundleInRelease: true,
*
* // whether to bundle JS and assets in another build variant (if configured).
* // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
* // The configuration property can be in the following formats
* // 'bundleIn${productFlavor}${buildType}'
* // 'bundleIn${buildType}'
* // bundleInFreeDebug: true,
* // bundleInPaidRelease: true,
* // bundleInBeta: true,
*
* // whether to disable dev mode in custom build variants (by default only disabled in release)
* // for example: to disable dev mode in the staging build type (if configured)
* devDisabledInStaging: true,
* // The configuration property can be in the following formats
* // 'devDisabledIn${productFlavor}${buildType}'
* // 'devDisabledIn${buildType}'
*
* // the root of your project, i.e. where "package.json" lives
* root: "../../",
*
* // where to put the JS bundle asset in debug mode
* jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
*
* // where to put the JS bundle asset in release mode
* jsBundleDirRelease: "$buildDir/intermediates/assets/release",
*
* // where to put drawable resources / React Native assets, e.g. the ones you use via
* // require('./image.png')), in debug mode
* resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
*
* // where to put drawable resources / React Native assets, e.g. the ones you use via
* // require('./image.png')), in release mode
* resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
*
* // by default the gradle tasks are skipped if none of the JS files or assets change; this means
* // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
* // date; if you have any other folders that you want to ignore for performance reasons (gradle
* // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
* // for example, you might want to remove it from here.
* inputExcludes: ["android/**", "ios/**"],
*
* // override which node gets called and with what additional arguments
* nodeExecutableAndArgs: ["node"],
*
* // supply additional arguments to the packager
* extraPackagerArgs: []
* ]
*/
project.ext.react = [
entryFile: "index.js"
]
apply from: "../../node_modules/react-native/react.gradle"
/**
* Set this to true to create two separate APKs instead of one:
* - An APK that only works on ARM devices
* - An APK that only works on x86 devices
* The advantage is the size of the APK is reduced by about 4MB.
* Upload all the APKs to the Play Store and people will download
* the correct one based on the CPU architecture of their device.
*/
def enableSeparateBuildPerCPUArchitecture = false
/**
* Run Proguard to shrink the Java bytecode in release builds.
*/
def enableProguardInReleaseBuilds = false
android {
compileSdkVersion 23
buildToolsVersion "23.0.1"
defaultConfig {
applicationId "com.appname"
minSdkVersion 16
targetSdkVersion 22
versionCode 1
versionName "1.0"
ndk {
abiFilters "armeabi-v7a", "x86"
}
}
splits {
abi {
reset()
enable enableSeparateBuildPerCPUArchitecture
universalApk false // If true, also generate a universal APK
include "armeabi-v7a", "x86"
}
}
buildTypes {
release {
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
}
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
def versionCodes = ["armeabi-v7a":1, "x86":2]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) { // null for the universal-debug, universal-release variants
output.versionCodeOverride =
versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
}
}
}
}
dependencies {
implementation(project(':react-native-firebase')) {
transitive = false
}
// Firebase dependencies
implementation "com.google.android.gms:play-services-base:15.0.0"
implementation "com.google.firebase:firebase-core:15.0.2"
implementation project(':aws-amplify-react-native')
implementation project(':amazon-cognito-identity-js')
implementation project(':react-native-fetch-blob')
implementation project(':react-native-vector-icons')
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.android.support:appcompat-v7:23.0.1"
implementation "com.facebook.react:react-native:+" // From node_modules
}
// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile
into 'libs'
}
apply plugin: 'com.google.gms.google-services'
android\app\src\main\AndroidManifest.xml
:
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.appname">
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:allowBackup="false" android:theme="@style/AppTheme">
<activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize" android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
<action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
</application>
</manifest>
android\app\src\main\java\com\appname\MainActivity.java
:
package com.appname;
import com.facebook.react.ReactActivity;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "appname";
}
}
android\app\src\main\java\com\appname\MainApplication.java
:
package com.appname;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.oblador.vectoricons.VectorIconsPackage;
import io.invertase.firebase.RNFirebasePackage;
import com.RNFetchBlob.RNFetchBlobPackage;
import com.amazonaws.amplify.pushnotification.RNPushNotificationPackage;
import com.amazonaws.RNAWSCognitoPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new VectorIconsPackage(),
new RNFirebasePackage(),
new RNFetchBlobPackage(),
new RNPushNotificationPackage(),
new RNAWSCognitoPackage()
);
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
It's still the same for me I'm afraid. As soon as I attempt to use Auth I get TYPED_ARRAY_SUPPORT is undefined.
The error is being thrown from aws-sdk where it looks like global is undefined
"dependencies": {
"@types/react-native-i18n": "^2.0.0",
"@types/react-native-navigation": "^1.1.9",
"aws-amplify": "^0.3.3",
"aws-amplify-react-native": "^0.2.9",
"babel-preset-es2015": "^6.24.1",
"moment": "^2.22.1",
"react": "16.3.1",
"react-native": "0.55.3",
"react-native-i18n": "^2.0.12",
"react-native-navigation": "^1.1.457",
"remove": "^0.1.5",
"tslib": "^1.9.0"
},
"devDependencies": {
"@types/node": "^10.0.4",
"@types/react": "^16.3.11",
"@types/react-native": "^0.55.3",
"babel-jest": "22.4.3",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.3",
"prettier": "^1.12.1",
"react-native-typescript-transformer": "^1.2.5",
"react-test-renderer": "16.3.1",
"ts-jest": "^22.4.5",
"tslint": "^5.9.1",
"tslint-config-prettier": "^1.12.0",
"tslint-react": "^3.6.0",
"typescript": "2.7.2"
},
Ok I found what my problem was. I was excluding node_modules in my tsconfig like below.
"exclude": [
"node_modules"
],
Turns out this doesn't exclude it. I set my rootDir to force it to exclude node_modules and now all is good
"rootDirs": [ "app" ],
Thanks
We're running into this problem as well, simply using the aws-sdk
. Relevant things...
"aws-sdk": "^2.242.1",
"react": "16.3.1",
"expo": "^27.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz",
We tried the shimming strategy discussed here, no dice. As soon as we import 'aws-sdk'
it blows up.
Any ideas?
@AndrewSouthpaw have you tried the steps descriped by me in one of the above comments?
I am facing the same issue when importing aws-amplify to my react-native app
import Amplify from 'aws-amplify';
it does work when I import it from package dist folder though.
import Amplify from 'aws-amplify/dist/aws-amplify';
@michalziolkowski same question to you:
@AndrewSouthpaw have you tried the steps descriped by me in one of the above comments?
Yes, no effect.
Likewise. We've been stuck on this for days on our React Native project. We've been able to track the problem to two aws-sdk dependencies, because we can work around it by doing the following:
in ../node_modules/aws-sdk/dist/xml2js.js
change line 2229 to Buffer.TYPED_ARRAY_SUPPORT = typedArraySupport()
...which throws an error from an outdated crypto-browserify dependency, so then:
in ../node_modules/amazon-cognito-identity-js/node_modules/crypto-browserify/rng.js
change line 4 to var _global = this || window || {};
We're still trying to come up with a solution. If anyone has more luck with this, please let me know.
@powerful23 @elorzafe do you guys mind if I request reopening this issue? It seems that there is more to this issue to be investigated.
@michalziolkowski & @AceNorth could you guys please provide some more information about your environment? Like which OS, your Package.json, npm/yarn, which Emulator Device etc.
I am facing the same issue when importing aws-amplify to my react-native app import Amplify from 'aws-amplify'; it does work when I import it from package dist folder though. import Amplify from 'aws-amplify/dist/aws-amplify';
As far as I know, if something like this happens (and it happens if you are using npm) then your folder node_modules
is corrupt. Have you installed the same package via npm install -g {package-name}
and npm install --save {package-name}
? You can investigate this easily, just uninstall aws-amplify
locally and try importing it again. If it works you have it installed somewhere else. Or any of the dependencies of aws-amplify
.
Likewise. We've been stuck on this for days on our React Native project. We've been able to track the problem to two aws-sdk dependencies, because we can work around it by doing the following: in ../node_modules/aws-sdk/dist/xml2js.js change line 2229 to Buffer.TYPED_ARRAY_SUPPORT = typedArraySupport() ...which throws an error from an outdated crypto-browserify dependency, so then: in ../node_modules/amazon-cognito-identity-js/node_modules/crypto-browserify/rng.js change line 4 to var _global = this || window || {}; We're still trying to come up with a solution. If anyone has more luck with this, please let me know.
Could you please try to add this at the top of your index.js:
global.Buffer = global.Buffer || require('buffer').Buffer; // Required for aws sigv4 signing
I tried that buffer fix already, as it was suggested above. No luck. We use npm, emulate on an iPhone 8 Plus, I'm on Sierra 10.13.4, and here's our package.json:
{
"name": "PROJECT_NAME",
"version": "0.0.1",
"private": true,
"jest": {
"preset": "react-native",
"verbose": true,
"collectCoverage": true,
"collectCoverageFrom": [
"Common/**/*.{js|jsx}",
"Web/src/js/**/*.{js|jsx}",
"!**/node_modules/**",
"!**/constants.js",
"!**/appConfig.js",
"!**/env.json",
"!Common/env.json",
"!Common/awsConfig.js",
"!Common/reducers/root-reducer.js",
"!Common/stores/*.js",
"!Common/actions/clients.js"
],
"testPathIgnorePatterns": [
"/(node_modules|scripts)/"
],
"setupFiles": [
"./__mocks__/setup.js"
],
"transform": {
"^.+\\.js?$": "babel-jest"
},
"coverageThreshold": {
"global": {
"branches": 80,
"functions": 80,
"lines": 80,
"statements": 80
}
},
"moduleNameMapper": {
"\\.(css|less)$": "identity-obj-proxy"
},
"moduleDirectories": [
"node_modules",
"Common"
],
"testEnvironment": "jsdom"
},
"scripts": {
// etc
},
"dependencies": {
"aws-amplify": "^0.4.1",
"aws-amplify-react": "^0.1.47",
"axios": "^0.17.1",
"babel-loader": "^7.1.2",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-universal-import": "^2.0.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.7",
"events": "^1.1.1",
"express": "^4.16.2",
"express-robots": "^0.1.6",
"extract-css-chunks-webpack-plugin": "^2.0.18",
"history": "^4.7.2",
"json-loader": "^0.5.4",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.4",
"moment": "^2.19.2",
"moment-timezone": "^0.5.13",
"morgan": "^1.9.0",
"paypal-checkout": "^4.0.199",
"prop-types": "^15.6.0",
"raven-js": "^3.24.2",
"react": "^16.2.0",
"react-autosuggest": "^9.3.2",
"react-burger-menu": "^2.4.2",
"react-country-region-selector": "^1.2.3",
"react-dom": "16.1.1",
"react-ga": "^2.5.0",
"react-helmet": "^5.2.0",
"react-image-magnify": "^2.3.2",
"react-lazyload": "^2.2.8",
"react-lifecycles-compat": "^3.0.4",
"react-metrics": "^2.4.1",
"react-moment": "^0.6.8",
"react-native": "0.50.3",
"react-native-code-push": "^5.2.0-beta",
"react-native-fast-image": "^2.0.1",
"react-native-orientation": "^3.1.3",
"react-native-photo-view": "1.5.2",
"react-native-swiper": "^1.5.4",
"react-native-vector-icons": "^4.4.2",
"react-redux": "5.0.6",
"react-router-config": "^1.0.0-beta.4",
"react-router-dom": "^4.2.2",
"react-scroll": "^1.7.7",
"react-slick": "^0.19.0",
"react-stripe-elements": "^1.6.0",
"react-toastify": "^3.0.0",
"react-universal-component": "^2.8.3",
"react-virtualized": "^9.18.5",
"redux": "3.7.2",
"redux-action-buffer": "^1.1.0",
"redux-logger": "^3.0.1",
"redux-persist": "^5.4.0",
"redux-thunk": "^2.2.0",
"uuid": "^3.1.0",
"validator": "^9.4.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.11.1",
"webpack-flush-chunks": "^1.2.3",
"webpack-hot-middleware": "^2.21.0",
"whatwg-fetch": "^2.0.4"
},
"devDependencies": {
"axios-mock-adapter": "^1.15.0",
"babel-core": "^6.24.1",
"babel-eslint": "^8.0.2",
"babel-jest": "^21.2.0",
"babel-plugin-dual-import": "^1.2.1",
"babel-plugin-module-resolver": "^3.0.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react-native": "^4.0.0",
"babel-preset-stage-2": "^6.24.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.3",
"eslint": "^4.11.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jest": "^21.6.2",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.5.1",
"eslint-plugin-react-native": "^3.1.0",
"extract-text-webpack-plugin": "^3.0.2",
"html-loader": "^0.5.1",
"html-minifier": "^3.4.3",
"html-webpack-plugin": "^2.28.0",
"identity-obj-proxy": "^3.0.0",
"jest": "21.2.1",
"jest-cli": "^21.2.1",
"jsdom": "^11.9.0",
"jsdom-global": "^3.0.2",
"postcss": "^6.0.17",
"postcss-cssnext": "^3.1.0",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.10",
"precss": "^3.1.0",
"react-hot-loader": "^4.1.2",
"redux-devtools": "^3.4.1",
"redux-devtools-dock-monitor": "^1.1.3",
"redux-devtools-extension": "^2.13.0",
"redux-devtools-log-monitor": "^1.4.0",
"redux-mock-store": "^1.4.0",
"style-loader": "^0.19.0",
"webpack-bundle-analyzer": "^2.11.0",
"webpack-hot-server-middleware": "^0.4.0"
},
"browserslist": [
">1%",
"last 2 versions"
]
}
@Megajin yeah sure. Feel free to reopen it.
@AceNorth could you give a try with yarn
? Also for now aws-amplify
targets the version of aws-sdk
to 2.198.0
, please make sure you are using the correct version.
@powerful23
Also for now aws-amplify targets the version of aws-sdk to 2.198.0, please make sure you are using the correct version.
Can you clarify? We're not using aws-sdk directly, it's only being installed as a dependency of aws-amplify. So I have no control over which version is being used.
EDIT: Regardless, it is pointing to 2.198.0. Also, switching to Yarn didn't make a difference.
@AceNorth I mean if you are only using amplify, then the version of aws-sdk
should be 2.198.0
. By the way, what' the version of amazon-cognito-identity-js
?
@powerful23 2.0.3
@powerful23 I wish I could, but I can't because you closed the issue and I am not a Contributor.
@Megajin We're using expo and haven't ejected our app (yet) and wouldn't do so just to get functionality here, so... can't follow those steps unfortunately.
@AndrewSouthpaw, @AceNorth
Have you both tried to install the AWS Mobile React Native Starter App - Serverless Pet Tracker?
I used it to look for differences in my project and did somehow get it to work then. Anything could be useful here like: Is this happening on Android only or iOS as well. Which differences occur in those folders as well? As I mentioned my problem dissapeared after upgrading gradle and deleting all caches, but I guess that won't be the cure for all problems. Since @AndrewSouthpaw mentioned expo that could be an issue as well but I'm not entirely sure.
I had another issue with another library the solution there was to remove my emulated devices and do an update. I should mention as well that I changed some of the SDK dependencies (react-native needs 23 but that didn't work in my project because I needed some of Google Firebase dependencies as well...), here is my source maybe it helps:
android\settings.gradle
rootProject.name = 'APPNAME'
include ':app'
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-firebase'
project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')
include ':react-native-fetch-blob'
project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fetch-blob/android')
include ':aws-amplify-react-native'
project(':aws-amplify-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/aws-amplify-react-native/android')
include ':amazon-cognito-identity-js'
project(':amazon-cognito-identity-js').projectDir = new File(rootProject.projectDir, '../node_modules/amazon-cognito-identity-js/android')
android\build.gradle
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
jcenter()
google()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.1.0'
classpath 'com.google.gms:google-services:3.2.1'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
google()
}
}
android\gradle\wrapper\gradle-wrapper.properties
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip
android\app\build.gradle
apply plugin: "com.android.application"
import com.android.build.OutputFile
project.ext.react = [
entryFile: "index.js"
]
apply from: "../../node_modules/react-native/react.gradle"
/**
* Set this to true to create two separate APKs instead of one:
* - An APK that only works on ARM devices
* - An APK that only works on x86 devices
* The advantage is the size of the APK is reduced by about 4MB.
* Upload all the APKs to the Play Store and people will download
* the correct one based on the CPU architecture of their device.
*/
def enableSeparateBuildPerCPUArchitecture = false
/**
* Run Proguard to shrink the Java bytecode in release builds.
*/
def enableProguardInReleaseBuilds = false
android {
compileSdkVersion 25
buildToolsVersion "25.0.1"
defaultConfig {
applicationId "com.APPNAME"
minSdkVersion 16
targetSdkVersion 25
versionCode 1
versionName "1.0"
ndk {
abiFilters "armeabi-v7a", "x86"
}
}
splits {
abi {
reset()
enable enableSeparateBuildPerCPUArchitecture
universalApk false // If true, also generate a universal APK
include "armeabi-v7a", "x86"
}
}
buildTypes {
release {
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
}
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
def versionCodes = ["armeabi-v7a":1, "x86":2]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) { // null for the universal-debug, universal-release variants
output.versionCodeOverride =
versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
}
}
}
}
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.android.support:appcompat-v7:25.0.1"
// Firebase dependencies
implementation(project(':react-native-firebase')) {
transitive = false
}
implementation "com.google.android.gms:play-services-base:15.0.0"
implementation "com.google.firebase:firebase-core:15.0.2"
implementation "com.facebook.react:react-native:+" // From node_modules
implementation project(':aws-amplify-react-native')
implementation project(':amazon-cognito-identity-js')
implementation project(':react-native-fetch-blob')
implementation project(':react-native-vector-icons')
}
// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile
into 'libs'
}
// Must be last to prevent version conflict error at build.
apply plugin: 'com.google.gms.google-services'
`android\app\src\main\java\com\APPNAME\MainActivity.java`
```Java
package com.APPNAME;
import com.facebook.react.ReactActivity;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "APPNAME";
}
}
`android\app\src\main\java\com\APPNAME\MainApplication.java`
```Java
package com.APPNAME;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.oblador.vectoricons.VectorIconsPackage;
import io.invertase.firebase.RNFirebasePackage;
import com.RNFetchBlob.RNFetchBlobPackage;
import com.amazonaws.amplify.pushnotification.RNPushNotificationPackage;
import com.amazonaws.RNAWSCognitoPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new VectorIconsPackage(),
new RNFirebasePackage(),
new RNFetchBlobPackage(),
new RNPushNotificationPackage(),
new RNAWSCognitoPackage()
);
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
Since I am developing for Android only this is all I can provide. If you guys could post some more of your environment then @powerful23 and @elorzafe can reproduce it better and debug to pinpoint the problem.
Guys,
the error occured again and again from time to time. I really do not know why. However I did some investigation on this:
global.TYPED_ARRAY_SUPPORT
will always be undefined
. At least in my case.
In my code I did try this:
global.Buffer = global.Buffer || require('buffer').Buffer; // Required for aws sigv4 signing
global.TYPED_ARRAY_SUPPORT = global.TYPED_ARRAY_SUPPORT || global.Buffer.TYPED_ARRAY_SUPPORT;
Still the same error again. So I went and cloned the amplifyJs repository.
Searching through the ./packages/
folder I did find s.TYPED_ARRAY_SUPPORT
in the file ./packages/amazon-cognito-identity-js/dist/amazon-cognito-identity.js
.
Without going into detail this error was somehow familiar, because I did remember that the same thing once happened to me in combination with Webpack
together with Babel
. The cause was that the Babel preset using --presets es2015
. Since it is only to be found in the under the distribution folder I'm highly positive that it has something to do with the preset in combination with a bundler since I could not find TYPED_ARRAY_SUPPORT
in any other file.
For example I'm using this in my .babelrc
:
{
"presets": ["env", "react-native"]
}
The amplifyJs ./packages/amazon-cognito-identity-js/.babelrc
is using this:
{
"presets": [
[
"es2015", {
"loose": true,
"modules": false
}
]
],
"env": {
"commonjs": {
"plugins": [
["transform-es2015-modules-commonjs", { "loose": true }]
]
}
}
}
Is it possible that this could solve this issue? Like changing the babel preset?
@Megajin We eventually fixed this by removing the "env" preset from our .babelrc, so yes, it seems like that was the issue.
Ok, after some testing today I can confirm that Error: evaluating 'global.TYPED_ARRAY_SUPPORT'
is 100% caused by babel --presets env
in combination with amazon-cognito-identity.js
.
I did change this:
{
"presets": ["env", "react-native"]
}
To this:
{
"presets": ["react-native"]
}
Thanks to @AceNorth for confirming this.
Remember to completley rebuild your app and remove all temporary files to be clean:
C:\Users\Megajin\AppData\Local\Temp
.node_modules
.npm install --no-optional
. set RNFB_ANDROID_PERMISSIONS=true
(this is for the current session so I can link react-native-fetch-blob).react-native link
I guess the Issue can be closed as resolved @powerful23 @elorzafe
You guys might find this useful too: @paul-doherty @AndrewSouthpaw @michalziolkowski
This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.
Looking for a help forum? We recommend joining the Amplify Community Discord server *-help
channels or Discussions for those types of questions.
Do you want to request a feature or report a bug?
What is the current behavior?
import Amplify from 'aws-amplify';
everything crashes and throws the following error:05-08 09:53:31.363 6995 7117 W ReactNativeJS: Unable to symbolicate stack trace: undefined is not an object (evaluating 'self.fetch') 05-08 09:53:31.364 6995 7117 E ReactNativeJS: Module AppRegistry is not a registered callable module (calling runApplication) 05-08 09:53:31.365 6995 7117 E ReactNativeJS: Requiring module "fetch", which threw an exception: TypeError: undefined is not an object (evaluating 'self.fetch') 05-08 09:53:31.367 6995 7117 W ReactNativeJS: Unable to symbolicate stack trace: Requiring module "fetch", which threw an exception: TypeError: undefined is not an object (evaluating 'self.fetch') 05-08 09:53:31.367 6995 7117 W ReactNativeJS: Unable to symbolicate stack trace: undefined is not an object (evaluating '_require2(_dependencyMap[0], 'fetch').fetch')
android\build.gradle
,android\settings.gradle
,android\app\build.gradle
RNPushNotificationPackage
from:android\app\src\main\java\com\appname\MainApplication.java
cd android\ && gradlew clean
results:BUILD SUCCESSFUL
Total time: 11.577 secs