"Module parse failed: Unexpected token" error when bundling React Native app for web using Firebase

Question

Error Message:

CommandError: Module parse failed: Unexpected token (62:8) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#Loaders

return (
<Text selectable={false} {...props]>
{glyph}

(children)

Description:

I'm trying to deploy a React Native app as a web app using Google Firebase. However, when bundling the app for the web, I encounter the above error related to parsing a file. It seems to be related to the handling of JSX syntax. The error file token (62:8) is from node_modules, vector-icons file.

Steps Taken:

• Checked the webpack configuration, but couldn't identify any obvious issues.
• Reviewed similar issues online, but didn't find a solution applicable to my case.
• Attempted to tweak babel or webpack configurations, but without success.

My webpack.config.js file:

const path = require('path');

    module.exports = {
      entry: './App.js', // Entry point for your React Native app
     output: {
      path: path.resolve(__dirname, 'dist'), // Output directory
      filename: 'bundle.js' // Output file
    },
     `module: {
        rules: [
         {
           resolve: {
            alias: {
               // Redirect the file to an empty module, excluding it from compilation
                'node_modules/react-native-vector-icons/lib/create-icon-set.js': false,
             },
           },
        
            exclude: [
              /node_modules/,
             // Add the following regex to exclude the specific file
            /node_modules\/react-native-vector-icons\/lib\/create-icon-set.js$/
           ],`
       test: /\.(js|jsx)$/, // Match .js and .jsx files
        use: {
          loader: 'babel-loader', // Use babel-loader for transpilation
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'] // Use @babel/preset-react for JSX syntax
          }
        },
        exclude: /node_modules/ // Exclude node_modules directory
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot)$/, // Match common binary file types
        loader: 'file-loader', // Use file-loader to handle binary files
        options: {
          name: 'assets[name].[ext]', // Output file name
          outputPath: '/assets/', // Output directory
          publicPath: '/assets/', // Public URL path
          exclude: /node_modules/ // Exclude node_modules directory`
        `},
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'] // Resolve .js and .jsx extensions automatically
  }
};