I have been trying to publish and subscribe to device twins from my backend app in React JS.

This is the React JS code to get reported properties

import React from 'react'  
function Greet() {  
    const connectionString = '##########';  
    // The device ID.  
    const deviceId = '####';  
    // The sample connects to service-side endpoint to call direct methods on devices.  
    const Client = require('azure-iothub').Client;  
    const Registry = require('azure-iothub').Registry;  
    // Connect to the service-side endpoint on your IoT hub.  
    const client = Client.fromConnectionString(connectionString);  
    // The sample connects to an IoT hub's Event Hubs-compatible endpoint to read messages sent from a device.  
    const { EventHubClient, EventPosition } = require('@azure/event-hubs');  
    // const { Console } = require('console');  
    // const { stripResponse } = require('@azure/ms-rest-js');  
    // Locate the device twin via the Registry, then update some tags and properties.  
    const registry = Registry.fromConnectionString(connectionString);  
    registry.getTwin(deviceId,function (err, twin) {  
        if (err) {  
            //redMessage(err.constructor.name + ': ' + err.message);  
        } else {   
                console.log("Last received patch: " + twin.properties.reported.Wifi);  
                console.log("Firmware version: " + twin.properties.reported.firmwareVersion);  
                console.log("Fan status: " + twin.properties.reported.fanOn);  
                console.log("Min temperature set: " + twin.properties.reported.minTemperature);  
                console.log("Max temperature set: " + twin.properties.reported.maxTemperature);  
    return (  
        <h1>helloo</h1>  
export default Greet  
But when I run this I get the error below on my console    

How should i solve this problem.