aws-sdk-js-v3: React-native | CognitoIdentityProviderClient | Unable to resolve module stream

Checkboxes for prior research

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
  1. 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,
    });
  1. 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)
  1. Then run the following commands:
npm start
npm run android

Observed Behavior

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

image

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.

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 2
  • Comments: 50 (6 by maintainers)

Most upvoted comments

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.

+11
kuhe on Jul 28, 2023

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": {
+11
anymore1405 on Jul 15, 2023

This is still an issue with the latest version.

+5
Zeph-MOTIX on Sep 21, 2023

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.

+4
lazamius on Jun 27, 2023

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

+3
ghost on Jun 27, 2023

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…

+2
zolottareva on Jul 17, 2023 
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"
   },
+1
enisze on Oct 13, 2023

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

+1
reserad on Jul 15, 2023

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"
  }
}
+1
zolottareva on Jul 17, 2023

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?!

+1
roserens on Jul 3, 2023
Read more comments on GitHub
← aws-sdk-js-v3: Protocol error in kinesis putRecords in aws sdk > 3.81.0
aws-sdk-js-v3: S3 Multi-Region Access Point(MRAP) is not available unless with additional dependency →