React-native | CognitoIdentityProviderClient | Unable to resolve module stream

roserens commented 1 year ago

Checkboxes for prior research

[X] I've gone through Developer Guide and API reference
[X] I've checked AWS Forums and StackOverflow.
[X] I've searched for previous similar issues and didn't find any solution.

Describe the bug

Yesterday I updated my react-native app to version 0.72.0. Since then I get issues that modules can't be resolved when I try to run the Android emulator.

SDK version number

@aws-sdk/client-cognito-identity-provider@3.358.0

Which JavaScript Runtime is this issue in?

React Native

Details of the browser/Node.js/ReactNative version

0.72.0

Reproduction Steps

Reproduction steps

1) Install react native & aws sdk:

npx react-native@latest init Project --template react-native-template-typescript
npm install @aws-sdk/client-cognito-identity-provider

2) Add the following to the import section of to App.tsx:

    import {
        CognitoIdentityProviderClient,
        InitiateAuthCommandInput,
        InitiateAuthCommand,
        AuthFlowType
    } from "@aws-sdk/client-cognito-identity-provider";
    const region = "us-east-1";
    const cognitoClient = new CognitoIdentityProviderClient({
        region,
    });

3) Add the following code to the App function:

    const params: InitiateAuthCommandInput = {
        ClientId: "clientId",
        AuthFlow: AuthFlowType.USER_PASSWORD_AUTH,
        AuthParameters: {
            USERNAME: "username",
            PASSWORD: "password",
        },
    };
    const initiateAuthCommand = new InitiateAuthCommand(params);

    cognitoClient.send(initiateAuthCommand)

4) Then run the following commands:

npm start
npm run android

Observed Behavior

App does no longer launch. It gets the following error message:

Expected Behavior

App launches w/o error message.

Possible Solution

The simple solution seems to install the "stream" package. But then another module can't be loaded. Until it says it can't load the module "http". And then I didn't know what to do anymore.

Note that one month ago I didn't have any of those issues.

Additional Information/Context

Another user with a similar issue: https://github.com/aws/aws-sdk-js-v3/issues/3549

Unfortunately he didn't say how he solved his issue.

lazamius commented 1 year ago

Have similar problem with @aws-sdk/client-iot (version 3.360.0) in React Native project:

Android Bundling failed 3629ms The package at "node_modules\@aws-sdk\client-iot\node_modules\@aws-sdk\util-stream\dist-cjs\getAwsChunkedEncodingStream.js" attempted to import the Node standard library module "stream". It failed because the native React runtime does not include the Node standard library.

yenfryherrerafeliz commented 1 year ago

Hi @roserens, @lazamius, while we investigate this, a possible workaround to this issue is to pin your SDK version to 3.356.

Thanks!

ghost commented 1 year ago

Hi @roserens, @lazamius, while we investigate this, a possible workaround to this issue is to pin your SDK version to 3.356.

Thanks!

I am having the same issue and i still get the same error after changing the sdk version. Edit: Ok so i got this to work with the help of @yenfryherrerafeliz. the version he provided 3.356 doesn't exist. using this: 3.354.0 version for the sdk worked for me

celestk commented 1 year ago

Hi Team, I am also having similar issues with @aws-sdk/client-ssm@3.361.0

error: Error: Unable to resolve module stream from /......./node_modules/@aws-sdk/util-stream/dist-cjs/getAwsChunkedEncodingStream.js: stream could not be found within the project or in these directories:
  node_modules
  2 | Object.defineProperty(exports, "__esModule", { value: true });
  3 | exports.getAwsChunkedEncodingStream = void 0;
