"undefined is not an object" when importing Notifications library

[carlos-lao]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React Native

Amplify APIs

Push Notifications

Amplify Categories

notifications

Environment information

``` System: OS: macOS 13.4 CPU: (10) arm64 Apple M1 Pro Memory: 3.07 GB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.3.1 - /opt/homebrew/bin/node npm: 9.8.1 - /opt/homebrew/bin/npm Watchman: 2023.06.12.00 - /opt/homebrew/bin/watchman Browsers: Chrome: 116.0.5845.96 Safari: 16.5 npmPackages: @aws-sdk/client-cognito-identity: ^3.171.0 => 3.171.0 (3.6.1) @babel/core: ^7.20.0 => 7.21.0 @babel/preset-env: ^7.20.0 => 7.20.2 @babel/runtime: ^7.20.0 => 7.21.0 @bam.tech/react-native-image-resizer: ^3.0.4 => 3.0.4 @bam.tech/react-native-make: ^3.0.3 => 3.0.3 @miblanchard/react-native-slider: ^2.3.1 => 2.3.1 @react-native-async-storage/async-storage: ^1.17.11 => 1.19.2 @react-native-community/cli-platform-ios: ^9.2.1 => 9.2.1 (10.2.1) @react-native-community/eslint-config: ^2.0.0 => 2.0.0 @react-native-community/netinfo: ^9.3.0 => 9.4.1 @react-native-community/slider: ^4.3.3 => 4.3.3 @react-native-firebase/analytics: ^17.4.2 => 17.4.2 @react-native-firebase/app: ^17.4.2 => 17.4.2 @react-native-firebase/installations: ^17.4.2 => 17.4.2 @react-native-masked-view/masked-view: ^0.2.8 => 0.2.8 @react-navigation/native: ^6.1.6 => 6.1.6 @react-navigation/native-stack: ^6.9.12 => 6.9.12 @tsconfig/react-native: ^2.0.2 => 2.0.3 @types/jest: ^29.2.1 => 29.4.0 @types/react: ^18.0.24 => 18.0.28 @types/react-test-renderer: ^18.0.0 => 18.0.0 HelloWorld: 0.0.1 amazon-cognito-identity-js: ^5.2.10 => 5.2.14 aws-amplify: ^4.3.35 => 4.3.46 axios: ^0.27.2 => 0.27.2 (0.26.0) babel-jest: ^29.2.1 => 29.4.3 bad-words: ^3.0.4 => 3.0.4 eslint: 7.32.0 => 7.32.0 eslint-plugin-react-native: ^4.0.0 => 4.0.0 (3.11.0) jest: ^29.2.1 => 29.4.3 metro-react-native-babel-preset: ^0.73.7 => 0.73.9 moment: ^2.29.4 => 2.29.4 moment-business-days: ^1.2.0 => 1.2.0 moment-timezone: ^0.5.38 => 0.5.38 prettier: ^2.4.1 => 2.7.1 react: 18.2.0 => 18.2.0 react-native: 0.71.7 => 0.71.7 react-native-camera-kit: ^13.0.0 => 13.0.0 react-native-confetti-cannon: ^1.5.2 => 1.5.2 react-native-fs: ^2.20.0 => 2.20.0 react-native-haptic-feedback: ^1.14.0 => 1.14.0 react-native-in-app-review: ^4.3.3 => 4.3.3 react-native-linear-gradient: ^2.6.2 => 2.6.2 react-native-markdown-display: ^7.0.0-alpha.2 => 7.0.0-alpha.2 react-native-permissions: ^3.8.0 => 3.8.0 react-native-plaid-link-sdk: ^10.1.0 => 10.1.0 react-native-safe-area-context: ^4.5.0 => 4.5.0 react-native-sass-transformer: ^2.0.0 => 2.0.0 react-native-screens: ^3.20.0 => 3.20.0 react-native-tracking-transparency: ^0.1.2 => 0.1.2 react-native-webview: ^11.26.1 => 11.26.1 react-test-renderer: 18.2.0 => 18.2.0 react-tracked: ^1.7.10 => 1.7.10 sass: ^1.54.5 => 1.54.9 scheduler: ^0.23.0 => 0.23.0 typescript: 4.8.4 => 4.8.4 npmGlobalPackages: @aws-amplify/cli: 12.1.1 @expo/ngrok: 4.1.0 bower: 1.8.14 expo-cli: 6.3.2 ios-deploy: 1.12.2 npm: 9.8.1 react-native-cli: 2.0.1 serverless: 3.32.2 sql-cli: 0.6.2 ```

