React Native - Android Studio - @azure/service-bus -fastestsmallesttextencoderdecoder：TypeError：无法读取未定义的属性“原型”

Question

我正在创建一个 Android 应用程序，但遇到了第一个问题： https://github.com/Azure/azure-sdk-for-js/issues/30342他们建议我安装这里描述的polyfill：https://github.com/hapijs/joi/issues/2141 。 我尝试安装 FastestSmallestTextEncoderDecoder 库，但在尝试提交表单时出现错误：https://github.com/anonyco/FastestSmallestTextEncoderDecoder/issues/23。

有人遇到过类似的问题吗？ 希望你能帮我解决

问候， 朱塞佩·洛·雷

• 安装了最快的最小文本编码器解码器；
• 创建了globals.js：

global.TextEncoder = require('fastestsmallesttextencoderdecoder').TextEncoder;
global.TextDecoder = require('fastestsmallesttextencoderdecoder').TextDecoder;

• 以我的形式导入：

import '../../../../globals';
import 'react-native-get-random-values';
import { Buffer } from 'buffer';
global.Buffer = Buffer;
global.process = require('process');
import { WebSocketWrapper } from '../../../../wsWrapper';

import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, Image } from 'react-native';
import { useForm } from 'react-hook-form';

import { ServiceBusClient } from '@azure/service-bus';
import CustomButton from '../../../../common/components/CustomButton/custom-button';
import CustomTextInput from '../../../../common/components/CustomButton/CustomTextInput/CustomTextInput';

import { styles } from './styles';

interface IForm {
    onClose: () => void; 
}

const connectionString = "*hidden*";
const topicName = "*hidden*";

const Form: React.FunctionComponent<IForm>= ({ onClose }) => {
    const [sending, setSending] = useState<boolean>(false) 
    const defaultValues = {
        firstName: '',
        lastName: '',
        description: '',
    };

    const { control, handleSubmit, formState: { errors }, reset } = useForm({
        defaultValues,
    });

    const sendMessage = async (data: any) => {
        setSending(true);

        const sbClient = new ServiceBusClient(connectionString, {
            webSocketOptions: {
                webSocket: WebSocketWrapper as any,
            },
        });
        const sender = sbClient.createSender(topicName);
        
        try {
            const message = {
                body: JSON.stringify(data),
                applicationProperties: { device: 1 },
            };
            console.log("Message to be sent:", message);
            console.log("Sending message...");
            await sender.sendMessages(message);
            console.log("Message sent successfully.");
            console.log(`Sent message: ${JSON.stringify(data)} to the topic: ${topicName}`);

            await sender.close();
        } catch (error) {
            console.log(error);
        } finally {
            await sbClient.close();
            setSending(false);
        }
    };

    const onSubmit = (data: any) => {
        console.log("data:", data);
        sendMessage(data).catch(error => {
            console.error("Submit error:", error);
        });
    };

    useEffect(() => {
        reset(defaultValues);
    }, []);

    return (
        <View style={styles.container}>
            <TouchableOpacity style={styles.closeButton} onPress={onClose}>
                <View style={styles.circle}>
                    <Text style={styles.cross}>X</Text>
                </View>
            </TouchableOpacity>
            <View style={styles.logoContainer}>
                <Image
                    source={require('../../../../public/logo.png')}
                    style={styles.logo}
                />
            </View>
            <CustomTextInput
                control={control}
                name="firstName"
                rules={{ required: true }}
                error={errors.firstName}
                errorMessage="First name is required"
                placeholder="First name"
                style={styles.input}
            />
            <CustomTextInput
                control={control}
                name="lastName"
                rules={{ required: true }}
                error={errors.lastName}
                errorMessage="Last name is required"
                placeholder="Last name"
                style={styles.input}
            />
            <CustomTextInput
                control={control}
                name="description"
                rules={{ required: true }}
                error={errors.description}
                errorMessage="Description is required"
                placeholder="Description"
                multiline={true}
                numberOfLines={10}
                style={[styles.input, styles.textArea]}
            />
            <View style={styles.buttonWrapper}>
                <CustomButton 
                    title={sending ? "Sending..." : "Submit"}
                    disabled={sending}
                    buttonStyle={styles.button}
                    textStyle={styles.buttonText}
                    onPress={handleSubmit(onSubmit)} 
                />
            </View>
        </View>
    );
};