> 4 | const stream_1 = require("stream");
    |                           ^
  5 | const getAwsChunkedEncodingStream = (readableStream, options) => {
  6 |     const { base64Encoder, bodyLengthChecker, checksumAlgorithmFn, checksumLocationName, streamHasher } = options;
  7 |     const checksumRequired = base64Encoder !== undefined &&

yenfryherrerafeliz commented 1 year ago

Hi @celestk, please see comment from @nivohayon-MSAPPS. Pining your version to 3.354.0 should workaround the issue. I am currently investigating how to mitigate this so that I should provide updates soon on this thread.

Thanks!

kuhe commented 1 year ago

Ensure that your bundler application is following the replacement directives in https://github.com/aws/aws-sdk-js-v3/blob/main/packages/util-stream/package.json#L58-L61. I haven't used any bundlers lately, but I believe some are automatic (webpack?) and if not, this is configurable.

  "react-native": {
    "./dist-es/getAwsChunkedEncodingStream": "./dist-es/getAwsChunkedEncodingStream.browser",
    "./dist-es/sdk-stream-mixin": "./dist-es/sdk-stream-mixin.browser"
  },

When doing so, stream will not be required for your application. Do not install stream from NPM, because it is a different package from the Node.js built-in stream, which in any case is not needed.

roserens commented 1 year ago

Hi @roserens, @lazamius, while we investigate this, a possible workaround to this issue is to pin your SDK version to 3.356.

Thanks!

@yenfryherrerafeliz

This works well for the "simple" demo case, which I constructed to showcase the error.

But when I run my full project with the following dependencies, the error still happens.

{ "name": "skelly", "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", "i18n": "node src/i18n/generate_i18n.js", "crowdin": "crowdin download && node src/i18n/generate_i18n.js" }, "dependencies": { "@apollo/client": "^3.7.10", "@aws-appsync/utils": "^1.2.4", "@aws-sdk/chunked-blob-reader-native": "3.310.0", "@aws-sdk/client-appsync": "3.344.0", "@aws-sdk/client-cognito-identity-provider": "3.344.0", "@aws-sdk/client-lambda": "3.344.0", "@aws-sdk/credential-providers": "3.344.0", "@aws-sdk/lib-dynamodb": "3.344.0", "@aws-sdk/node-http-handler": "3.344.0", "@react-native-async-storage/async-storage": "^1.18.0", "@react-native-community/datetimepicker": "^7.0.1", "@react-native-community/netinfo": "^9.3.9", "@react-native-firebase/analytics": "^17.4.3", "@react-native-firebase/app": "^17.4.3", "@react-navigation/bottom-tabs": "^6.5.7", "@react-navigation/drawer": "^6.6.2", "@react-navigation/native": "^6.1.6", "@react-navigation/native-stack": "^6.9.12", "@react-navigation/stack": "^6.3.16", "@reduxjs/toolkit": "^1.9.3", "@rneui/themed": "^4.0.0-rc.7", "@types/react-native": "^0.72.0", "@types/react-native-datepicker": "^1.7.1", "apollo3-cache-persist": "^0.14.1", "aws-appsync-auth-link": "^3.0.7", "aws-appsync-react": "^4.0.15", "aws-appsync-subscription-link": "^3.1.2", "axios": "^1.3.4", "country-list": "^2.3.0", "date-fns": "^2.29.3", "graphql": "^16.6.0", "http2": "^3.3.7", "install": "^0.13.0", "jwt-decode": "^3.1.2", "npm": "^9.6.4", "react": "18.2.0", "react-intl": "^6.3.2", "react-native": "0.72.1", "react-native-apollo-devtools-client": "^1.0.4", "react-native-base64": "^0.2.1", "react-native-draggable-flatlist": "^4.0.1", "react-native-fast-image": "^8.6.3", "react-native-gesture-handler": "^2.9.0", "react-native-get-random-values": "^1.8.0", "react-native-image-picker": "^5.3.1", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-languages": "^3.0.2", "react-native-mmkv": "^2.6.3", "react-native-month-year-picker": "^1.9.0", "react-native-paper": "^5.6.0", "react-native-reanimated": "^3.0.2", "react-native-safe-area-context": "^4.5.0", "react-native-screens": "^3.20.0", "react-native-sound": "^0.11.2", "react-native-url-polyfill": "^1.3.0", "react-native-vector-icons": "^9.2.0", "react-redux": "^8.0.5", "redux": "^4.2.1", "redux-devtools-extension": "^2.13.9", "redux-persist": "^6.0.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/eslint-config": "^0.72.2", "@react-native/metro-config": "^0.72.7", "@tsconfig/react-native": "^3.0.2", "@types/lodash": "^4.14.194", "@types/metro-config": "^0.76.3", "@types/react": "^18.0.24", "@types/react-native-base64": "^0.2.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.76.5", "prettier": "^2.4.1", "react-native-flipper": "^0.190.0", "react-test-renderer": "18.2.0", "redux-flipper": "^2.0.2", "typescript": "^4.8.4" }, "engines": { "node": ">=16" } }

roserens commented 1 year ago

Ensure that your bundler application is following the replacement directives in https://github.com/aws/aws-sdk-js-v3/blob/main/packages/util-stream/package.json#L58-L61. I haven't used any bundlers lately, but I believe some are automatic (webpack?) and if not, this is configurable.
  "react-native": {
    "./dist-es/getAwsChunkedEncodingStream": "./dist-es/getAwsChunkedEncodingStream.browser",
    "./dist-es/sdk-stream-mixin": "./dist-es/sdk-stream-mixin.browser"
  },
When doing so, stream will not be required for your application. Do not install stream from NPM, because it is a different package from the Node.js built-in stream, which in any case is not needed.

Thanks a lot. This is really helpful.

The bundler for React-Native projects is Metro. It seems that it doesn't take into account this directive.

Could the issue here be related to the migration of the AWS javascript sdk to @smithy about one months ago?!

reserad commented 1 year ago

Getting a similar issue with @aws-sdk/client-s3

error: Error: Unable to resolve module stream from .../node_modules/@smithy/util-stream/dist-cjs/getAwsChunkedEncodingStream.js: stream could not be found within the project or in these directories:
  node_modules
  2 | Object.defineProperty(exports, "__esModule", { value: true });
  3 | exports.getAwsChunkedEncodingStream = void 0;
> 4 | const stream_1 = require("stream");
    |                           ^
  5 | const getAwsChunkedEncodingStream = (readableStream, options) => {
  6 |     const { base64Encoder, bodyLengthChecker, checksumAlgorithmFn, checksumLocationName, streamHasher } = options;
  7 |     const checksumRequired = base64Encoder !== undefined &&

{
  "name": "testApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start --reset-cache",
    "test": "jest",
    "generate-gql": "graphql-codegen --config src/codegen/codegen.ts"
  },
  "dependencies": {
    "@apollo/client": "^3.7.16",
    "@aws-sdk/client-s3": "^3.367.0",
    "@aws-sdk/s3-request-presigner": "^3.367.0",
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-brands-svg-icons": "^6.4.0",
    "@fortawesome/free-regular-svg-icons": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/react-native-fontawesome": "^0.3.0",
    "@react-native-async-storage/async-storage": "^1.18.2",
    "@react-native-community/geolocation": "^3.0.6",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/material-bottom-tabs": "^6.2.16",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "@react-navigation/stack": "^6.3.17",
    "@reduxjs/toolkit": "^1.9.5",
    "@types/react-native-vector-icons": "^6.4.13",
    "add": "^2.0.6",
    "axios": "^1.4.0",
    "date-fns": "^2.30.0",
    "lottie-react-native": "^5.1.6",
    "react": "18.2.0",
    "react-native": "0.72.0",
    "react-native-device-info": "^10.6.0",
    "react-native-gesture-handler": "^2.12.0",
    "react-native-image-picker": "^5.6.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-keychain": "^8.1.1",
    "react-native-linear-gradient": "^2.7.3",
    "react-native-mask-input": "^1.2.3",
    "react-native-orientation-locker": "^1.5.0",
    "react-native-safe-area-context": "^4.6.3",
    "react-native-screens": "^3.22.0",
    "react-native-shimmer-placeholder": "^2.0.9",
    "react-native-svg": "^13.9.0",
    "react-native-toast-message": "^2.1.6",
    "react-native-vector-icons": "^9.2.0",
    "react-redux": "^8.1.1",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.4.2",
    "yarn": "^1.22.19"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@graphql-codegen/cli": "4.0.1",
    "@graphql-codegen/client-preset": "4.0.1",
    "@graphql-codegen/introspection": "4.0.0",
    "@graphql-codegen/typescript": "^4.0.1",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.6",
    "@tsconfig/react-native": "^3.0.0",
    "@types/metro-config": "^0.76.3",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "graphql": "^16.7.1",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.5",
    "prettier": "^2.4.1",
    "react-native-dotenv": "^3.4.9",
    "react-native-svg-transformer": "^1.0.0",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  }
}

tomstaan commented 1 year ago

I'm getting the same error after upgrading to 0.72.1, Unable to resolve module stream which is caused by the @aws-sdk/client-s3 package

yenfryherrerafeliz commented 1 year ago

@reserad, @TomSCoding, have you tried the recommendation from this comment?

Thanks!

roserens commented 1 year ago

@reserad, @TomSCoding, have you tried the recommendation from this comment?

Thanks!

I've not been able to solve it with this comment.

My solution was to copy your code from the .browser file into the standard file. Then it works.

The only issue is that I've to do it for every update now... but at least it works. :)

zolottareva commented 1 year ago

Hi! Got a very similar issue with React Native and @aws-sdk/client-s3. The package at "node_modules/@smithy/node-http-handler/dist-cjs/node-http2-handler.js" attempted to import the Node standard library module "http2". Any help would be appreciated! My package.json:

{
  "name": "name",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@aws-sdk/client-cognito-identity": "^3.369.0",
    "@aws-sdk/client-kms": "^3.241.0",
    "@aws-sdk/client-s3": "^3.369.0",
    "@aws-sdk/credential-provider-cognito-identity": "^3.369.0",
    "@aws-sdk/credential-providers": "^3.241.0",
    "@expo-google-fonts/dm-sans": "^0.2.2",
    "@expo-google-fonts/oswald": "^0.2.2",
    "@react-native-async-storage/async-storage": "^1.17.11",
    "@react-native-community/datetimepicker": "6.7.3",
    "@react-native-community/netinfo": "9.3.7",
    "@react-native-picker/picker": "2.4.8",
    "@react-navigation/bottom-tabs": "^6.5.3",
    "@react-navigation/native-stack": "^6.9.8",
    "amazon-cognito-identity-js": "^6.1.2",
    "aws-amplify": "^5.0.12",
    "base-64": "^1.0.0",
    "buffer": "^4.9.2",
    "crypto-browserify": "^3.12.0",
    "events": "^1.1.1",
    "expo": "^49.0.2",
    "expo-app-loading": "^1.1.2",
    "expo-application": "~5.1.1",
    "expo-camera": "~13.2.1",
    "expo-clipboard": "~4.1.2",
    "expo-font": "~11.1.1",
    "expo-linear-gradient": "~12.1.2",
    "expo-linking": "^5.0.2",
    "expo-local-authentication": "~13.2.1",
    "expo-secure-store": "~12.1.1",
    "expo-splash-screen": "^0.20.4",
    "expo-status-bar": "~1.4.4",
    "expo-web-browser": "~12.1.1",
    "jwt-decode": "^3.1.2",
    "moment": "^2.29.4",
    "node-libs-browser": "^2.2.1",
    "node-libs-react-native": "^1.2.1",
    "punycode": "^1.4.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.6",
    "react-native-confirmation-code-field": "^7.3.1",
    "react-native-crypto": "^2.2.0",
    "react-native-device-info": "^10.7.0",
    "react-native-dialog": "^9.3.0",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-get-random-values": "^1.8.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-modal": "^13.0.1",
    "react-native-pincode-input": "^1.0.2",
    "react-native-randombytes": "^3.6.1",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-svg": "13.4.0",
    "react-native-toast-message": "^2.1.6",
    "react-native-url-polyfill": "^1.3.0",
    "react-native-web": "~0.18.9",
    "readable-stream": "^1.0.33",
    "rlp": "^3.0.0",
    "shamirs-secret-sharing": "^1.0.1",
    "string_decoder": "^0.10.31",
    "url": "^0.10.3",
    "util": "^0.10.4",
    "web3": "^4.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.0.27",
    "typescript": "^4.9.4"
  },
  "private": true,
  "react-native": {
    "crypto": "react-native-crypto",
    "tls": false
  },
  "browser": {
    "crypto": "react-native-crypto",
    "tls": false
  },
  "resolutions": {
    "@expo/config-plugins": "~6.0.0",
    "@expo/prebuild-config": "~6.0.0"
  }
}

anymore1405 commented 1 year ago

in node_modules/@smithy/util-stream/package.json Edit line "main": "./dist-cjs/index.js" to "main": "./dist-es/index.js" Or patch-package @smithy+util-stream+1.0.1.patch

diff --git a/node_modules/@smithy/util-stream/package.json b/node_modules/@smithy/util-stream/package.json
index 093a544..e08804e 100644
--- a/node_modules/@smithy/util-stream/package.json
+++ b/node_modules/@smithy/util-stream/package.json
@@ -13,7 +13,7 @@
     "format": "prettier --config ../../prettier.config.js --ignore-path ../.prettierignore --write \"**/*.{ts,md,json}\"",
     "test": "jest && karma start karma.conf.js"
   },
