@aws/cloudwatch-client in V3 is no longer compatible with React Native since it pulls in the zlib and util packages of node

[Jamesmwilliamson]

Checkboxes for prior research

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

Describe the bug

Have done all of the recommended shims mentioned in the documentation, checked for any documentation mentioning this etc. In the V2 version, metrics worked fine, in V3, it's pulling in zlib, util etc from Node which are not compatible with React Native

Regression Issue

• Select this option if this issue appears to be a regression.

SDK version number

"@aws-sdk/client-cloudwatch": "3.901.0",

Which JavaScript Runtime is this issue in?

React Native

Details of the browser/Node.js/ReactNative version

React Native 0.79.5

Reproduction Steps

/** in index .js, all of the documented shim packages are installed and working,
  including the regular s3, cloudwatch-logs etc, so configuration appears to be correct
*/
import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';
import 'web-streams-polyfill/dist/polyfill';

// !! Problematic !! pulls in node dependencies
import { CloudWatchClient } from '@aws-sdk/client-cloudwatch';

interface AuthConfig {
  credentials: AwsCredentialIdentityProvider;
  region: string;
}

export function logMetrics(params: unknown, authConfig: AuthConfig) {
    const client = new CloudWatchClient(authConfig);
     // ... further business logic
}

Observed Behavior

 ERROR  [Error: UnableToResolveError Unable to resolve module zlib from /Users/[username]/Documents/[appname]/node_modules/@smithy/middleware-compression/dist-cjs/index.js: zlib could not be found within the project or in these directories:
  node_modules
  4 | var core = require('@smithy/core');
  5 | var protocolHttp = require('@smithy/protocol-http');
> 6 | var zlib = require('zlib');
    |                     ^
  7 | var utilUtf8 = require('@smithy/util-utf8');
  8 | var util = require('util');
  9 | var isArrayBuffer = require('@smithy/is-array-buffer');]

Expected Behavior

If all documented steps are followed, and the SDKs other components work, as React Native is officially listed as supported and this worked fine in V2, this package it would be expected should also work correctly. What happens is that this package in V3 now pulls in the util, zlib and possibly more breaking it's compatibility with React Native.

Possible Solution

It seems the issue is that, at least by default, it pulls in the .cjs versions of these files on React Native, pulling in these extra node utils and hence causing the bundle to fail. Adding in this hack to metro.config.js

const { resolve: metroResolve } = require('metro-resolver');

// prioritize es imports above cjs for cloudwatch compatibility
config.resolver = {
  ...config.resolver,
  resolveRequest: (context, moduleName, platform) => {
    const isAwsModule =
      moduleName.startsWith('@aws-sdk/') || moduleName.startsWith('@smithy/');

    if (isAwsModule) {
      return metroResolve(
        {
          ...context,
          mainFields: ['browser', 'module', 'main'],
        },
        moduleName,
        platform,
      );
    }
    return metroResolve(context, moduleName, platform);
  },
};

seems to resolve the issue. This was not necessary to get any of the other @aws-sdk packages working, however, so it seems there might be something wrong with the way it resolves modules for react native.

[aBurmeseDev]

Hi @Jamesmwilliamson - thanks for reaching out. Can you spin up our test repo and run your code in there? I haven't been able to reproduce this on my end.