(@walletconnect/ethereum-provider)You may need an appropriate loader to handle this file type, currently no loaders are configured to process

Question

this is package.json file configuration

 "next": "9.5.5"
 "next-images": "^1.6.2",
 "next-videos": "^1.4.0",
 "webpack": "^4.42.0"
 "react-relay": "^10.1.2",

these versions are working properly but when I add an updated version of "@walletconnect/ethereum-provider": from "2.8.5" to "^2.11.0"( Latest ),

it gives me unexpected token errors and does not use the appropriate loader error.

showing some file

tsconfig.js

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "module": "esnext",
    "moduleResolution": "node",
    "isolatedModules": true,
    "noImplicitAny": false,
    "jsx": "preserve",
    "esModuleInterop": true,
    "resolveJsonModule": true
  },
  "include": [
    "next-env.d.ts",
    "./node_modules/web3-typescript-typings/index.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "**/__generated__/**",
    "**/*.graphql.ts",
  ]
}

next.config.js

const withImages = require("next-images");
const withVideos = require("next-videos");

module.exports = withVideos(
  withImages({
    fileExtensions: ["jpg", "jpeg", "png", "gif", "svg"],
    env: {},
    webpack(config, options) {
      if (!options.isServer) {
        config.resolve.alias["@sentry/node"] = "@sentry/browser";
      }
      if (!options.isServer) {
        config.node = {
          fs: "empty",
        };
      }
      config.module.rules.push({
        test: /node_modules[\\/]@walletconnect/,
        loader: require.resolve('esbuild-loader'),
      });
      config.module.rules.push({
        test: /node_modules[\\/]@metamask/,
        loader: require.resolve('esbuild-loader'),
      });
      config.module.rules.push({
        loader: require.resolve('babel-loader'),
        test: '/\.(js|jsx|tsx)$/',
        exclude: /node_modules/,
      });
      return config;
    },
    pageExtensions: ['tsx', 'jsx', 'js']
  })
);

and in package.json added babel-loader also

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "styled-components",
        {
          "ssr": true,
          "displayName": true,
          "preprocess": false
        }
      ],
      [
        "relay"
      ],
      [
        "@babel/plugin-transform-react-jsx",
        {
          "runtime": "automatic"
        }
      ]
    ]
  }

here is webpack.config.js file

{
  module: {
    rules: [
      {
        test: /\.scss$/,
        uese: {
          loader: "sass-loader",
          options: {
            includePaths: [
              path.resolve("../node_modules"), 
            ],
          },
        },
      },
      {
        test: require.resolve('jquery/dist/jquery.slim'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },{
          loader: 'expose-loader',
          options: '$'
        }]
      }
    ];
  }
}