search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.44k stars 2.13k forks source link

aws-sdk nodeJS dependecies breaks Amplify support to react-native. #11747

Closed VitorFigm closed 1 year ago

VitorFigm commented 1 year ago

Before opening, please confirm:

JavaScript Framework

React Native

Amplify APIs

Not applicable

Environment information

``` System: OS: Linux 6.4 Pop!_OS 22.04 LTS CPU: (4) x64 AMD Ryzen 3 3200G with Radeon Vega Graphics Memory: 13.29 GB / 21.40 GB Container: Yes Shell: 3.3.1 - /usr/bin/fish Binaries: Node: 18.16.0 - /usr/local/bin/node Yarn: 3.6.1 - /usr/local/bin/yarn npm: 9.8.0 - /usr/local/bin/npm pnpm: 8.6.12 - /usr/local/bin/pnpm npmPackages: react-native-url-polyfill: ^2.0.0 => 2.0.0 npmGlobalPackages: @aws-amplify/cli: 12.2.3 corepack: 0.17.0 eas-cli: 3.15.1 n: 9.1.0 npm: 9.8.0 serverless: 3.33.0 ```

Describe the bug

I have already found the solution to this bug and am sharing it here to help others who are trying to use Amplify with React Native and Expo.

Problem

When you attempt to follow the official docs on how to set up the Amplify backend, it instructs you to do the following:

import { Amplify } from 'aws-amplify';
import awsExports from './src/aws-exports';
Amplify.configure(awsExports);

However, this leads to the following error when using it with "expo": "^48.0.7":

Web Bundling failed 15242ms
The package at "../../node_modules/@aws-sdk/client-lex-runtime-service/node_modules/@aws-sdk/hash-node/dist-cjs/index.js" attempted to import the Node standard library module "crypto".
It failed because the native React runtime does not include the Node standard library.

How to solve this?

To resolve the issue, change this line:

import { Amplify } from 'aws-amplify';

To this:

import { Amplify } from '@aws-amplify/core';

What is the problem?

Importing "aws-amplify" causes React Native to analyze the dependencies from @aws-sdk, and it will complain about Node.js module imports, even though the front end doesn't need them.

Changes in Amplify

The solution to the problem, in general, is to update the docs to make people import from "@aws-amplify/core".

Expected behavior

React native should not complain about nodeJS modules.

Reproduction steps

Follow those steps

Code Snippet

No response

Log output

``` Logs for your project will appear below. Press Ctrl+C to exit. Web Bundling failed 15242ms The package at "../../node_modules/@aws-sdk/client-lex-runtime-service/node_modules/@aws-sdk/hash-node/dist-cjs/index.js" attempted to import the Node standard library module "crypto". It failed because the native React runtime does not include the Node standard library. ```

aws-exports.js


const awsmobile = {
    "aws_project_region": "*",
    "aws_cognito_identity_pool_id": "*",
    "aws_cognito_region": "*",
    "aws_user_pools_id": "*",
    "aws_user_pools_web_client_id": "*",
    "oauth": {},
    "aws_cognito_username_attributes": [
        "EMAIL"
    ],
    "aws_cognito_social_providers": [],
    "aws_cognito_signup_attributes": [],
    "aws_cognito_mfa_configuration": "OFF",
    "aws_cognito_mfa_types": [
        "SMS"
    ],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyMinLength": 8,
        "passwordPolicyCharacters": [
            "REQUIRES_LOWERCASE",
            "REQUIRES_NUMBERS",
            "REQUIRES_SYMBOLS",
            "REQUIRES_UPPERCASE"
        ]
    },
    "aws_cognito_verification_mechanisms": [
        "EMAIL"
    ]
};

export default awsmobile;

Additional information and screenshots

My package.json:

  "dependencies": {
    "@aws-amplify/ui-react-native": "^1.2.23",
    "@react-native-async-storage/async-storage": "^1.19.1",
    "@react-native-community/netinfo": "^9.4.1",
    "@react-native-masked-view/masked-view": "0.2.8",
    "@rneui/base": "^4.0.0-rc.7",
    "@rneui/themed": "^4.0.0-rc.7",
    "@shopify/flash-list": "^1.5.0",
    "@types/react": "~18.0.27",
    "amazon-cognito-identity-js": "^6.3.1",
    "aws-amplify": "^5.3.6",
    "expo": "^48.0.7",
    "expo-constants": "~14.2.1",
    "expo-linear-gradient": "~12.1.2",
    "expo-linking": "~4.0.1",
    "expo-router": "^1.2.0",
    "expo-splash-screen": "~0.18.1",
    "expo-status-bar": "~1.4.2",
    "expo-updates": "~0.16.4",
    "observable-hooks": "^4.2.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.45.1",
    "react-native": "0.71.3",
    "react-native-calendars": "^1.1299.0",
    "react-native-emoji": "^1.8.0",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-get-random-values": "^1.9.0",
    "react-native-reanimated": "~2.14.4",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-svg": "13.4.0",
    "react-native-url-polyfill": "^2.0.0",
    "react-native-web": "~0.18.7",
    "rxjs": "^7.8.1"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@types/jest": "^29.5.3",
    "jest": "^29.6.2",
    "jest-mock-extended": "^3.0.5",
    "typescript": "^4.9.4"
  },
  "resolutions": {
    "metro": "^0.73.7",
    "metro-resolver": "^0.73.7"
  },
  "overrides": {
    "metro": "^0.73.7",
    "metro-resolver": "^0.73.7"
  },
cwomack commented 1 year ago

@VitorFigm, thank you for opening this issue. We are looking into this and trying to reproduce the dependency errors that you're experiencing. It looks like the page to the documentation that you referenced for the reproduction steps leads to a 404. Was this related to just following the steps within the React Native tutorial?

cwomack commented 1 year ago

Closing this issue as we have not heard back from you. If you are still experiencing this, please feel free to reply back and provide any information previously requested and we'd be happy to re-open the issue.

Thank you!

VitorFigm commented 3 months ago

Sorry for the 1 year delayed answer. I was looking at the code recently and I found that, for some strange unknown reason imports like "@aws-amplify/core" and even other libs that follow the pattern "@aws-amplify/*" weren't using the same version exposed by the root "aws-amplify" package. For some reason, when I try to reproduce this problem now, this problem never happens again (when I posted this issue, even new projects used to use divergent versions).