Amplify-js: Uncaught TypeError: Cannot read property 'call' of undefined

[aiwarrior]

I have followed the examples provided

https://aws-amplify.github.io/docs/js/react

I have followed the example as described used NPM to run create react app
The default application builds and deploys locally correctly, I see the login screen after adding the export for Auth,

When I deploy the app using amplify publish the app launches in the browser and I get the error as below. in the browser console (chrome development tools console output.

Uncaught TypeError: Cannot read property 'call' of undefined
    at t (bootstrap 5c140274a50781a54576:19)
    at Object.<anonymous> (index.js:13)
    at Object.<anonymous> (main.b924907d.js:85044)
    at Object.<anonymous> (main.b924907d.js:54)
    at t (bootstrap 5c140274a50781a54576:19)
    at Object.<anonymous> (main.b924907d.js:85044)
    at Object.<anonymous> (main.b924907d.js:54)
    at t (bootstrap 5c140274a50781a54576:19)
    at Object.<anonymous> (browserHashUtils.js:1)
    at t (bootstrap 5c140274a50781a54576:19)

The only changes I have made to the default app is the ones specified by the installation instructions provided on the page
https://aws-amplify.github.io/docs/js/react
amplify --version
0.1.45
node --version
v10.15.1
Mac OS: 10.13.6 (17G5019)
npm create-react-app --version
6.4.1

package.json {
  "name": "bella",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "aws-amplify": "^1.1.19",
    "aws-amplify-react": "^2.3.0",
    "fsevents": "^1.2.4",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "0.9.5"
  },
  "devDependencies": {},
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Amplify from 'aws-amplify';
import awsmobile from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react';
Amplify.configure(awsmobile);

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default withAuthenticator(App, true);

I did get an error when running warnings when running NPM install after creating the app
npm install as these are optional dependancies i ignored them. I got similare errors when i did this on a windows machine and it did not affect the amplify publish I was able to see the app in the s3 bucket with Auth package.

> [email protected] install /Users/AIWarrior/Work/react/aws-create/bella/bella/node_modules/react-scripts/node_modules/fsevents
> node-pre-gyp install --fallback-to-build

node-pre-gyp info it worked if it ends with ok
node-pre-gyp verb cli [ '/usr/local/bin/node',
node-pre-gyp verb cli   '/Users/AIWarrior/Work/react/aws-create/bella/bella/node_modules/react-scripts/node_modules/fsevents/node_modules/.bin/node-pre-gyp',
node-pre-gyp verb cli   'install',
node-pre-gyp verb cli   '--fallback-to-build' ]
node-pre-gyp info using [email protected]
node-pre-gyp info using [email protected] | darwin | x64
node-pre-gyp verb command install []
node-pre-gyp info check checked for "/Users/AIWarrior/Work/react/aws-create/bella/bella/node_modules/react-scripts/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" (not found)
node-pre-gyp http GET https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.0.17/fse-v1.0.17-node-v64-darwin-x64.tar.gz
node-pre-gyp http 404 https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.0.17/fse-v1.0.17-node-v64-darwin-x64.tar.gz
node-pre-gyp ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.0.17/fse-v1.0.17-node-v64-darwin-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v64 ABI) (falling back to source compile with node-gyp)
node-pre-gyp http 404 status code downloading tarball https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.0.17/fse-v1.0.17-node-v64-darwin-x64.tar.gz
node-pre-gyp verb command build [ 'rebuild' ]
node-pre-gyp ERR! Tried to download(undefined): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.0.17/fse-v1.0.17-node-v64-darwin-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v64 ABI) (falling back to source compile with node-gyp)
node-pre-gyp http Connection closed while downloading tarball file
node-pre-gyp verb command build [ 'rebuild' ]
  SOLINK_MODULE(target) Release/.node
  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  CXX(target) Release/obj.target/fse/fsevents.o
In file included from In file included from ../fsevents.cc:85../fsevents.cc:
:85:
../src/methods.cc:14:12: ../src/methods.cc:14warning:: 12: warning: 'Call' is 'Call'deprecated  [-Wdeprecated-declarations]is
 deprecated [-Wdeprecated-declarations]
  handler->Call(3, argv);  handler->Call(3, argv);

           ^           ^

../../../../nan/nan.h:1673:3:../../../../nan/nan.h :1673:note3: : 'Call' has notebeen : explicitly marked'Call' deprecated  hashere
been explicitly marked deprecated here
  NAN_DEPRECATED inline v8::Local<v8::Value>
  ^
  NAN_DEPRECATED inline v8::Local<v8::Value>../../../../nan/nan.h:
103:40:  ^
note: expanded from macro 'NAN_DEPRECATED'../../../../nan/nan.h
:103:40: note: # define NAN_DEPRECATED __attribute__((deprecated))expanded
 from                                       ^
 macro 'NAN_DEPRECATED'
# define NAN_DEPRECATED __attribute__((deprecated))
                                       ^
1 warning generated.
1 warning generated.
rm: ./Release/.deps/Release/obj.target/fse/fsevents.o.d.raw: No such file or directory
make: *** [Release/obj.target/fse/fsevents.o] Error 1
gyp  SOLINK_MODULE(target) Release/fse.node
 ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:189:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
