TypeError: undefined is not a function, js engine: hermes ERROR

Question

I'm writing an app with React Native that checks if the phone number is valid. For this, I am trying to import my own npm library into the app and use it.

link of my library: https://www.npmjs.com/package/mobile-number-validator

The logic is very simple: There is a field on the screen to enter a number. After you enter the number, you press the validate button and it tells you whether the number is valid or not. While doing this, it uses the npm library. (the library is working correctly.Tested.)

I imported my npm library with; npm install mobile-number-validator

Interface of app

when you test the app; enter the number and check validate, it gives "TypeError: undefined is not a function, js engine: hermes" error.

error

I scanned all internet and chatgpt, but there was no any idead to fix it.

here is my source code:

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import { isValidPhoneNumber } from 'mobile-number-validator';

const App = () => {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [isValid, setIsValid] = useState(false);

  const handleValidation = () => {
    const isValidNumber = isValidPhoneNumber(phoneNumber);
    setIsValid(isValidNumber);
  };

  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Enter phone number"
          onChangeText={text => setPhoneNumber(text)}
          value={phoneNumber}
        />
      </View>
      <Button title="Validate" onPress={handleValidation} />
      {isValid ? (
        <Text style={{ color: 'green' }}>Valid phone number</Text>
      ) : (
        <Text style={{ color: 'red' }}>Invalid phone number</Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  inputContainer: {
    width: '80%',
    marginBottom: 20,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    borderRadius: 5,
  },
});

export default App;

and in case of need, here is my json file:

{
  "expo": {
    "name": "mobile-number-validator",
    "slug": "mobile-number-validator",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

while I am entering this post I realized something different. In the import part, it says: "Could not find a declaration file for module 'mobile-number-validator'"

Could not find a declaration file for module 'mobile-number-validator'

what couldbe the reason not to work? what is your ideas?

I have checked this stackoverflow question: ERROR TypeError: undefined is not a function, js engine: hermes but there was nothing also.

I asked to ChatGPT and it returns this answer: * The error message "TypeError: undefined is not a function" indicates that the isValidPhoneNumber function is not being recognized by the JavaScript engine. This can happen if there is an issue with the package installation or with the import statement in your code.

Here are some steps you can try to resolve the issue:

Check if you have installed the "mobile-number-validator" package correctly by running the npm ls mobile-number-validator command in your project directory. This command will show you the installed version of the package. If it is not installed, try running npm install mobile-number-validator again.

Make sure you are importing the isValidPhoneNumber function correctly. In the code example I provided earlier, the import statement should look like this: import { isValidPhoneNumber } from 'mobile-number-validator';. Double-check that your import statement matches this format and that you are not misspelling the function name.

If the issue persists, try deleting the node_modules folder and reinstalling all dependencies using the npm install command.

If none of the above steps resolve the issue, try using a different JavaScript engine like V8 instead of Hermes. You can switch to V8 by running the command npx react-native config set jsEngine v8 in your project directory.

I hope these steps help you resolve the issue with the "mobile-number-validator" package. Let me know if you have any further questions or issues.*

Answer 1

I checked your library code, you used "module.export" to export your isValidPhoneNumber, but in React Native, you import it with "import { isValidPhoneNumber } from 'mobile-number-validator';". This is a wrong syntax.

The import/export syntax is part of the ES6 module system, while module.exports is a feature of the CommonJS module system used by Node.js.

You should use "required" keyword to import isValidPhoneNumber, if you want to use CommonJS module system (not recommend for React Native code)

const isValidPhoneNumber = required('mobile-number-validator')

The recommended is using ES6, you need to change the way you export "isValidPhoneNumber" in your library code

export function isValidPhoneNumber(phone) {
 //your logic code
}

And in App.js, you can import with your current code

import { isValidPhoneNumber } from 'mobile-number-validator';