WebPack React - Support for the experimental syntax 'jsx' isn't currently enabled - reactjs

Question

I've checked every other question and none seem to provide an answer that work for me.
Getting this error when attempting to compile:
27 |
28 | return (
> 29 | <G x={logoPosition} y={logoPosition}>
| ^
30 | <Defs>
31 | <ClipPath id='clip-logo-background'>
32 | <Rect
Add #babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add #babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
This is the code that is causing it:
import * as React from "react";
import WalletConnectProvider from "#walletconnect/react-native-dapp";
import AsyncStorage from "#react-native-async-storage/async-storage";
export default function WalletConnector() {
return (
<WalletConnectProvider
bridge="https://bridge.walletconnect.org"
clientMeta={{
description: "Connect with WalletConnect",
url: "https://walletconnect.org",
icons: ["https://walletconnect.org/walletconnect-logo.png"],
name: "WalletConnect",
}}
redirectUrl={window.location.origin}
storageOptions={{
asyncStorage: AsyncStorage as any,
}}
>
<>{/* awesome app here */}</>
</WalletConnectProvider>
);
}
This is the package causing it: "#walletconnect/react-native-dapp": "^1.4.1"
I've added .babelrc with the following and problem persists.
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
I've also added babel.confis.json which didn't help and added a babel section in my package.json with the proper plugins/presets and still no change.

Answer 1

For bare CLI project update below files.
Reference: https://github.com/WalletConnect/walletconnect-monorepo/issues/753
Update metro-config.js
module.exports = {
resolver: {
extraNodeModules: require("node-libs-react-native")
},
. . .
};
Add following statement in index.js
require("node-libs-react-native/globals.js");