[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.

[awais-kaleem-blocksdev]

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] |   }

[awais-kaleem-blocksdev]

i have checked another thing.

when i install this package it install without any error but when in check it in node modules it is not available the.but how compiler does not show error undefined object.
how it import package and give this 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] |   }