Google Maps/Mapbox API with ReactJS/Typescript web app using webpack not working?

Question

I am building a ReactJS web application in Typescript. I am using webpack and node.js to start server and manage packages. I have a webpack.config.js file and node_modules directory that gave me no issues until recently trying to integrate the Google Maps and Mapbox APIs into my application to use map/autocomplete features.

I followed the documentation available at this link for Google Maps: https://www.npmjs.com/package/@googlemaps/js-api-loader and this link for Mapbox: https://github.com/alex3165/react-mapbox-gl as well as this one for type definitions: https://www.npmjs.com/package/@types/mapbox-gl

I have a file for client-side page component called Housing.tsx. Upon initially uncommenting either definition (see below) of const Map or const loader, I got 200+ errors related to node_modules. After troubleshooting with GPT and adding several fallbacks to webpack.config and new imports to package.json, I've narrowed it down to 11 errors all related to the same 'dns' package, which to my knowledge is a builtin. The error looks something like this:

ERROR in ./node_modules/make-fetch-happen/lib/options.js 1:12-26
Module not found: Error: Can't resolve 'dns' in '/Users/whipple/projects/intern-io/node_modules/make-fetch-happen/lib'
ERROR in ./node_modules/socks-proxy-agent/dist/index.js 33:25-39
Module not found: Error: Can't resolve 'dns' in '/Users/whipple/projects/intern-io/node_modules/socks-proxy-agent/dist'

And here is my Housing.tsx file:

import { GMAPS_API_KEY } from "../../../../server/auth";
import { MAPBOX_ACCESS_TOKEN } from "../../../../server/auth";
import { Loader } from "@googlemaps/js-api-loader";
import ReactMapboxGl, { Layer, Feature } from "react-mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

...

 const Map = ReactMapboxGl({
    accessToken: MAPBOX_ACCESS_TOKEN!,
  });

  @ts-ignore google.maps.plugins
  const loader = new Loader({     apiKey: GMAPS_API_KEY!,
    version: "weekly",
    libraries: ["places", "maps", "streetView"],
  });

 const initGoogleMaps = () => {
    const mapOptions = {
      center: {
        lat: 37.4708247,
        lng: -121.927533,
      },
      zoom: 10,
    };
    loader
      .load()
      .then((google) => {
        setMap(new google.maps.Map(document.getElementById("map") as HTMLElement, mapOptions));
      })
      .catch((e) => {});

    const input = document.getElementById("location") as HTMLInputElement;
    const autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.addListener("place_changed", () => {
      const place = autocomplete.getPlace();
      console.log(place);
    });
  };

 useEffect(() => {
    initGoogleMaps();
  }, []);


...

return (
    <>
      <script
        src={`https://maps.googleapis.com/maps/api/js?key=${GMAPS_API_KEY}&libraries=places`}
      ></script>
      <Map
                style="mapbox://styles/mapbox/streets-v9"
                containerStyle={{
                  height: "100%",
                  width: "100%",
                }}
              >
                <Layer type="symbol" id="marker" layout={{ "icon-image": "marker-15" }}>
                  <Feature coordinates={[37.4708247, -121.927533]} />
                </Layer>
      </Map>
     
     
    </>
  );

When I attempt to npm install dns, I get this error indicating a node version mismatch:

npm ERR! code EBADENGINE
npm ERR! engine Unsupported engine
npm ERR! engine Not compatible with your version of node/npm: [email protected]
npm ERR! notsup Not compatible with your version of node/npm: [email protected]
npm ERR! notsup Required: {"node":">= 0.10.0 < 0.11.0"}
npm ERR! notsup Actual:   {"npm":"10.2.3","node":"v20.10.0"}

I have a feeling I shouldn't even be encountering this import issue with 'dns' though, especially since I'm importing/calling the maps API from the client side and installed all the necessary types. Any insight is appreciated