npm TypeError:undefined不是函数,js引擎:爱马仕

n3h0vuf2  于 2023-03-23  发布在  其他
关注(0)|答案(1)|浏览(153)

我正在用React Native编写一个应用程序,用于检查电话号码是否有效。为此,我尝试将自己的npm库导入应用程序并使用它。
我的图书馆链接:https://www.npmjs.com/package/mobile-number-validator
逻辑很简单:屏幕上有一个输入数字的区域。输入数字后,按验证按钮,它会告诉你数字是否有效。在执行此操作时,它使用npm库。(库工作正常。已测试。)
我导入了我的npm库;npm install mobile-number-validator
Interface of app
当你测试应用程序时;输入数字并检查验证,它给出“TypeError:undefined不是一个函数,js引擎:爱马仕”错误。
error
我扫描了所有的互联网和聊天,但没有任何想法来解决它。
下面是我的源代码:

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'的声明文件”
Could not find a declaration file for module 'mobile-number-validator'
什么原因不能工作?你的想法是什么?
我已经检查了这个stackoverflow问题:ERROR TypeError: undefined is not a function, js engine: hermes但也没有什么。
我问了ChatGPT,它返回了这个答案:* 错误消息“TypeError:undefined is not a function”表示JavaScript引擎无法识别isValidPhoneNumber函数。如果包安装或代码中的import语句存在问题,则可能会发生这种情况。
以下是您可以尝试解决此问题的一些步骤:
通过在项目目录中运行npm ls mobile-number-validator命令,检查是否正确安装了“mobile-number-validator”包。此命令将显示已安装的包版本。如果未安装,请再次尝试运行npm install mobile-number-validator。
确保正确导入isValidPhoneNumber函数。在我之前提供的代码示例中,import语句应该如下所示:import { isValidPhoneNumber } from 'mobile-number-validator';。请仔细检查import语句是否与此格式匹配,以及函数名是否拼写错误。
如果问题仍然存在,请尝试删除node_modules文件夹并使用npm install命令重新安装所有依赖项。
如果上述步骤都不能解决问题,请尝试使用不同的JavaScript引擎,如V8而不是爱马仕。您可以通过在项目目录中运行命令npx react-native config set jsEngine v8切换到V8。
我希望这些步骤可以帮助您解决“mobile-number-validator”软件包的问题。如果您有任何进一步的问题或问题,请告诉我。*

ozxc1zmp

ozxc1zmp1#

我检查了你的库代码,你使用“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';

相关问题