Amplify-js: fetch is not defined

[marklai1998]

I'm using amazon-cognito-auth-js with my express app

and I'm following the "case 1" example code
But it gives out "fetch is not defined" error

fetch is not defined
ReferenceError: fetch is not defined
at Client.request (C:UsersmarklOneDrivesporteasy-expressnode_modulesamazon-cognito-identity-jslibClient.js:54:5)
at CognitoUserPool.signUp (C:UsersmarklOneDrivesporteasy-expressnode_modulesamazon-cognito-identity-jslibCognitoUserPool.js:127:17)
at C:UsersmarklOneDrivesporteasy-expressroutesregister.js:24:14
at Layer.handle [as handle_request] (C:UsersmarklOneDrivesporteasy-expressnode_modulesexpresslibrouterlayer.js:95:5)
at next (C:UsersmarklOneDrivesporteasy-expressnode_modulesexpresslibrouterroute.js:137:13)
at Route.dispatch (C:UsersmarklOneDrivesporteasy-expressnode_modulesexpresslibrouterroute.js:112:3)
at Layer.handle [as handle_request] (C:UsersmarklOneDrivesporteasy-expressnode_modulesexpresslibrouterlayer.js:95:5)
at C:UsersmarklOneDrivesporteasy-expressnode_modulesexpresslibrouterindex.js:281:22
at Function.process_params (C:UsersmarklOneDrivesporteasy-expressnode_modulesexpresslibrouterindex.js:335:12)
at next (C:UsersmarklOneDrivesporteasy-expressnode_modulesexpresslibrouterindex.js:275:10)

[manueliglesias]

Hi @marklai1998

You might need a polyfill or similar, e.g. node-fetch

[marklai1998]

Where should i put the require line to?
I installed node-fetch already

[doscode-kr]

Hi @marklai1998, I got same error now.
I temporarily edited this file:
~(workspace)/node_modules/amazon-cognito-identity-js/lib/Client.js
and I added a single line code below:

var fetch = require('node-fetch'); // I added this right above UserAgent
var _UserAgent = require('./UserAgent');
...

I hope this can resolve your problem too.

[marklai1998]

Almost figurer it out before seeing your command @doscode-kr

It solves the problem directly, but it's not the right way to edit the module, right?

[buggy]

@marklai1998 Are you trying to use this in server side code? I've just spent the weekend looking at amazon-cognito-identity-js and I'm 99% sure the package is designed for use in a web browser only. From a quick look at amazon-cognito-auth-js I suspect it's also a web browser only package. You might like to create an issue over at amazon-cognito-auth-js and confirm it can be used on the server side.

[doscode-kr]

@marklai1998 Yes, you're right. I guess there was missing dependency while integrating the modules to aws-amplify.

[buggy]

If you're using it in a browser then you should probably add a fetch polyfill like https://github.com/github/fetch so that it works with older browsers.

[marklai1998]

@buggy But as a web app, the user interaction should perform via the server, isn't it?
Otherwise, the pool id and app id will open to the public, users can delete any user and modify anything.
I'm still a junior developer, First time trying coginto.
Not sure if this concept/workflow is true or not for coginto, I use database originally.

[buggy]

@marklai1998 Knowing the pool id and app id isn't enough to modify or delete other users.

[marklai1998]

@buggy So the right way of using coginto is full client-side code?

[buggy]

That's how Amplify does it.

[mlabieniec]

@marklai1998 Amazon Cognito Federated Identities was originally designed to be a solution for client side (mobile) applications and for managing multiple "identities" (social etc) via one identity pool. Amazon Cognito User Pools is a full blown user directory service. Amplify uses both, so for user creation it uses User Pools to store your users and Federated Identities as the federation service. So User Pools is actually just another IDP (identity provider) on the federated identity service.

For this particular issue, the fetch api is a browser API, and will not work in node.js since there is no web browser. That said, you could use a module like node-fetch to have the fetch api server side, but this would need to be added to the library. You could fork the library and add this for your use case, you would just need to modify the Client.js and import this module and it potentially should work although I haven't tried it.

[moander]

nodejs fix:

yarn add node-fetch

global.fetch = require('node-fetch')
const AmazonCognitoIdentity = require('amazon-cognito-identity-js');

[mlabieniec]

will get this added to the readme

[Benno007]

Would recommend adding it as a breaking change to the changelog between cognito 1.x and 2.x (on the other repo and here) as well, we didn't know because there was no mention of it and it caused an outage on IE11 for us :-1:

[fazelmk]

global.fetch = require('node-fetch') raise error as fetch does not exist in Global.

any ideas on how to do it without changing the lib code and using global?

[mlabieniec]