export default Form;

Answer 1

将

TypeError: Cannot read property 'prototype' of undefined

与

@azure/service-bus

和

TextEncoder

的polyfill一起使用时会出现错误

TextDecoder

，您可以按照以下步骤解决此错误：

安装

fast-text-encoding buffer process

软件包

npm install fast-text-encoding buffer process

在项目根目录或目录中创建一个名为

globals.js

（或任何合适的名称）的文件：

// globals.js
global.TextEncoder = require('fast-text-encoding').TextEncoder;
global.TextDecoder = require('fast-text-encoding').TextDecoder;
global.Buffer = require('buffer').Buffer;
global.process = require('process');

在主应用程序文件中导入

globals.js

文件（例如

App.js

或

index.js

）。

import './globals';
import 'react-native-get-random-values';

使用以下代码更新您的表单组件：

import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, Image } from 'react-native';
import { useForm } from 'react-hook-form';
import { ServiceBusClient } from '@azure/service-bus';
import CustomButton from '../../../../common/components/CustomButton/custom-button';
import CustomTextInput from '../../../../common/components/CustomButton/CustomTextInput/CustomTextInput';
import { styles } from './styles';

const connectionString = "*hidden*";
const topicName = "*hidden*";

const Form = ({ onClose }) => {
    const [sending, setSending] = useState(false);
    const defaultValues = {
        firstName: '',
        lastName: '',
        description: '',
    };

    const { control, handleSubmit, formState: { errors }, reset } = useForm({
        defaultValues,
    });

    const sendMessage = async (data) => {
        setSending(true);

        const sbClient = new ServiceBusClient(connectionString, {
            webSocketOptions: {
                webSocket: WebSocketWrapper,
            },
        });
        const sender = sbClient.createSender(topicName);

        try {
            const message = {
                body: JSON.stringify(data),
                applicationProperties: { device: 1 },
            };
            console.log("Message to be sent:", message);
            await sender.sendMessages(message);
            console.log("Message sent successfully.");
            await sender.close();
        } catch (error) {
            console.error(error);
        } finally {
            await sbClient.close();
            setSending(false);
        }
    };

    const onSubmit = (data) => {
        sendMessage(data).catch(error => {
            console.error("Submit error:", error);
        });
    };

    useEffect(() => {
        reset(defaultValues);
    }, []);

    return (
        <View style={styles.container}>
            <TouchableOpacity style={styles.closeButton} onPress={onClose}>
                <View style={styles.circle}>
                    <Text style={styles.cross}>X</Text>
                </View>
            </TouchableOpacity>
            <View style={styles.logoContainer}>
                <Image
                    source={require('../../../../public/logo.png')}
                    style={styles.logo}
                />
            </View>
            <CustomTextInput
                control={control}
                name="firstName"
                rules={{ required: true }}
                error={errors.firstName}
                errorMessage="First name is required"
                placeholder="First name"
                style={styles.input}
            />
            <CustomTextInput
                control={control}
                name="lastName"
                rules={{ required: true }}
                error={errors.lastName}
                errorMessage="Last name is required"
                placeholder="Last name"
                style={styles.input}
            />
            <CustomTextInput
                control={control}
                name="description"
                rules={{ required: true }}
                error={errors.description}
                errorMessage="Description is required"
                placeholder="Description"
                multiline={true}
                numberOfLines={10}
                style={[styles.input, styles.textArea]}
            />
            <View style={styles.buttonWrapper}>
                <CustomButton
                    title={sending ? "Sending..." : "Submit"}
                    disabled={sending}
                    buttonStyle={styles.button}
                    textStyle={styles.buttonText}
                    onPress={handleSubmit(onSubmit)}
                />
            </View>
        </View>
    );
};

export default Form;

输出：