-  "main": "./dist-cjs/index.js",
+  "main": "./dist-es/index.js",
   "module": "./dist-es/index.js",
   "types": "./dist-types/index.d.ts",
   "author": {

reserad commented 1 year ago

@reserad, @TomSCoding, have you tried the recommendation from this comment?

Thanks!

I tried that but it didn't work. But what did for me was:

in node_modules/@smithy/util-stream/package.json Edit line "main": "./dist-cjs/index.js" to "main": "./dist-es/index.js" Or patch-package @smithy+util-stream+1.0.1.patch

diff --git a/node_modules/@smithy/util-stream/package.json b/node_modules/@smithy/util-stream/package.json
index 093a544..e08804e 100644
--- a/node_modules/@smithy/util-stream/package.json
+++ b/node_modules/@smithy/util-stream/package.json
@@ -13,7 +13,7 @@
     "format": "prettier --config ../../prettier.config.js --ignore-path ../.prettierignore --write \"**/*.{ts,md,json}\"",
     "test": "jest && karma start karma.conf.js"
   },
-  "main": "./dist-cjs/index.js",
+  "main": "./dist-es/index.js",
   "module": "./dist-es/index.js",
   "types": "./dist-types/index.d.ts",
   "author": {

To further add onto this, I modified the @smithy/util-stream/package.json file and ran yarn patch-package @smithy/util-stream --exclude.

zolottareva commented 1 year ago

Any updates on how to make @smithy/node-http-handler correctly work in react native? Still getting The package at "node_modules/@smithy/node-http-handler/dist-cjs/node-http2-handler.js" attempted to import the Node standard library module "http2". Need to make it work ASAP...

gard0137 commented 1 year ago

same issue. Does this not work for react native anymore?

ThevinMalaka commented 1 year ago

When i downgrade my @aws-sdk/client-cognito-identity-provider package to 3.350.0 It will worked for me.

"@aws-sdk/client-cognito-identity-provider": "3.350.0"
"@aws-sdk/credential-provider-cognito-identity": "3.350.0",
"react-native": "0.71.8",

kuhe commented 1 year ago

My prior post:

Ensure that your bundler application is following the replacement directives in https://github.com/aws/aws-sdk-js-v3/blob/main/packages/util-stream/package.json#L58-L61. I haven't used any bundlers lately, but I believe some are automatic (webpack?) and if not, this is configurable.
  "react-native": {
    "./dist-es/getAwsChunkedEncodingStream": "./dist-es/getAwsChunkedEncodingStream.browser",
    "./dist-es/sdk-stream-mixin": "./dist-es/sdk-stream-mixin.browser"
  },
When doing so, stream will not be required for your application. Do not install stream from NPM, because it is a different package from the Node.js built-in stream, which in any case is not needed.

I have looked into the metro bundler to troubleshoot your issue. Here is what I found that works:

In the S3 Client package.json file, the following entry points are defined:

  "main": "./dist-cjs/index.js",
  "types": "./dist-types/index.d.ts",
  "module": "./dist-es/index.js", // <-- use this one

When using bundlers, the AWS SDK expects that you resolve the module (i.e. ESM) entry point, and as such the replacement directives are for files in the dist-es distribution. In many of the errors shown above, users have resolved the main field with the cjs distribution.

If your bundler is metro, it provides a configurable option called config.resolver.resolverMainFields You should modify this to include the module main field a.k.a. entry point.

example:

// metro.config.js
module.exports = {
  resolver: {
    resolverMainFields: ['react-native', 'module', 'browser', 'main'],
  }
}

If you subsequently encounter a syntax error around this block:

export * as aws from "./aws";

Add the plugin @babel/plugin-proposal-export-namespace-from to your babel config:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    '@babel/plugin-proposal-export-namespace-from',
  ]
};

