Hi,

The React Native package is not available in the native build environment, even though your JavaScript action is importing it. This is a React Native bundling error, not a Mendix JavaScript syntax error.

Common Causes:
1) Missing nativeDependencies declaration
2) Package not installed in Native Mobile Resources
3) Package version mismatch
4) Check Your Import

These might be the cause of your issue.

If possible can you share bundleios_logs.txt file details.

Thanks

Hi Mfundo,

The error Unable to resolve module react-native-nfc-manager indicates that the dependency is not being resolved during the native build. For Mendix native JavaScript actions, installing the npm package alone may not be sufficient; the native dependency must also be declared correctly.

Please follow these steps:

1. Install the package: From your Mendix project directory, install react-native-nfc-manager using npm, following the official Mendix NFC tutorial.

2. Declare the native dependency: Locate the JavaScript Action's generated .js file and create or update its corresponding .js.json declaration file. For example, if the action file is ReadNFCTag.js, the declaration file should be ReadNFCTag.js.json.

   Use this structure, replacing the version with the exact version compatible with your app's Native Template:

   {
     "nativeDependencies": {
       "react-native-nfc-manager": "YOUR_COMPATIBLE_VERSION"
     }
   }

   Use an exact version, not latest or a version range. Mendix documents that native dependencies must be declared with exact versions.

3. Check the import: Ensure your JavaScript Action imports the package correctly:

   import NfcManager from "react-native-nfc-manager";

4. Rebuild the native app: Save the changes and build a new native developer app so the native dependency is included in the generated application. The standard Make It Native app does not include every third-party native module.

5. Verify compatibility: Check the installed react-native-nfc-manager version against your Mendix Native Template and React Native versions. Do not upgrade the package blindly, as incompatible versions can cause additional build errors.

Official Mendix documentation:

• Build JavaScript Actions for Native Mobile

• Declaring Native Dependencies

The most important step is to ensure that the dependency is declared and compatible with your Native Template before rebuilding.

Hope this helps! If you find this answer helpful, please mark it as the accepted answer.

Hi Mfundo,

Unable to resolve module react-native-nfc-manager appears in bundleios_logs.txt, which means the JavaScript bundler (Metro) can’t find the package’s code on disk when it bundles your app. So the main question is where the package was installed. Here’s how to do steps 2 and 3 exactly.

Step 2 – Install the dependency in the right folder (most common cause)

The package must be installed in the module’s actions folder, next to your JavaScript action files, not in the project root.

1. Open a command prompt and go to the folder that contains your JS actions. The tutorial uses:

   cd C:\MendixApps\NativeNFC\javascriptsource\nativenfc\actions

Replace the app path and module name (lowercase) with your own.
2. Check that HasNFCSupport.js is in this folder. The tutorial uses this file to confirm you’re in the right place.
3. Run:

   npm install react-native-nfc-manager@<version>

4. Afterwards, the folder should look like this:

   javascriptsource/nativenfc/actions/
   ├── HasNFCSupport.js
   ├── HasNFCSupport.json
   ├── ReadNFCTag.js
   ├── ReadNFCTag.json
   ├── node_modules/react-native-nfc-manager/   ← must exist here
   └── package.json

If you ran npm install in the project root or any other folder, the bundler won’t find the package and you get exactly this error.

Step 3 – Declare the native dependency

The JavaScript code alone isn’t enough, because NFC also needs native iOS and Android code. Create one .json file per JavaScript action, with the same name as the action: HasNFCSupport.json and ReadNFCTag.json. Name them HasNFCSupport.json, not HasNFCSupport.js.json. Put the same content in both:

json

{
    "nativeDependencies": {
        "react-native-nfc-manager": "<same exact version as Step 2>"
    }
}

The version must match the one you installed in Step 2 exactly. Don’t use latest or a version range.

Choosing the version

The tutorial uses 1.2.2, which is very old and doesn’t work with current Mendix and React Native versions. On the Mendix forum, a reworked JavaScript action has been tested with React-Native-Nfc-Manager version 3.3.0. Note that the 3.x API differs from 1.x, so the action code changes too, for example NfcManager.start() and NfcEvents.

Pick a version that’s compatible with your app’s Native Template and React Native version, and use the same version in Step 2 and Step 3.

Then rebuild

1. In Studio Pro, run or redeploy the app so the new node_modules folder is picked up.

2. Build a custom developer app or a production build. NFC can only be achieved by building a custom developer app. The standard Make It Native app doesn’t contain the NFC native module, so it won’t work there.

3. For iOS, NFC also needs the NFC Tag Reading capability and an NFCReaderUsageDescription entry in Info.plist in your native template. Without these, the app builds but scanning won’t work.
   

Other things to check

• If you build from version control or a CI pipeline, make sure javascriptsource/.../actions/node_modules isn’t excluded by .gitignore. Otherwise the build machine won’t have the package.

• The import in your action must exactly match the package name: import NfcManager from "react-native-nfc-manager";
  

In short: install the package inside javascriptsource/<module>/actions, name the declaration files <ActionName>.json, use the same exact compatible version in both places, and build a custom developer app.

Hope this helps! If this solution works for you, kindly mark it as the accepted answer so it can help others facing the same issue.