Amplify-js: In this environment the sources for assign MUST be an object

[garyrutland]

Hi,

Trying to use the GraphQL API with a non AppSync set up and using a server that's been created using API Gateway and a Lambda.
I can call the API perfectly fine using an ID token I've either generated myself or from the Auth library within AWS Amplify, but whenever trying to call the API using Amplify I get the following:

TypeError: In this environment the sources for assign MUST be an object. This error is a performance optimization and not spec compliant.
    at Object.assign (blob:http://localhost:8081/7c7e07ee-d664-4756-b453-7471c07cb34d:324)
    at APIClass.<anonymous> (blob:http://localhost:8081/7c7e07ee-d664-4756-b453-7471c07cb34d:133915)
    at step (blob:http://localhost:8081/7c7e07ee-d664-4756-b453-7471c07cb34d:133372)
    at Object.next (blob:http://localhost:8081/7c7e07ee-d664-4756-b453-7471c07cb34d:133302)
    at fulfilled (blob:http://localhost:8081/7c7e07ee-d664-4756-b453-7471c07cb34d:133254)
    at tryCallOne (blob:http://localhost:8081/7c7e07ee-d664-4756-b453-7471c07cb34d:3732)
    at blob:http://localhost:8081/7c7e07ee-d664-4756-b453-7471c07cb34d:3833
    at blob:http://localhost:8081/7c7e07ee-d664-4756-b453-7471c07cb34d:3113
    at _callTimer (blob:http://localhost:8081/7c7e07ee-d664-4756-b453-7471c07cb34d:3002)
    at _callImmediatesPass (blob:http://localhost:8081/7c7e07ee-d664-4756-b453-7471c07cb34d:3038)

I do have another issue open at the moment regarding HTTP method type, but for now I've updated the API to allow GET requests.
The code in my React Native app looks like this:

import React, { Component } from 'react';
import Amplify, { API, Auth, graphqlOperation } from 'aws-amplify';

Amplify.Logger.LOG_LEVEL = 'DEBUG';

Amplify.configure({
  API: {
    graphql_endpoint: 'https://myurl.com/graphql',
    graphql_headers: async () => {
      const { idToken } = await Auth.currentSession();
      const Authorization = idToken.getJwtToken();

      console.log('ID token:', Authorization);

      return { Authorization };
    },
  },
  Auth: {
    identityPoolId: '***,
    region: '***',
    userPoolId: '***',
    userPoolWebClientId: '***',
  }
});

export default class App extends Component {
  async componentDidUpdate() {
    if (this.props.authState !== 'signedIn') {
      return null;
    }

    try {
      const query = graphqlOperation('valid_query');
      console.log(query);
      await API.graphql(query);
    } catch (error) {
      console.log(error);
    }
  }

  render() {
    if (this.props.authState !== 'signedIn') {
      return null;
    }
    // ...
  }
}

The code has been simplified a bit, but the only thing missing is the authenticator which works perfectly fine.

My dependencies are:

  "dependencies": {
    "aws-amplify": "^1.0.8",
    "aws-amplify-react-native": "^1.0.8",
    "native-base": "^2.8.0",
    "react": "16.4.1",
    "react-native": "0.56.0"
  },

Any idea why this might be happening?

Thanks,
Gary

[demsey2]

I have the same issue, did you find a solution?

I also looked at the source of that error "In this environment the target of assign MUST be an object. This error is a performance optimization and not spec compliant.". It comes from node_modules/react-native/Libraries/polyfills/Object.es6.js

and this is a comment for that polyfill

// WARNING: This is an optimized version that fails on hasOwnProperty checks
// and non objects. It's not spec-compliant. It's a perf optimization.
// This is only needed for iOS 8 and current Android JSC.

so it looks like aws-amplify uses Object.assign properly but for some reasons that polyfill is used. I am not sure how to skip that polyfill, I don't need to support IOS8 and Android JSC.

I checked that polyfill and it looks like it has been fixed and now is spec-compliant
https://github.com/facebook/react-native/commit/966bb63a80750757dc7a78d7d1f8960a2d8e25e0#diff-cb5173a6f8d88f7801f5127b94bfc330

so anyone with the problem should upgrade to react-native 0.57 and confirm if that helps to solve the issue, in my case I use Expo and the latest supported RN is 0.55.4 so I need to wait for the next Expo release

[kacpermigala]

I updated react-native to version 0.57.1 and still got the same issue as you have.

[demsey2]

do you use expo? if yes the latest version still requires the older version of RN.

[kacpermigala]

No, I'm not using expo, I use the android virtual device to run an application in dev environment.

[demsey2]

make sure node_modules/react-native/Libraries/polyfills/Object.es6.js is spec-compliant if not remove Object.assign from
node_modules/@aws-amplify/api/lib/API.js: 2

[abwalls]

I too am having the exact same issue calling the GraphQL API from inside my react-native/aws amplify app using expo. On another forum I read someone had some success after turning debug mode off, but I'm still trying to find a better solution. Will probably start using Apollo instead if no fix has been found. Also can anyone explain the advantage of using GraphQL with Lambda functions vs just GraphQL I'm still very new to AWS...

[adamsythe]

I manually edited the node modules file so it looks like this commit
facebook/react-native@966bb63#diff-cb5173a6f8d88f7801f5127b94bfc330
And it worked perfectly. However manually editing node modules isnt a solution as i cant publish the app now as it rebundles the node modules. Is there a way to overwrite the node module polyfil in code?

[marcoazn89]

Any updates on this?

[lissau]

The commit that @adamsythe mentioned is released with react-native v59.8.
Updating to that version might fix the issue.

I solved my issue by setting __DEV__=false, which then ignores the non-compliant Object.assign. I did this by simply shaking my android->dev settings and disable js dev mode

[adamsythe]

Ive updated and everything works now

[lissau]

Great. Thank you for the feedback.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.