放大 React Native - 使用放大添加重复错误 api

Question

我正在使用这个 Amplify 指南 https://aws-amplify.github.io/docs/js/tutorials/building-react-native-apps/#connect-to-your-backend-1，当我使用 "aplify add api" 创建一个 API 时，应用程序失败了。我正在使用 "expo" 并在测试阶段使用 IphoneX。

我的应用代码是

import React, { Component } from 'react';
import { StyleSheet, Text, Button, View, Alert } from 'react-native';
import Amplify, { API } from 'aws-amplify';
import amplify from './aws-exports';
import awsmobile from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react-native';

Amplify.configure(amplify);
Amplify.configure(awsmobile);

state = { apiResponse: null };

class App extends Component {


  async getSample() {
    const path = "/items"; // you can specify the path
     const apiResponse = await API.get("theListApi" , path); //replace the API name
     console.log('response:' + apiResponse);
     this.setState({ apiResponse });
   }


  render() { 
    return (
      <View style={styles.container}>
      <Text>test</Text>

      <Button title="Send Request" onPress={this.getSample.bind(this)} />
    <Text>Response: {this.state.apiResponse && JSON.stringify(this.state.apiResponse)}</Text>

    </View>
    );
  }
}

export default withAuthenticator(App);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#63C8F1',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

正在执行"expo start"命令行return此消息错误：

jest-haste-map: Haste module naming collision: theListFunction
  The following files share their name; please adjust your hasteImpl:
    * <rootDir>/amplify/backend/function/theListFunction/src/package.json
    * <rootDir>/amplify/#current-cloud-backend/function/theListFunction/src/package.json


Failed to construct transformer:  DuplicateError: Duplicated files or mocks. Please check the console for more info
    at setModule (/Users/j_hen/Documents/jdev/smartApp/sourcecode/mySmaertProject/node_modules/jest-haste-map/build/index.js:620:17)
    at workerReply (/Users/j_hen/Documents/jdev/smartApp/sourcecode/mySmaertProject/node_modules/jest-haste-map/build/index.js:691:9)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Promise.all (index 391) {
  mockPath1: 'amplify/backend/function/theListFunction/src/package.json',
  mockPath2: 'amplify/#current-cloud-backend/function/theListFunction/src/package.json'
}
(node:1506) UnhandledPromiseRejectionWarning: Error: Duplicated files or mocks. Please check the console for more info
    at setModule (/Users/j_hen/Documents/jdev/smartApp/sourcecode/mySmaertProject/node_modules/jest-haste-map/build/index.js:620:17)
    at workerReply (/Users/j_hen/Documents/jdev/smartApp/sourcecode/mySmaertProject/node_modules/jest-haste-map/build/index.js:691:9)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Promise.all (index 391)
(node:1506) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:1506) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

或

Error: Duplicated files or mocks. Please check the console for more info
    at setModule (/Users/j_hen/Documents/jdev/smartApp/sourcecode/mySmaertProject/node_modules/jest-haste-map/build/index.js:620:17)
    at workerReply (/Users/j_hen/Documents/jdev/smartApp/sourcecode/mySmaertProject/node_modules/jest-haste-map/build/index.js:691:9)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Promise.all (index 391)

怎么了？如何正确使用 API？

Answer 1

Amplify 在 amplify/#current-cloud-backend/ 中创建您当前云后端配置的副本。

您不需要这些文件来构建您的应用程序，因此您可以忽略它们以消除错误。

为此，您可以创建黑名单并将文件夹添加到黑名单中。在项目的根目录中创建一个 rn-cli.config.js 文件。

./rn-cli.config.js:

// works with older react native versions
// const blacklist = require('metro').createBlacklist;

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
  resolver: {
    blacklistRE: blacklist([/#current-cloud-backend\/.*/]),
  },
};

Reference issue.

TypeScript 注意事项：

（如 Mush 的回答所述）

If you are using typescript you should create the blacklist on metro.config.js NOT rn-cli.config.js.

module.exports = {
  resolver: {
    blacklistRE: /#current-cloud-backend\/.*/
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

As stated here.

Answer 2

如果您使用的是打字稿，您应该在 metro.config.js NOT rn-cli.config.js.

上创建黑名单

module.exports = {
  resolver: {
    blacklistRE: /#current-cloud-backend\/.*/
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

如所述here。

Answer 3

我刚刚运行遇到了这个问题，不得不创建 ./rn-cli.config.js 如下，因为黑名单在不同的文件夹中：

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
  resolver: {
    blacklistRE: blacklist([/#current-cloud-backend\/.*/]),
  },
};

Answer 4

更新到 Expo SDK 41 后，这个问题又回来了。我需要将之前的 rn-cli.config.js 更改为 metro.config.js（即使我没有使用 TS）并安装 @expo/metro-config 作为开发依赖项。

Answer 5

2022

在 Metro v0.64.0 中黑名单被重命名为黑名单，release notes

我目前的解决方案是编辑 metro.config.js（或创建一个新的）并添加以下内容

const exclusionList  = require('metro-config/src/defaults/exclusionList');

module.exports = {
  resolver: {
    blacklistRE: exclusionList([/amplify\/#current-cloud-backend\/.*/]),
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

Answer 6

世博会 + 2021 年末更新

不确定这是否是特定于展览会的修复，但目前的方法是使用 blacklist（而不是 exclusionList）。像这样：

metro.config.js


const blacklist = require("metro-config/src/defaults/blacklist")

module.exports = {
  resolver: {
    blacklistRE: blacklist([/amplify\/#current-cloud-backend\/.*/]),
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
}

Answer 7

对于仍然面临这个问题的任何人，我必须在这个问题之后做出一些改变 re-appeared。

对我来说，我必须将第 1 行的 blacklist 更改为 exclusionList

metro.config.js

const blacklist = require("metro-config/src/defaults/exclusionList")

module.exports = {
  resolver: {
    blacklistRE: blacklist([/amplify\/#current-cloud-backend\/.*/]),
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
}

放大 React Native - 使用放大添加重复错误 api

Amplify React Native - Duplicate Error using amplify add api

reactjs

react-native

react-native-ios

aws-amplify

TypeScript 注意事项：

2022