After adding the module resolverMainField, my bundle using metro no longer attempted to access the Node.js modules such as stream or https. Again, do not attempt to polyfill those Node.js modules to get your application working, since they will not likely work as intended.

CharlesXu0715 commented 1 year ago

Tried [the above] solution but problem got resolved only after doing this.

jbreemhaar commented 1 year ago

Not sure if completely ontopic but maybe it's some help to some people. @aws-amplify/ui-react-native library has never worked for me and have been throwing errors like above since the start. I've written the Authenticator provider/hook myself with @aws-amplify/Auth.

If I don't use @aws-amplify/ui-react-native I can use other @aws-amplify libs like api, core, auth, geo directly without any problems.

Zeph-MOTIX commented 1 year ago

This is still an issue with the latest version.

lourencorodrigo commented 11 months ago

Is there any update about this issue or intention to make any correction besides these solutions above?

jusikXL commented 11 months ago

My prior post:
Ensure that your bundler application is following the replacement directives in https://github.com/aws/aws-sdk-js-v3/blob/main/packages/util-stream/package.json#L58-L61. I haven't used any bundlers lately, but I believe some are automatic (webpack?) and if not, this is configurable.
  "react-native": {
    "./dist-es/getAwsChunkedEncodingStream": "./dist-es/getAwsChunkedEncodingStream.browser",
    "./dist-es/sdk-stream-mixin": "./dist-es/sdk-stream-mixin.browser"
  },