Describe the bug

Getting the error undefined is not an object (evaluating '_awsAmplify.Notifications.Push') when attempting to import Notifications from aws-amplify despite having followed the steps for setting up push notifications for iOS in React Native according to this link. The error points to a call to Notifications.Push.enable(). Notifications also cannot be found in node_modules/aws-amplify/lib-esm/index.d.ts.

Expected behavior

Notifications is successfully imported and usable.

Reproduction steps

1. Set up Push Notifications for iOS in React Native according to these instructions
2. Run the application with npm start --reset-cache and npm run ios

Code Snippet

// Put your code below this line.
import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';
import {AppRegistry, LogBox} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import {Amplify, Notifications} from 'aws-amplify';
import awsconfig from './src/aws-exports';

LogBox.ignoreLogs(['Require cycle']);

Amplify.configure(awsconfig);
Notifications.Push.enable();

AppRegistry.registerComponent(appName, () => App);

Log output

``` // Put your logs below this line WARN Require cycle: js/CompanyState.js -> js/CompanyAPI.js -> js/CompanyState.js Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. ERROR TypeError: undefined is not an object (evaluating '_awsAmplify.Notifications.Push') LOG Running "Company" with {"rootTag":1,"initialProps":{}} ERROR Invariant Violation: "Company" has not been registered. This can happen if: * Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project. * A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called. ```

aws-exports.js

const awsmobile = {
    "aws_project_region": "us-east-1",
    "aws_cognito_identity_pool_id": "us-east-1:054ed320-625e-4e73-9627-2e75608913ae",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "us-east-1_30cVyL2JD",
    "aws_user_pools_web_client_id": "6lth0ekit1fkudojpsbprj4c",
    "oauth": {},
    "aws_cognito_username_attributes": [
        "PHONE_NUMBER"
    ],
    "aws_cognito_social_providers": [],
    "aws_cognito_signup_attributes": [
        "NAME",
        "PHONE_NUMBER"
    ],
    "aws_cognito_mfa_configuration": "OFF",
    "aws_cognito_mfa_types": [
        "SMS"
    ],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyMinLength": 8,
        "passwordPolicyCharacters": []
    },
    "aws_cognito_verification_mechanisms": [
        "PHONE_NUMBER"
    ],
    "aws_mobile_analytics_app_id": "23051eb260724f169fece9ab1c6e497e",
    "aws_mobile_analytics_app_region": "us-east-1",
    "Analytics": {
        "AWSPinpoint": {
            "appId": "23051eb260724f169fece9ab1c6e497e",
            "region": "us-east-1"
        }
    },
    "Notifications": {
        "Push": {
            "AWSPinpoint": {
                "appId": "23051eb260724f169fece9ab1c6e497e",
                "region": "us-east-1"
            }
        }
    }
};

export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[cwomack]

Hello, @carlos-lao and thanks for opening this issue. After looking at your dependencies, it appears you might be on v4.3.46 of Amplify. Push Notifications likely won't work on v4.x of Amplify, but if you upgrade to the latest version (v5.3.10) that should help fix things!

Once you've upgraded, it wouldn't hurt to also delete your node_modules folder as well as your package-lock.json file if you have one. Then reinstall your dependencies with npm install. Let me know if these steps help resolve the issue!

[raza-jamil-reckon]

@cwomack

Hello, @carlos-lao and thanks for opening this issue. After looking at your dependencies, it appears you might be on v4.3.46 of Amplify. Push Notifications likely won't work on v4.x of Amplify, but if you upgrade to the latest version (v5.3.10) that should help fix things!

Once you've upgraded, it wouldn't hurt to also delete your node_modules folder as well as your package-lock.json file if you have one. Then reinstall your dependencies with npm install. Let me know if these steps help resolve the issue!

I have the same issue when trying it on react-native ios. I'm on latest amplify version (5.3.10), @aws-amplify/rtn-push-notification (1.1.6) and react-native (0.71.1). Following this guide: https://docs.amplify.aws/lib/push-notifications/getting-started/q/platform/react-native

I've tried clean installs etc but no luck.

Any idea?

[mingc]

@cwomack I also got a similar problem with Amplify's push notification with React Native and run Android.

Android app builds okay but it throws runtime error when loading index.js

ERROR [ERROR] 17:20.622 Notifications [Error: Unable to find @aws-amplify/rtn-push-notification. ] ERROR TypeError: undefined is not a function, js engine: hermes

