React应用对接AWS AppFlow的SDK导入错误解决及实现咨询

Hey there! Let's sort out this AWS AppFlow SDK issue you hit in your React app. That TypeError: aws_sdk__WEBPACK_IMPORTED_MODULE_0___default(...).Appflow is not a constructor error is definitely a head-scratcher, but you already found the right fix—nice work!

问题根源 #

When you import the full aws-sdk package, the AppFlow client isn't included by default. You need to import it explicitly from the clients submodule of the SDK to use it properly.

正确的实现代码 #

Here's your working configuration for future reference, broken down a bit:

First, import the AppFlow client directly alongside the main AWS SDK:

import * as Appflow from "aws-sdk/clients/Appflow";
import AWS from 'aws-sdk';

Next, configure your AWS region and credentials using environment variables:

AWS.config.update({
  region: process.env.NX_REACT_APP_REGION,
  credentials: {
    accessKeyId: process.env.NX_REACT_APP_ACCESS,
    secretAccessKey: process.env.NX_REACT_APP_SECRET,
  },
});

Then instantiate the AppFlow client:

const appflow = new Appflow();

Finally, you can call AppFlow APIs like creating a connector profile (using Amplitude as an example here):

const amplitudeKey = process.env.NX_REACT_APP_AMPLITUDE_API_KEY;
const amplitudeSecret = process.env.NX_REACT_APP_AMPLITUDE_SECRET_KEY;

const createConnectorProfileParams = {
  connectorProfileName: "connector-profile-test",
  connectorType: "Amplitude",
  connectionMode: "Public",
  connectorProfileConfig: {
    connectorProfileCredentials: {
      Amplitude: {
        apiKey: `${amplitudeKey}` ,
        secretKey: `${amplitudeSecret}`
      },
    },
    connectorProfileProperties: {
      Amplitude: {}
    },
  }
}

appflow.createConnectorProfile(createConnectorProfileParams, (err, data) => {
  if (err) console.log('Error creating flow:', err);
  else console.log('Flow created successfully:', data);
});

小提醒 #

A quick security note: If this app is going to production, avoid hardcoding or exposing AWS access keys directly in client-side React code. Consider using AWS Cognito for authenticated users or proxying API calls through your own backend to keep credentials safe.

备注：内容来源于stack exchange，提问作者Amauri Santos