Adding push notifications after InAppMessaging breaks inAppMessaging on both react and reactNative

[ericowhadi]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React, React Native

Which UI component?

In-App Messaging

How is your app built?

Create React App

What browsers are you seeing the problem on?

Chrome, iOS (React Native), Android (React Native)

Which region are you seeing the problem in?

us-east-2

Please describe your bug.

I had installed and test successfully inAppMessaging on both my webapp and react-native apps pointing to the same backend.
Everything was fine, and end to end testing was successful.
Then I added Push notification using amplify update notifications to add FCM push notification
React native apps build fine.
But now, as soon as I hit the in-app messaging code in ether of webapp or react-native app, I am getting error message Missing application id.
Looking at the amplifyconfiguration.json, appId for InAppMessaging is present and correct on both react-native and web app.
Now, I narrowed down the problem:
The additional section in "Notifications" of amplifyconfiguration.json that was added by the addition of FCM push notification is causing the bad behavior:
If I delete this section manually, inAppMessaging start working again and does not complain about missing appId. Obviously this is not an acceptable workaround, but a lead to where the problem is located...

What's the expected behaviour?

should be able to have both inAppMessaging and Push notification without problem

Help us reproduce the bug!

add both inAppMessaging and Push notification on same project (altered appId for data privacy)

Bad amplifconfiguration.json (It looks correct but the code breaks when using it)

"Analytics": {
    "AWSPinpoint": {
      "appId": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      "region": "us-east-2"
    }
  },
  "Notifications": {
    "Push": {
      "AWSPinpoint": {
        "appId": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        "region": "us-east-2"
      }
    },
    "InAppMessaging": {
      "AWSPinpoint": {
        "appId": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        "region": "us-east-2"
      }
    }
  },

Good one (except that now obviously Push notification cannot work):

"Analytics": {
    "AWSPinpoint": {
      "appId": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      "region": "us-east-2"
    }
  },
  "Notifications": {
    "InAppMessaging": {
      "AWSPinpoint": {
        "appId": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        "region": "us-east-2"
      }
    }
  },

Code Snippet

// Put your code below this line.

Console log output

No response

Additional information and screenshots

No response

[calebpollman]

@ericowhadi Thanks for raising this issue. Transferring over to Amplify JS for triage

[nadetastic]

HI @ericowhadi thank you for raising this issue. Just to get some clarification:

• Is this issue happening on both ReactNative and Web applications?
• Is your React Native application using Expo or the React Native CLI?
• Could you share you package.json or clarify what version of aws-amplify you are using?

The reason I ask is that Push Notifications is only supported on applications created via React Native CLI - https://docs.amplify.aws/react-native/build-a-backend/push-notifications/set-up-push-notifications/

[ericowhadi]

yes this issue is happening on both react-native and web applications. And the workaround of deleting the Push section in amplifyconfiguration.json works on both react-native and webapp.
I am using REact NAtive CLI
package.json on webapp:

{
  "name": "xxxxxxx",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/auth": "^6.0.10",
    "@aws-amplify/core": "^6.0.10",
    "@aws-amplify/ui-react": "^6.0.7",
    "@aws-amplify/ui-react-notifications": "^2.0.9",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "aws-amplify": "^6.0.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

package.json for the react-native:

{
  "name": "xxxxxxnative",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@aws-amplify/auth": "^6.0.12",
    "@aws-amplify/react-native": "^1.0.11",
    "@aws-amplify/rtn-push-notification": "^1.2.13",
    "@aws-amplify/rtn-web-browser": "^1.0.11",
    "@aws-amplify/ui-react-native": "^2.1.0",
    "@react-native-async-storage/async-storage": "^1.21.0",
    "@react-native-community/netinfo": "^11.2.1",
    "aws-amplify": "^6.0.11",
    "react": "18.2.0",
    "react-native": "0.73.2",
    "react-native-device-info": "^10.12.0",
    "react-native-geolocation-service": "^5.3.1",
    "react-native-get-random-values": "^1.10.0",
    "react-native-localize": "^3.0.6",
    "react-native-permissions": "^4.0.4",
    "react-native-safe-area-context": "^4.8.2",
    "react-native-url-polyfill": "^2.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.19",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.3",
    "@react-native/typescript-config": "0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

[nadetastic]

Thank you @ericowhadi Im working to get this reproduced/identify the root issue and will follow up soon.

[jimblanc]

The fix for this issue has been released with Amplify JS v6.0.15. Please let us know if you're run into any other issues!

[ericowhadi]

Thanks, it now works like a charm. Thanks for the quick turn around.