[Bug]: File was processed with these loaders: [1] * ./node_modules/babel-loader/lib/index.js | You may need an additional loader to handle the result of these loaders.

Nobody has claimed this yet.

### SDK

Web

### Provide environment information

i created my react project with `create-react-app`

when i import this package in index.js

`import { MetaMaskProvider } from "@metamask/sdk-react"
`

i get followig error:

```
./node_modules/@metamask/sdk-react/dist/esm/index.js 20422:249
[1] Module parse failed: Unexpected token (20422:249)
[1] File was processed with these loaders:
[1] * ./node_modules/babel-loader/lib/index.js
[1] You may need an additional loader to handle the result of these loaders.
[1] | };
[1] | return (n, r, i) => {
[1] > t.ethDecryptDeprecation || "eth_decrypt" !== n.method ? t.ethGetEncryptionPublicKeyDeprecation || "eth_getEncryptionPublicKey" !== n.method ? !t.walletWatchAssetNFTExperimental && "wallet_watchAsset" === n.method && [xk, Ak].includes(n.params?.type || "") && (e.warn(Tk.warnings.rpc.walletWatchAssetNFTExperimental), t.walletWatchAssetNFTExperimental = !0) : (e.warn(Tk.warnings.rpc.ethGetEncryptionPublicKeyDeprecation), t.ethGetEncryptionPublicKeyDeprecation = !0) : (e.warn(Tk.warnings.rpc.ethDecryptDeprecation), t.ethDecryptDeprecation = !0), i();
[1] | };
[1] | }
```

here is my package json:

```
{
"version": "1.0.0",
"private": true,
"license": "UNLICENSED",
"dependencies": {
"@babel/compat-data": "7.19.4",
"@babel/generator": "7.19.6",
"@babel/helper-compilation-targets": "7.19.3",
"@babel/helper-create-class-features-plugin": "7.19.0",
"@babel/helper-module-transforms": "7.19.6",
"@metamask/sdk-react": "^0.30.0",
"@tanstack/react-query": "^5.64.2",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"axios": "^0.20.0",
"bootstrap": "^5.1.3",
"contentful": "^7.14.6",
"ethers": "^5.6.4",
"react": "^16.13.1",
"react-bootstrap": "^2.2.3",
"react-dom": "^16.13.1",
"react-remarkable": "^1.1.3",
"react-router-dom": "^6.3.0",
"react-scripts": "^3.4.3",
"sass": "^1.50.0",
"socket.io": "^2.3.0",
"styled-components": "^5.1.1",
"sweetalert2": "^11.4.8",
"viem": "^2.22.13",
"wagmi": "^2.14.9",
"zustand": "^4.0.0-rc.0"
},
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts --openssl-legacy-provider build",
"test": "react-scripts --openssl-legacy-provider test",
"eject": "react-scripts --openssl-legacy-provider eject"
},
"resolutions": {
"@babel/core": "7.19.6",
"@babel/generator": "7.19.6",
"@babel/compat-data": "7.19.4",
"@babel/helper-compilation-targets": "7.19.3",
"@babel/helper-create-class-features-plugin": "7.19.0",
"@babel/helper-module-transforms": "7.19.6",
"babel-loader": "8.2.5"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:7777",
"devDependencies": {
"@babel/core": "^7.26.0",
"@babel/plugin-proposal-optional-chaining": "^7.21.0",
"@babel/preset-env": "^7.26.0",
"@babel/preset-react": "^7.26.3"
}
}
```

i am using node version 20

i run command `npm outdated`

