Webpack error when using graph-client in app bootstrapped w/ Create React App

Start with the linked minimal reproducible Create React App repository and reproduce the Webpack node:url UnhandledSchemeError. Compare its setup with the examples/urql-live-query Vite example, then verify that the CRA application compiles and supports the reported @live query setup without the error.

My team is trying to use @live queries in our front-end, which uses Urql, as we transition to the Graph Network from our self-hosted subgraph, which supports subscriptions.

We have tried to follow the urql-live-query example, which uses Vite. But we bootstrapped our app with create-react-app which uses webpack under the hood, and we've been running into the following compilation error when attempting to use the graph-client with our existing setup:

Module build failed: UnhandledSchemeError: Reading from "node:url" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
    at /home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/NormalModule.js:918:25
    at Hook.eval [as callAsync] (eval at create (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/tapable/lib/Hook.js:18:14)
    at Object.processResource (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/NormalModule.js:915:8)
    at processResource (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/loader-runner/lib/LoaderRunner.js:220:11)
    at iteratePitchingLoaders (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/loader-runner/lib/LoaderRunner.js:171:10)
    at runLoaders (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/loader-runner/lib/LoaderRunner.js:398:2)
    at NormalModule._doBuild (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/NormalModule.js:905:3)
    at NormalModule.build (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/NormalModule.js:1081:15)
    at /home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/Compilation.js:1400:12
    at NormalModule.needBuild (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/NormalModule.js:1410:26)
    at Compilation._buildModule (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/Compilation.js:1381:10)
    at /home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/util/AsyncQueue.js:305:10
    at Hook.eval [as callAsync] (eval at create (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncQueue._startProcessing (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/util/AsyncQueue.js:295:26)
    at AsyncQueue._ensureProcessing (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/util/AsyncQueue.js:282:12)
    at process.processImmediate (node:internal/timers:478:21)

I have created a minimal reproducible example and would greatly appreciate your help with making this work.