TypeError：未定义不是函数，js引擎：hermes错误

Question

我正在使用 React Native 编写一个应用程序来检查电话号码是否有效。为此，我尝试将我自己的 npm 库导入到应用程序中并使用它。

我的库的链接：https://www.npmjs.com/package/mobile-number-validator

逻辑很简单： 屏幕上有一个字段可以输入数字。输入号码后，按验证按钮，它会告诉您该号码是否有效。在执行此操作时，它使用 npm 库。 （该库工作正常。经过测试。）

我导入了我的 npm 库；

npm install mobile-number-validator

应用程序界面

当您测试应用程序时；输入号码并检查验证， 它给出了“TypeError：未定义不是一个函数，js引擎：hermes”错误。

错误

我扫描了所有互联网和chatgpt，但没有任何想法来修复它。

这是我的源代码：

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;

如果需要，这是我的 json 文件：

{
  "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"
    }
  }
}

当我进入这篇文章时，我意识到一些不同的事情。在导入部分， 它说：“找不到模块‘手机号码验证器’的声明文件”

找不到模块“mobile-number-validator”的声明文件

不工作的原因可能是什么？你的想法是什么？

我检查了这个stackoverflow问题：错误类型错误：未定义不是一个函数，js引擎：hermes 但也什么都没有。

我向 ChatGPT 询问，它返回了这个答案： * 错误消息“TypeError: undefined is not a function”表示 JavaScript 引擎无法识别 isValidPhoneNumber 函数。如果包安装或代码中的导入语句存在问题，则可能会发生这种情况。

您可以尝试以下一些步骤来解决该问题：

通过在项目目录中运行 npm ls mobile-number-validator 命令检查是否已正确安装“mobile-number-validator”包。此命令将显示该软件包的已安装版本。如果未安装，请尝试再次运行 npm install mobile-number-validator。

确保您正确导入 isValidPhoneNumber 函数。在我之前提供的代码示例中，导入语句应如下所示：import { isValidPhoneNumber } from 'mobile-number-validator';。仔细检查您的导入语句是否与此格式匹配，并且您没有拼写错误的函数名称。

如果问题仍然存在，请尝试删除 node_modules 文件夹并使用 npm install 命令重新安装所有依赖项。

如果上述步骤都不能解决问题，请尝试使用不同的 JavaScript 引擎，例如 V8，而不是 Hermes。您可以通过在项目目录中运行命令 npx react-native config set jsEngine v8 来切换到 V8。

我希望这些步骤可以帮助您解决“手机号码验证器”包的问题。如果您还有任何疑问或问题，请告诉我。*

Answer 1

我检查了您的库代码，您使用“module.export”导出 isValidPhoneNumber，但在 React Native 中，您使用“import { isValidPhoneNumber } from 'mobile-number-validator';”导入它。这是错误的语法。

导入/导出语法是 ES6 模块系统的一部分，而 module.exports 是 Node.js 使用的 CommonJS 模块系统的一个功能。

如果你想使用CommonJS模块系统，你应该使用“required”关键字导入isValidPhoneNumber（不推荐用于React Native代码）

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

推荐使用ES6，您需要更改库代码中导出“isValidPhoneNumber”的方式

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

在 App.js 中，您可以使用当前代码导入

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