OS: macOS 13.5.2 (22G91) Node: v20.0.0 Packages: "dependencies": { "@aws-amplify/auth": "^5.6.0", "@aws-amplify/rtn-push-notification": "^1.1.7", "@aws-amplify/ui-react-native": "^1.2.23", "@expo/vector-icons": "^13.0.0", "@react-native-async-storage/async-storage": "^1.19.3", "@react-native-community/masked-view": "^0.1.11", "@react-native-community/netinfo": "^9.4.1", "@react-navigation/bottom-tabs": "^6.5.8", "@react-navigation/material-bottom-tabs": "^6.2.16", "@react-navigation/native": "^6.1.7", "@react-navigation/stack": "^6.3.17", "@reduxjs/toolkit": "^1.9.5", "@types/react-redux": "^7.1.26", "@types/redux": "^3.6.0", "amazon-cognito-identity-js": "^6.3.6", "aws-amplify": "^5.3.11", "axios": "^1.5.0", "expo-contacts": "^12.2.0", "expo-modules-core": "^1.5.9", "native-base": "^3.4.28", "react": "18.2.0", "react-native": "0.71.10", "react-native-elements": "^3.4.3", "react-native-gesture-handler": "^2.12.1", "react-native-get-random-values": "^1.9.0", "react-native-modal": "^13.0.1", "react-native-paper": "^5.9.1", "react-native-reanimated": "^3.4.2", "react-native-safe-area-context": "^4.7.1", "react-native-screens": "^3.24.0", "react-native-sqlite-storage": "^6.0.1", "react-native-url-polyfill": "^2.0.0", "react-native-vector-icons": "^10.0.0", "react-navigation": "^4.4.4", "react-redux": "^8.1.2", "redux": "^4.2.1", "redux-persist": "^6.0.0", "redux-thunk": "^2.4.2", "sqlite3": "^5.1.6", "typeorm": "^0.3.17" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native-community/eslint-config": "^3.2.0", "@tsconfig/react-native": "^2.0.2", "@types/jest": "^29.2.1", "@types/react": "^18.0.24", "@types/react-native-sqlite-storage": "^6.0.0", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.2.1", "eslint": "^8.19.0", "jest": "^29.2.1", "metro-react-native-babel-preset": "0.73.9", "prettier": "^2.4.1", "react-test-renderer": "18.2.0", "typescript": "4.8.4" }

@aws-amplify/rtn-push-notification installs successfully but it seems it couldn't initialised at start-up.

Tried everything as per the docs: https://docs.amplify.aws/lib/push-notifications/getting-started/q/platform/react-native/#initialize-amplify-push-notifications https://docs.amplify.aws/lib/push-notifications/migrate-from-previous-version/q/platform/react-native/

Can you please advise? Thank you!

[ilyatsykunov]

Hi, I'm also experiencing this problem using "aws-amplify": "5.3.12" Any news @carlos-lao @mingc @raza-jamil-reckon ?

[mingc]

Sorry guys, forgot to update here. This error is gone and Amplify Push Notification works end-to-end if I start the app from Android Studio (it manages to find @aws-amplify/rtn-push-notification). It's certainly not just my machine or environment as I tried to start fresh with a clean project and other team mates also tried on their dev machines, all facing the same problem, until we launched the app directly from Android Studio (as opposed to npm run android).

[ilyatsykunov]

@mingc I assume the issue in our case is the incompatibility of Expo with Amplfy's push notifications, as I wasn't able to get rid of this error on neither Android nor iOS.

[simcoder]

this is due to @amplify package looking for "Push" from the config. However, the config type has "PushNotification", hence the empty Push object.

here is my workaround.. it is not pretty but it will work until @amplify team releases fix..

[cwomack]

Wanted to give an update to anyone following this issue and provide some clarity. In v5 of Amplify, it is recommended to use the React Native CLI for Push Notifications due to Expo not being supported out of the box.

However, it does appear that in v5 our type is wrong as @simcoder pointed out above and we’ll mark this as a bug. Note, this bug should only be happening when you are attempting to write your own config and calling Amplify.configure().

[metmos]

Just wanted to share - Amplify V6 is all good. In case anyone still get stuck on this, probably think about upgrading it.

[R70YNS]

I've tried to implement @mingc's workaround within an application using Amplify version 4.X but received the error: TypeError: undefined is not an object (evaluating '_awsAmplify.Notifications.configure'). Presumably this is due to Amplify 4.X being used as mentioned by @cwomack.