When doing so, stream will not be required for your application. Do not install stream from NPM, because it is a different package from the Node.js built-in stream, which in any case is not needed.
I have looked into the metro bundler to troubleshoot your issue. Here is what I found that works:

In the S3 Client package.json file, the following entry points are defined:
  "main": "./dist-cjs/index.js",
  "types": "./dist-types/index.d.ts",
  "module": "./dist-es/index.js", // <-- use this one
When using bundlers, the AWS SDK expects that you resolve the module (i.e. ESM) entry point, and as such the replacement directives are for files in the dist-es distribution. In many of the errors shown above, users have resolved the main field with the cjs distribution.

If your bundler is metro, it provides a configurable option called config.resolver.resolverMainFields You should modify this to include the module main field a.k.a. entry point.

example:
// metro.config.js
module.exports = {
  resolver: {
    resolverMainFields: ['react-native', 'module', 'browser', 'main'],
  }
}
If you subsequently encounter a syntax error around this block:
export * as aws from "./aws";
Add the plugin @babel/plugin-proposal-export-namespace-from to your babel config:
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    '@babel/plugin-proposal-export-namespace-from',
  ]
};
After adding the module resolverMainField, my bundle using metro no longer attempted to access the Node.js modules such as stream or https. Again, do not attempt to polyfill those Node.js modules to get your application working, since they will not likely work as intended.

