Using Dapr with React

Question

I am creating a react application that I need to invoke dapr using the JavaScript SDK as described here:

https://docs.dapr.io/developing-applications/sdks/js/js-client/

I am trying to invoke dapr from the client side in my App.js file like so:

import * as React from 'react';
import { useState } from "react";
import { DaprClient, DaprServer, HttpMethod, CommunicationProtocolEnum } from "@dapr/dapr";

const daprHost = "127.0.0.1"; // Dapr Sidecar Host
const daprPort = "3500"; // Dapr Sidecar Port of this Example Server
const serverHost = "127.0.0.1"; // App Host of this Example Server
const serverPort = "50051"; // App Port of this Example Server

// HTTP Example
const client = new DaprClient({ daprHost, daprPort }); 

When I do this however I got a lot of errors like this:

Compiled with problems:
×
ERROR in ./node_modules/express/lib/view.js 81:13-25
Critical dependency: the request of a dependency is an expression
ERROR in ./node_modules/on-finished/index.js 207:11-33
Module not found: Error: Can't resolve 'async_hooks' in '/home/asuragen/services/asgn_carrierplus_ui/node_modules/on-finished'
ERROR in ./node_modules/raw-body/index.js 302:11-33
Module not found: Error: Can't resolve 'async_hooks' in '/home/asuragen/services/asgn_carrierplus_ui/node_modules/raw-body'
ERROR in ./node_modules/@dapr/dapr/actors/ActorId.js 15:17-34
Module not found: Error: Can't resolve 'crypto' in '/home/asuragen/services/asgn_carrierplus_ui/node_modules/@dapr/dapr/actors'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }

Is this because the version of webpack I'm using ( ^5.88.2) isn't compactable with the version of dapr I'm using ( ^3.1.2). Or is it because I have the dapr code in App.js (client-side)? I don't currently have anything setup for server side JavaScript. I assume since this is Dapr's client side SDK I should be able to put the code in the front-end.

Please let me know if I'm missing something.

Thank you!