tracking this in #876

[davidhbigelow]

OK - THIS is a bit of a problem.

We discovered a new Error in MSIE -- which we do not test on regularly -- but we must support.

The Error is this:
'fetch' is undefined

src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">

<!-- AWS-SDK -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.243.1/aws-sdk.min.js"></script>
<script src="js/aws-cognito-identity.js" type="text/javascript"></script>

No matter what I do in the browser - (NOT USING NODE.JS FOR THIS) I can't get past the "'fetch' is undefined" error when attempting to login via Cognito.

ANYONE HAVE ANY IDEAS?!

[mlabieniec]

@davidhbigelow The version 2.x of the cognito sdk is a breaking upgrade from 1.x. It uses the browsers native fetch api instead of the aws sdk for javascript. This provides a much smaller build and simpler interface and eliminates the requirement of the entire JS sdk. See details here:
https://github.com/aws-amplify/amplify-js/tree/master/packages/amazon-cognito-identity-js#install-using-separate-javascript-file

If you require the older implementation you can still install via npm and install the 1.x version which will use the sdk to make the calls or access the old version here:
https://github.com/amazon-archives/amazon-cognito-identity-js

Or you can try using a fetch polyfill for older browsers: https://github.com/github/fetch

[davidhbigelow]

Thank you for the prompt feedback!

I read this - and tried it without success before my post.

I can only get around this error by adding another library to my list of scripts that are being loaded:

I am testing on MSIE (thanks Microsoft! - sarcasm) - and can ONLY get past this error by adding the library above.

I am testing on MSIE 11

Just for sequencing.

I am loading these libraries in the following order:
Bluebird.js
fetch.js
aws-cognito-identity.js
aws-sdk.js (v 2.284.1)
jquery 3.3.1
bootstrap 4.0
fontawesome 5.1

Any other ideas as to why this would not work without the 'fetch.js' being included?

Dave

[Q00]

I am using cognito with serverless-http app.
I encountered some error about Reference error in Cloudwatch when I request my serverless app.

ReferenceError: fetch is not defined
at Client.request (/var/task/node_modules/amazon-cognito-identity-js/lib/Client.js:55:5)
at /var/task/node_modules/amazon-cognito-identity-js/lib/CognitoUser.js:313:21
at AuthenticationHelper.getLargeAValue (/var/task/node_modules/amazon-cognito-identity-js/lib/AuthenticationHelper.js:85:7)
at CognitoUser.authenticateUserDefaultAuth (/var/task/node_modules/amazon-cognito-identity-js/lib/CognitoUser.js:291:26)
at CognitoUser.authenticateUser (/var/task/node_modules/amazon-cognito-identity-js/lib/CognitoUser.js:252:19)
at login (/var/task/src/serverless.js:277:17)
at Layer.handle [as handle_request] (/var/task/node_modules/express/lib/router/layer.js:95:5)
at next (/var/task/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/var/task/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/var/task/node_modules/express/lib/router/layer.js:95:5)

So I tried to fix this error to edit amazon_cognito_identity-js in node_modules.
But it can not be applied, so I carefully change above these commit.
https://github.com/Q00/amazon-cognito-identity-js/commit/6a907ddcbee687495bf9c3a2286480606a454b05

After change, finally I get intended response like this

message: 'User does not exist.',
code: 'UserNotFoundException',
time: 2019-01-20T19:31:41.735Z,
requestId: '0364989e-1cea-11e9-a193-affb587e0cbd',
statusCode: 400,
retryable: false,
retryDelay: 28.517921067981966 

I am junior with cognito so that I do not understand your intention perfectly.
But these commit can help me deploy and service app without error.
https://github.com/Q00/amazon-cognito-identity-js/commit/6a907ddcbee687495bf9c3a2286480606a454b05

[Kenedy01]

Hi @marklai1998, I got same error now.
I temporarily edited this file:
~(workspace)/node_modules/amazon-cognito-identity-js/lib/Client.js
and I added a single line code below:

var fetch = require('node-fetch'); // I added this right above UserAgent
var _UserAgent = require('./UserAgent');
...

I hope this can resolve your problem too.

In my service.ts file I put this line below
global['fetch'] = require('node-fetch');

[rilian]

to slightly automate the solution you can run

echo "var fetch = require('node-fetch');" >> node_modules/amazon-cognito-identity-js/lib/Client.js

after you install npm packages in your deploy script, or manually on your computer

[anthonynovatsis]

Adding the following (after installing node-fetch) worked around the issue for me:

global.fetch = require('node-fetch');

[danieloi]

started getting a 'fetch is not a function' error and this solved it for me:

global.fetch = require('node-fetch').default;