```
npm outdated
Package Current Wanted Latest Location Depended by
@babel/compat-data 7.19.4 7.19.4 7.26.5 node_modules/@babel/compat-data client
@babel/core 7.19.6 7.19.6 7.26.0 node_modules/@babel/core client
@babel/generator 7.19.6 7.19.6 7.26.5 node_modules/@babel/generator client
@babel/helper-compilation-targets 7.19.3 7.19.3 7.26.5 node_modules/@babel/helper-compilation-targets client
@babel/helper-create-class-features-plugin 7.19.0 7.19.0 7.25.9 node_modules/@babel/helper-create-class-features-plugin client
@babel/helper-module-transforms 7.19.6 7.19.6 7.26.0 node_modules/@babel/helper-module-transforms client
@metamask/sdk-react 0.30.2 0.30.2 0.31.5 node_modules/@metamask/sdk-react client
@testing-library/jest-dom 4.2.4 4.2.4 6.6.3 node_modules/@testing-library/jest-dom client
@testing-library/react 9.5.0 9.5.0 16.2.0 node_modules/@testing-library/react client
@testing-library/user-event 7.2.1 7.2.1 14.6.1 node_modules/@testing-library/user-event client
axios 0.20.0 0.20.0 1.7.9 node_modules/axios client
contentful 7.15.2 7.15.2 11.4.4 node_modules/contentful client
ethers 5.7.2 5.7.2 6.13.5 node_modules/ethers client
react 16.14.0 16.14.0 19.0.0 node_modules/react client
react-dom 16.14.0 16.14.0 19.0.0 node_modules/react-dom client
react-router-dom 6.28.2 6.28.2 7.1.3 node_modules/react-router-dom client
react-scripts 3.4.4 3.4.4 5.0.1 node_modules/react-scripts client
socket.io 2.5.1 2.5.1 4.8.1 node_modules/socket.io client
styled-components 5.3.11 5.3.11 6.1.14 node_modules/styled-components client
zustand 4.5.6 4.5.6 5.0.3 node_modules/zustand client
```

### MetaMask SDK Version

0.30.0

### MetaMask Mobile app Version

n/a

### What browser are you using? (if relevant)

chrome - Version 120.0.6099.62 (Official Build) (64-bit)

### How are you deploying your application? (if relevant)

_No response_

### Describe the Bug

i created my react project with `create-react-app`

when i import this package in index.js

`import { MetaMaskProvider } from "@metamask/sdk-react"
`

i get followig error:

```
./node_modules/@metamask/sdk-react/dist/esm/index.js 20422:249
[1] Module parse failed: Unexpected token (20422:249)
[1] File was processed with these loaders:
[1] * ./node_modules/babel-loader/lib/index.js
[1] You may need an additional loader to handle the result of these loaders.
[1] | };
[1] | return (n, r, i) => {
[1] > t.ethDecryptDeprecation || "eth_decrypt" !== n.method ? t.ethGetEncryptionPublicKeyDeprecation || "eth_getEncryptionPublicKey" !== n.method ? !t.walletWatchAssetNFTExperimental && "wallet_watchAsset" === n.method && [xk, Ak].includes(n.params?.type || "") && (e.warn(Tk.warnings.rpc.walletWatchAssetNFTExperimental), t.walletWatchAssetNFTExperimental = !0) : (e.warn(Tk.warnings.rpc.ethGetEncryptionPublicKeyDeprecation), t.ethGetEncryptionPublicKeyDeprecation = !0) : (e.warn(Tk.warnings.rpc.ethDecryptDeprecation), t.ethDecryptDeprecation = !0), i();
[1] | };
[1] | }
```

### Expected Behavior

expected to load app

### Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

_No response_

### To Reproduce

i created my react project with `create-react-app`

when i import this package in index.js

`import { MetaMaskProvider } from "@metamask/sdk-react"
`

i get followig error:

```
./node_modules/@metamask/sdk-react/dist/esm/index.js 20422:249
[1] Module parse failed: Unexpected token (20422:249)
[1] File was processed with these loaders:
[1] * ./node_modules/babel-loader/lib/index.js
[1] You may need an additional loader to handle the result of these loaders.
[1] | };
[1] | return (n, r, i) => {
[1] > t.ethDecryptDeprecation || "eth_decrypt" !== n.method ? t.ethGetEncryptionPublicKeyDeprecation || "eth_getEncryptionPublicKey" !== n.method ? !t.walletWatchAssetNFTExperimental && "wallet_watchAsset" === n.method && [xk, Ak].includes(n.params?.type || "") && (e.warn(Tk.warnings.rpc.walletWatchAssetNFTExperimental), t.walletWatchAssetNFTExperimental = !0) : (e.warn(Tk.warnings.rpc.ethGetEncryptionPublicKeyDeprecation), t.ethGetEncryptionPublicKeyDeprecation = !0) : (e.warn(Tk.warnings.rpc.ethDecryptDeprecation), t.ethDecryptDeprecation = !0), i();
[1] | };
[1] | }
```

Start by reproducing the import from index.js with the versions listed in package.json and inspect the failing @metamask/sdk-react/dist/esm/index.js entry point. Compare the create-react-app, React, Node, and SDK versions involved, then verify that the app builds and loads without the module parse error.

Written by the indexing model from the issue text.