Does not work for me. I still see error stream could not be found within the project or in these directories

andrewdavidcostello commented 11 months ago

The babel fix above still leaves you with the below error.

Failed to construct URL with https://cognito-identity.eu-west-1.amazonaws.com [TypeError: Cannot read property 'decode' of undefined]

This is on 3.427.0

dota-coach commented 11 months ago

The babel fix above still leaves you with the below error.

Failed to construct URL with https://cognito-identity.eu-west-1.amazonaws.com [TypeError: Cannot read property 'decode' of undefined]

This is on 3.427.0

I had the same issue and fixed it like this:

npm install text-encoding-polyfill
then add the following line to the beginning of your code: import 'text-encoding-polyfill';

enisze commented 11 months ago

Did not work @dota-coach see this comment. Applying the patches etc.

dota-coach commented 11 months ago

Did not work @dota-coach see this comment. Applying the patches etc.

Yes, there is another step. I had to do the following as well:

Remove line "module" in ./node_modules/punycode/package.json

This is needed due to the resolver rules introduced by @kuhe .

After that it runs smoothly :)

enisze commented 11 months ago

Thank you @dota-coach I will try that. Is there a patch to apply that it also works on the CI/CD pipeline?

dota-coach commented 11 months ago

@enisze: I've not built one. Maybe someone else, but I would not be aware of that.

enisze commented 11 months ago

diff --git a/node_modules/punycode/package.json b/node_modules/punycode/package.json
index 9d0790b..e523dd2 100644
--- a/node_modules/punycode/package.json
+++ b/node_modules/punycode/package.json
@@ -5,7 +5,6 @@
   "homepage": "https://mths.be/punycode",
   "main": "punycode.js",
   "jsnext:main": "punycode.es6.js",
-  "module": "punycode.es6.js",
   "engines": {
     "node": ">=6"
   },

enisze commented 11 months ago

Now I get this error @dota-coach :

dota-coach commented 11 months ago

Now I get this error at @dota-coach :

Did you do the last two steps mentioned by @kuhe ? (i.e. resolverMainFields & babel)

These two steps and what we just talked about here (punycode & text-encoding) fixed it for me. FYI: I'm using the latest version of react-native.

enisze commented 11 months ago

This helped @dota-coach. The app is now at least starting :D but I get the following now:

