React Native install issues

[justinmakaila]

I wrote a little consumer for the clarifai API that utilizes this library. Unfortunately, whenever I try to use it, it crashes with a red screen:

The client looks like this (currently, which resulted in the red screen, with no implementation):

import Clarifai from "clarifai";

const clarifai = new Clarifai.App(
  "client_id",
  "client_secret",
);

export const verifyPhotoBytes = (base64Photo, tags) => {
  console.log("Verifying bytes");
  return Promise.resolve("Hey");
  // return clarifai.inputs
  //   .create({
  //     base64: base64Photo,
  //   })
  //   .then(
  //     response => {
  //       console.log(response);
  //     },
  //     error => {
  //       console.log(error);
  //     },
  //   );
};

The crash seems to happen if I try to create a new instance of Clarifai.App. I'm on version 2.1.8 using yarn 0.24.6

[justinmakaila]

Update: I removed the creation of the client, and still have the same issue. It seems as if the issue has to do with the actual import, not just interacting with the library.

[justinmakaila]

Update: It seems as if the issue is from the asap Promise polyfill utilizing a module called domain. The issue is fixed (but not merged!) here: kriskowal/asap#72

In the mean time, I removed promise as a dependency and replaced all instances of require('Promise') with global.Promise in a fork.

[justinmakaila]

Also, the main section in package.json points to dist/index.js which doesn't exist (i'm also a js noob and could be missing something). I changed it to src/index.js

[jaredl531]

Sorry for all the trouble here @justinmakaila. We're actually working on a new version of this and we'll let you know when it's out.

[neo125874]

@jared-clarifai hi, is this issue fixed? now same error here, version 2.2.0

[justinmakaila]

I just replaced all `var Promise = require('promise')` with `Global.Promise` or whatever. I eventually moved away from this solution and opted to use a library to build the requests manually; I don't want to load natively captured images into the js context just for the network. I'm using `react-native-fetch-blob`.

…

On Thu, Jun 29, 2017 at 3:34 PM Komran Ghahremani ***@***.***> wrote: @justinmakaila <https://github.com/justinmakaila> what's the right way to remove the 'promise' library - just uninstall & unlink are not working for me — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#19 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABkCVJlgj8DoHJFqJSdzifRQjryEhHjkks5sI_w3gaJpZM4OBJWu> .

[vigzmv]

Same issue.

[Jonovono]

@jared-clarifai any update when it will be fixed?

[maxcell]

Howdy all! I have been fiddling around for a bit and I am curious if this will have any impact to what you are doing. I have also tried this on two different node versions: v6.10.3 and v8.1.4. Going from a clean installs on both:

1. Cleaning your cache: npm cache --force clean
   a. For just in case, be sure to remove your node_modules folder.
2. Then npm install, you will get all your node modules again
3. Install clarifai npm install clarifai --save
   a. If in case you are getting babel errors, I would also go npm install babel-preset-es2015 --save
4. I also run react native using the react-native-cli
   a. If you want to install this, go ahead and npm install react-native-cli
5. And finally you can run with react-native run-ios react-native run-android or simply using your npm start

[eddiezane]

This appears to happen because .babelrc is present in the npm published version. Going to do some research on whether or not we should be ignoring this file when cutting a release.

As an interim fix you can do rm node_modules/clarifai/.babelrc and restart the React Native packager.

[Eyesonly88]

I'm using React Native 0.42 and clarifai 2.5.0 and still get this issue. The main reason I updated clarifai is to use the apiKey auth instead of giving a secret key.

I've tried removing node_modules folder and restarting packager multiple times and added the babel dependency as mentioned above but they all didn't work.

The workaround:
I forked promise lib and updated the version of asap from 2.0.3 to 2.0.6. Right now, i'm depending on my fork for this to work.

EDIT: this workaround didn't work after all :( ... I'm getting promise errors now ...

[eddiezane]

@Eyesonly88 @vigzmv I'm unable to reproduce this on a new React Native project.

Steps that succeed:

1. create-react-native-app clarifai-test
2. cd clarifai-test
3. yarn add clarifai
4. Edit App.js

process.nextTick = setImmediate

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Clarifai from 'clarifai'

const app = new Clarifai.App({
  apiKey: 'CLARIFAI_API_KEY'
})

export default class App extends React.Component {
  componentDidMount() {
    app.models.predict(Clarifai.GENERAL_MODEL, 'https://ulmhawkeyeonline.com/wp-content/uploads/2017/11/puppy-development-300x200.jpg')
      .then(res => console.log(res.outputs[0].data))
      .catch(err => console.error(err))
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

5. yarn start
6. Load up Expo and scan qr code (might need to shake device and click Reload)
7. See prediction results log out

Could you please try the above or provide steps to reproduce?

[vigzmv]

I tried the above, and also tried with react-native init. It worked!
But it is not working with my old project, I am getting the same error as in the first comment.
I think this may be related some other dependency, I will investigate more and share my results.

[NeelShah1998]

clarifai__WEBPACK_IMPORTED_MODULE_7___default.a.app is not a constructor I got this error what should i do?