Amplify React Native - Duplicate Error using amplify add api

Question

I'm using this Amplify guide https://aws-amplify.github.io/docs/js/tutorials/building-react-native-apps/#connect-to-your-backend-1 and when I create an API using "aplify add api" the app fails. I'm using "expo" and I'm using IphoneX for test phase.

My app code is

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',
  },
});

executing "expo start" the command line return this message error:

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.

or

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)

What is wrong? How can I use the API correctly?

simplikios · Accepted Answer · 2021-04-14T15:54:33.090

Amplify creates a copy of your current cloud backend configuration in amplify/#current-cloud-backend/.

You don't need those files to build your app, so you can ignore them in order to get rid of the error.

To do so, you can create a blacklist and add the folder to it. Create a rn-cli.config.js file in the root of your project.

./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 considerations:

(As stated in Mush's answer)

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.

Alfie Jones · Answer 2 · 2022-03-18T17:56:50.843

9

2022

In Metro v0.64.0 blacklist was renamed to blocklist, release notes

My current solution is to edit the metro.config.js (or create a new one) and add the following

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,
      },
    }),
  },
};

edited Mar 18 '22 at 17:56

answered May 30 '21 at 17:22

Alfie Jones

132
1
7

Here they instrcuted to blacklist android and ios as well. By looking that code It seems it excluding the android and ios folder of main project which causing the app crash. link:https://github.com/nodejs-mobile/nodejs-mobile-react-native#duplicate-module-name – CrackerKSR Feb 16 '22 at 11:44

score 7 · Answer 3 · answered Mar 30 '20 at 03:31

7

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.

answered Mar 30 '20 at 03:31

Mush

2,326
2
16
22

Where is this metro.config.js file located? – Cevin Thomas Jun 01 '20 at 15:09
@CevinThomas my metro.config.js is located at the root of the project. – Mush Jun 01 '20 at 22:50
How did you get that metro.config at the root of the project. Did it come with installation of something specific? I do not have this config at all. @Mush – Cevin Thomas Jun 02 '20 at 10:05
1

@CevinThomas if you don't have `metro.config.js` you can create it at the root of your project. – Jesse Weigel Aug 20 '20 at 23:58
1

Just the resolver part was sufficient for me with a managed expo project @ SDKv40 with `"@expo/metro-config": "latest"` in my devDependencies as well - [issue](https://github.com/expo/expo/issues/11397) – pale bone Mar 25 '21 at 16:52
How are we supposed to know this? [Where is it documented?](https://stackoverflow.com/q/72396166/656912) – orome May 26 '22 at 18:10

score 0 · Answer 4 · answered Oct 27 '20 at 12:49

I just ran into this problem and had to create ./rn-cli.config.js with the following as blacklist was in a different folder:

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

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

score 0 · Answer 5 · answered May 27 '21 at 01:45

0

After updating to Expo SDK41 this issue came back. I needed to change previous rn-cli.config.js to metro.config.js (even though I'm not using TS) and install @expo/metro-config as devDependency.

answered May 27 '21 at 01:45

Kasper

3
2
2

score 0 · Answer 6 · answered Sep 20 '21 at 06:39

0

Expo + Late 2021 Update

Not sure if this is fix is expo specific, but the current way to do this is with blacklist (rather than exclusionList). Like so:

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,
      },
    }),
  },
}

answered Sep 20 '21 at 06:39

JVG

20,198
47
132
210

Where does the `metro.config.js` exist? inside the root direcctory? – Beki Dec 08 '21 at 07:26
@Beki yep, put it in your root directory – JVG Dec 13 '21 at 01:15
I create the `metro.config.js` file, added the "blacklist" information, butI am still getting the same error, "Failed to construct transformer: DuplicateError: Duplicated files or mocks." Is there something I am missing? – JBruce Jan 04 '22 at 16:36

score 0 · Answer 7 · answered Mar 16 '22 at 13:52

For anyone who is still facing this issue I had to change something after this issue re-appeared.

For me, I had to change blacklist in line 1 to 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,
      },
    }),
  },
}

Amplify React Native - Duplicate Error using amplify add api

7 Answers7

TypeScript considerations:

2022

Linked