dota-coach commented 11 months ago

This helped @dota-coach. The app is now at least starting :D but I get the following when I want to login:

I've never seen that on my end. Maybe someone else can help here.

enisze commented 11 months ago

This helped @dota-coach. The app is now at least starting :D but I get the following when I want to login:

I've never seen that on my end. Maybe someone else can help here.

I just noticed this is a log from the next.js server not from react native.

dota-coach commented 11 months ago

Oh, ok. I didn't deploy the steps mentioned here on my next.js code. I think there it just runs smoothly without any of these steps.

enisze commented 11 months ago

Oh, ok. I didn't deploy the steps mentioned here on my next.js code. I think there it just runs smoothly without any of these steps.

yes it does, but I got a monorepo so the patches apply for both my next.js app as well as my react-native app. Do you know how I can create a duplicate?

enisze commented 11 months ago

Seems like it is working now on android thanks for your help @dota-coach appreciated!

enisze commented 11 months ago

Hey @dota-coach, I tried getting to run expo 49 but did not manage with iOS because of some issues. I now got back to 48 and got the issue maybe you have an idea?

Kind regards

dota-coach commented 11 months ago

Hey @dota-coach, I tried getting to run expo 49 but did not manage with iOS because of some issues. I now got back to 48 and got the issue maybe you have an idea?

Kind regards

I don't use Expo, can't help here.

kashyap-scs commented 11 months ago

ypeError: Cannot read property 'decode' of undefined] i applied solution that you suggested but still getting same error

enisze commented 11 months ago

ypeError: Cannot read property 'decode' of undefined] i applied solution that you suggested but still getting same error

I also get this when using single sign on on react native

enisze commented 11 months ago

@kashyap-scs it seems like its fixed using these polyfills:

import 'core-js/actual/url'
import 'core-js/actual/url-search-params'
import 'text-encoding-polyfill'

There is some issue with the URL in react-native

DarioBR91 commented 10 months ago

This works for me In metro.config.js use the resolver.resolveRequest function. Doc here

const { getDefaultConfig } = require('expo/metro-config');
const path = require('path');
const projectRoot = __dirname;
const config = getDefaultConfig(projectRoot);

config.resolver = {
  ...config.resolver,
  resolveRequest: (context, moduleName, platform) => {
    if (String(moduleName).startsWith('@smithy/util-stream')) {
      return {
        filePath: path.resolve(
          workspaceRoot,
          'node_modules',
          '@smithy',
          'util-stream',
          'dist-es',
          'index.js',
        ),
        type: 'sourceFile',
      };
    }
    return context.resolveRequest(context, moduleName, platform);
  },
};

module.exports = config;

Update the resolve path to the @smithy/util-stream/dist-es/index.js file should solve it

Rojithmuthaiya commented 10 months ago

ReferenceError: path is not defined

DarioBR91 commented 10 months ago

ReferenceError: path is not defined

I updated the script, you have to import path like,

const path = require('path');

osmarsant commented 10 months ago

I had the same issue here with this package

Working fine after downgrading to version 3.350.0 which doesn't have some extra dependencies from @smithy package

"@aws-sdk/client-cognito-identity-provider": "3.350.0"

AllanZhengYP commented 10 months ago

For anyone encountered furthers issues following @kuhe's comment https://github.com/aws/aws-sdk-js-v3/issues/4877#issuecomment-1656007484, here are a few addtional steps you can take:

If you see error accessing decode of undefined, you need to fix the entrypoint for dependency ponycode. Add the following script to your metro.config.js


const config = {
resolver: {
resolverMainFields: ['react-native', 'module', 'browser', 'main'],
resolveRequest: (context, moduleName, platform) => {
// Additional logic here
  const defaultResolveResult = context.resolveRequest(context, moduleName, platform);
  if (moduleName === 'punycode' && defaultResolveResult.type === 'sourceFile' && defaultResolveResult.filePath?.endsWith('punycode.es6.js')) {
    defaultResolveResult.filePath = defaultResolveResult.filePath.replace('punycode.es6.js', 'punycode.js');
  }
  return defaultResolveResult;
}
}
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);


2. If you see error complaining `TextEncoder` no defined, you need to add `text-encoding-polyfill` polyfill
```js
import 'text-encoding-polyfill';

github-actions[bot] commented 10 months ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in this thread.

aws / aws-sdk-js-v3