gyp ERR! System Darwin 17.7.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--module=/Users/AIWarrior/Work/react/aws-create/bella/bella/node_modules/react-scripts/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" "--module_name=fse" "--module_path=/Users/AIWarrior/Work/react/aws-create/bella/bella/node_modules/react-scripts/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64"
gyp ERR! cwd /Users/AIWarrior/Work/react/aws-create/bella/bella/node_modules/react-scripts/node_modules/fsevents
gyp ERR! node -v v10.15.1
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/AIWarrior/Work/react/aws-create/bella/bella/node_modules/react-scripts/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node --module_name=fse --module_path=/Users/AIWarrior/Work/react/aws-create/bella/bella/node_modules/react-scripts/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/AIWarrior/Work/react/aws-create/bella/bella/node_modules/react-scripts/node_modules/fsevents/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:189:13)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:970:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
node-pre-gyp ERR! System Darwin 17.7.0
node-pre-gyp ERR! command "/usr/local/bin/node" "/Users/AIWarrior/Work/react/aws-create/bella/bella/node_modules/react-scripts/node_modules/fsevents/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /Users/AIWarrior/Work/react/aws-create/bella/bella/node_modules/react-scripts/node_modules/fsevents
node-pre-gyp ERR! node -v v10.15.1
node-pre-gyp ERR! node-pre-gyp -v v0.6.32
node-pre-gyp ERR! not ok
Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/AIWarrior/Work/react/aws-create/bella/bella/node_modules/react-scripts/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node --module_name=fse --module_path=/Users/AIWarrior/Work/react/aws-create/bella/bella/node_modules/react-scripts/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64' (1)
ld: warning: text-based stub file /System/Library/Frameworks//CoreFoundation.framework/CoreFoundation.tbd and library file /System/Library/Frameworks//CoreFoundation.framework/CoreFoundation are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks//CoreServices.framework/CoreServices.tbd and library file /System/Library/Frameworks//CoreServices.framework/CoreServices are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks//CFNetwork.framework/Versions/A/CFNetwork.tbd and library file /System/Library/Frameworks//CFNetwork.framework/Versions/A/CFNetwork are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/Metadata.framework/Versions/A/Metadata.tbd and library file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/Metadata.framework/Versions/A/Metadata are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/OSServices.framework/Versions/A/OSServices.tbd and library file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/OSServices.framework/Versions/A/OSServices are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/LaunchServices.tbd and library file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/LaunchServices are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/SharedFileList.framework/Versions/A/SharedFileList.tbd and library file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/SharedFileList.framework/Versions/A/SharedFileList are out of sync. Falling back to library file for linking.
  COPY /Users/AIWarrior/Work/react/aws-create/bella/bella/node_modules/react-scripts/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node
  TOUCH Release/obj.target/action_after_build.stampostinstall 728
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/react-scripts/node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: `node-pre-gyp install --fallback-to-build`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

audited 9471 packages in 20.244s
found 39 vulnerabilities (5 low, 27 moderate, 6 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

[aiwarrior]

Update:

When running the scripts with Yarn the default application will load in the s3 bucket with auth.

So the question becomes what is yarn doing that NPM is not.
The instructions say
Note This example uses yarn, but you can use npm instead.

but the npm integration with amplify seems to have an error.

[jordanranz]

I believe this is related to:
https://github.com/webpack/webpack/issues/959

create-react-app uses webpack inside of react-scripts.

I will try and reproduce.

[aiwarrior]

I worked through the webpack suggested changes, I was unable to resolve,

I think if you migrate to the newer version of webpack it may resolve the issue.

The weirdness for me was only seeing it on the aws servers after I hosted in the bucket, not locally.
I did reinstall the env a few times to get a clean system and test I got the same issue.
The create react app obfuscates the webpack configuration, I did not look deep to find the dependencies for a particular webpack version with the integration scheme and build mechanisms.

If I can be of assistance let me know.

[Desteel]

Hello. I have the same error when building the project with splitChunks in webpack. I could be wrong, but after connecting the react-hot-loader to babel problem gone. Also, when i set minChunks: 2 in the splitChunks, the problem disappeared.

const plugins = [ [ "@babel/plugin-transform-runtime", { corejs: 2, helpers: true, regenerator: true, useESModules: false } ], ["react-hot-loader/babel"] ];

[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.

[Shivank-Dev]

Probably you have configured multiple pools with the amplify inside index.js so, the quick fix of your problem is just to use amplify configuration in the component where you are integrating cognito authentication instead of index.js, if this will not resolve your problem then reverify your user pool configuration details inside your react project.

[tonai]

Hi,
I got the same issue here and I'm not doing any authentication.
The project is a simple CRUD for test that use lazy loaded components.
Here is the repo: https://github.com/tonai/react-deploy

The app works well in dev mode.
When removing aws-amplify and replacing the API with a local json-server all works fine.
Then just adding the following code in the index.js file:

import Amplify from 'aws-amplify';
Amplify.configure({});

breaks the build with error Uncaught TypeError: Cannot read property 'call' of undefined.

That's really strange because I tried to reproduce with a new create-react-app project and I wasn't able to reproduce (even with adding a lazy loaded component)...

[amopportunities]

@tonai having the same issue today. Keep us updated.

[tonai]

Ok I just upgraded my version of react-scripts from 3.4.0 to 3.4.3 and the build is working fine now.
repo updated: https://github.com/tonai/react-deploy
(I originally downgraded react-scripts to 3.4.0 because of this bug: https://github.com/facebook/create-react-app/issues/8688)