You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file using Webpack 5.40.0

I am building web version from existing React Native project using react-native-web.

webpack.config.js

const path = require('path');

const webpack = require('webpack'); const HtmlWebpackPlugin =
  require('html-webpack-plugin');
 
const appDirectory = path.resolve(__dirname); const {presets} =
  require(`${appDirectory}/babel.config.js`);
 
const compileNodeModules = [   // Add every react-native package that
 needs compiling   // 'react-native-gesture-handler', ].map(moduleName
 => path.resolve(appDirectory, `node_modules/${moduleName}`));
 
const babelLoaderConfiguration = {   test: /\.js$|(tsx|jsx)?$/,   //
 Add every directory that needs to be compiled by Babel during the
 build.   include: [
     path.resolve(__dirname, 'index.web.js'), // Entry to your application
     path.resolve(__dirname, 'App.web.tsx'), // Change this to your main App file
     path.resolve(__dirname, 'src'),
     ...compileNodeModules,   ],   use: {
     loader: 'babel-loader',
     options: {
       cacheDirectory: true,
       presets,
       plugins: ['react-native-web'],
     },   }, };
 
const svgLoaderConfiguration = {   test: /\.svg$/,   use: [
     {
       loader: '@svgr/webpack',
     },   ], };
 
const imageLoaderConfiguration = {   test: /\.(gif|jpe?g|png)$/,  
 use: {
     loader: 'url-loader',
     options: {
       name: '[name].[ext]',
     },   }, };
 
module.exports = {   entry: {
     app: path.join(__dirname, 'index.web.js'),   },   output: {
     path: path.resolve(appDirectory, 'dist'),
     publicPath: '/',
     filename: 'fictionate.me.bundle.js',   },   resolve: {
     extensions: ['.web.tsx', '.web.ts', '.tsx', '.ts', '.web.js', '.js'],
     alias: {
       'react-native$': 'react-native-web',
     },   },   module: {
     rules: [
       babelLoaderConfiguration,
       imageLoaderConfiguration,
       svgLoaderConfiguration,
     ],   },   plugins: [
     new HtmlWebpackPlugin({
       template: path.join(__dirname, 'index.html'),
     }),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.DefinePlugin({
       // See: https://github.com/necolas/react-native-web/issues/349
       __DEV__: JSON.stringify(true),
     }),   ], };

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

When I am trying to build web, it failed with following issue. enter image description here

Please help me if someone knows how to fix this issue.