Category: javascript

This is a weird problem that I have where the backdrop-filter: blur(5px) in this css & html code:

    .overlay {
            position: absolute;
            top: 44%;
            right: 5%;
            width: 16%;
            height: 29%;
            z-index: 2;
            /*background-color: black; */
            -webkit-backdrop-filter: blur(5px)!important;
                    backdrop-filter: blur(5px)!important; /* Adjust the blur radius as needed */
            background: inherent
    }

<div class="image-container" id="embedLinkContainer">
    <div class="overlay"></div>
</div>

works for web browsers on computers but only works on some mobile devices.

When I combine the above html with this javascript code:

document.addEventListener("DOMContentLoaded", function() {
            var videoId = 7244605496349445403n;
            console.log(videoId)

            // Define the base TikTok embed URL and language parameter
            const baseEmbedUrl = "https://www.tiktok.com/embed/v2/";
            const langParam = "?lang=en-US";

            // Construct the dynamic TikTok embed link using the videoId and language parameter
            const dynamicEmbedLink = `${baseEmbedUrl}${videoId}${langParam}`;

            // Create a new iframe element
            const iframe = document.createElement('iframe');

            iframe.setAttribute('src', dynamicEmbedLink);
            iframe.setAttribute('width', '327');  // Set width as needed 327
            iframe.setAttribute('height', '775'); // Set height as needed 775
            iframe.setAttribute('frameborder', '5'); // Optional: Remove iframe border

            document.getElementById('embedLinkContainer').appendChild(iframe);
});

the blur applies to mobile web browsers, but this javascript:

$(document).ready(function() {
    $.ajax({
        type: "POST",
        url: "my_python_flask_link/get_video_data",
        success: function(response) {
            var videoId = response.video_id;
            console.log(videoId)

            // Define the base TikTok embed URL and language parameter
            const baseEmbedUrl = "https://www.tiktok.com/embed/v2/";
            const langParam = "?lang=en-US";

            // Construct the dynamic TikTok embed link using the videoId and language parameter
            const dynamicEmbedLink = `${baseEmbedUrl}${videoId}${langParam}`;

            // Create a new iframe element
            const iframe = document.createElement('iframe');

            iframe.setAttribute('src', dynamicEmbedLink);
            iframe.setAttribute('width', '327');  // Set width as needed 327
            iframe.setAttribute('height', '775'); // Set height as needed 775
            iframe.setAttribute('frameborder', '5'); // Optional: Remove iframe border

            document.getElementById('embedLinkContainer').appendChild(iframe);
        }
    })
});

which uses an ajax request to make the video id dynamic, does not apply the blur on mobile devices.

Using an ajax request to dynamically change the video id is essential for my website.

What may be causing this issue?

I am a student learning to code so don’t expect the codes to be of good quality. I am making a game for my school project and I use javascript, node js and mysql2 in VS Code. I only use postman to get the results in json since I have not learnt to implement the front-end.

The postman will be used as “post – http://localhost:3000/inventory/userId” where userId is what the user will want to put in and it will create a player and at the same it will also create the inventory, equipped and unequipped rows. The newly created rows should be used in the invenoty and player columns. If you look at my image or tables I think you might understand what I’m trying to say.
Diagram of my tables, or at least the idea of it.

I think I might need to use middleware function but I’m still not really sure of it.

I have not really written anything for my controller file as I first wanted to make sure that I have the code to create the rows with the items. Below are the codes that I have written so far.

inventoryRoute.js

const express = require('express');
const router = express.Router();

const controller = require('../controllers/inventoryController');

router.post('/:userId', controller.createPlayer); // Create player with inventory

module.exports = router;

inventoryModel.js

module.exports.insertSingle = (data, callback) => {
    const SQL_STATEMENT = `
    INSERT INTO Inventory (equipped_id, unequipped_id)
    INSERT INTO Equipped (inventory_id, weapon_id, armor_id, artifact_id)
    INSERT INTO Unequipped (inventory_id, weapon_id, armor_id, artifact_id)
    INSERT INTO Player (user_id, inventory_id)
    VALUES (?, ?);
    SELECT * FROM Player
    WHERE id = LAST_INSERT_ID(); 
    `;
    const VALUES = [data.user_id, data.inventory_id];

    pool.query(SQL_STATEMENT, VALUES, callback);
}

table.js

CREATE TABLE User (
    user_id INT PRIMARY KEY AUTO_INCREMENT,
    username TEXT,
    email TEXT
);

CREATE TABLE Player (
    player_id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT NOT NULL,
    inventory_id INT NOT NULL,
    hp INT DEFAULT 3,
    atk INT DEFAULT 1,
    def INT DEFAULT 1
);

CREATE TABLE Inventory (
    inventory_id INT PRIMARY KEY AUTO_INCREMENT,
    equipped_id INT NOT NULL,
    unequipped_id INT NOT NULL
);

CREATE TABLE Equipped (
    equipped_id INT PRIMARY KEY AUTO_INCREMENT,
    inventory_id INT,
    weapon_id INT,
    armor_id INT,
    artifact_id INT
);

CREATE TABLE Unequipped (
    unequipped_id INT PRIMARY KEY AUTO_INCREMENT,
    inventory_id INT,
    weapon_id INT,
    armor_id INT,
    artifact_id INT
);

CREATE TABLE Weapon (
    weapon_id INT PRIMARY KEY AUTO_INCREMENT,
    unequipped_id INT,
    merchant_id INT NOT NULL,
    name TEXT NOT NULL,
    description TEXT,
    atk INT,
    points INT
);

INSERT INTO Weapon (unequipped_id, merchant_id, name, description, atk, points) VALUES
(NULL, 1, 'Dull Sword', 'A sword that has not been sharpened in a while', 3, 1);

CREATE TABLE Armor (
    armor_id INT PRIMARY KEY AUTO_INCREMENT,
    unequipped_id INT,
    merchant_id INT NOT NULL,
    name TEXT NOT NULL,
    description TEXT,
    def INT,
    points INT
);

INSERT INTO Armor (unequipped_id, merchant_id, name, description, def, points) VALUES
(NULL, 1, 'Worned Out Armor', 'An armor that has worn out due to long usage and no maintenance', 3, 1);

CREATE TABLE Artifact (
    artifact_id INT PRIMARY KEY AUTO_INCREMENT,
    unequipped_id INT,
    merchant_id INT NOT NULL,
    name TEXT NOT NULL,
    description TEXT,
    hp INT,
    points INT
);

INSERT INTO Artifact (unequipped_id, merchant_id, name, description, hp, points) VALUES
(NULL, 1, 'Health Boost Necklace', 'A necklace that increases health slightly', 2, 1);

CREATE TABLE Merchant (
    merchant_id INT PRIMARY KEY AUTO_INCREMENT,
    name TEXT NOT NULL,
    weapon_id INT NOT NULL,
    armor_id INT NOT NULL,
    artifact_id INT NOT NULL
);

INSERT INTO Merchant (name, weapon_id, armor_id, artifact_id) VALUES
('John', 1, 1, 1);

The image does not goes to the functions I have described and I always get a react error

“”

Uncaught Error: Minified React error #231; visit https://reactjs.org/docs/error-decoder.html?invariant=231&args[]=onChange&args[]=string for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Pe (main.ca9076db.js:2:2238017)
    at Lr (main.ca9076db.js:2:2263082)
    at Gn (main.ca9076db.js:2:2251653)
    at main.ca9076db.js:2:2261179
    at Ne (main.ca9076db.js:2:2338575)
    at main.ca9076db.js:2:2258674
    at Wr (main.ca9076db.js:2:2258704)
    at Jt (main.ca9076db.js:2:2246750)
    at Zt (main.ca9076db.js:2:2245976)
    at t.unstable_runWithPriority (main.ca9076db.js:2:3104636)

""

Using yarn I recently added the @superset-ui/embedded-sdk library to my react project that is using webpack to build. When we run our prod build everything seems fine, but for our dev build it is failing to compile. I don’t fully understand webpack so it’s hard for me to figure out how to move forward. I have tried upgrading some dependencies but that doesn’t seem to do anything.

The only thing that I have managed to narrow it down to is if I change my BABEL_ENV=development in my script file to BABEL_ENV=production then it seems to compile and run fine. What can my next steps be in order to try and resolve the issue?

Here is the actual error –

./node_modules/@superset-ui/embedded-sdk/lib/index.js 74:45
Module parse failed: Unexpected token (74:45)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       const iframe = document.createElement('iframe');
|       const dashboardConfig = dashboardUiConfig ? `?uiConfig=${calculateConfig()}` : "";
>       const filterConfig = dashboardUiConfig?.filters || {};
|       const filterConfigKeys = Object.keys(filterConfig);
|       const filterConfigUrlParams = filterConfigKeys.length > 0 ? "&" + filterConfigKeys.map(key => _const.DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY[key] + '=' + filterConfig[key]).join('&') : ""; // set up the iframe's sandbox configuration

I currently have a table with two rows, and my Javascript is intended to work as when a cell in the table is clicked the entire row’s element disappears and the clicked cell gets cloned to the leftmost position, and a slider will open up on the right side of the cloned cell. However, when I try to do the function of closing the slider I have no idea how to specify which slider to close, therefore often times if I have both of the sliders in the two rows open up the wrong one will get closed. I’m trying to add a class for the cloned element and a class for the slider defining which row each of them are in and therefore specify which one to close but I’m not sure how I can specify the slider to close by their class.

HTML:

<table id='TrendGames'>
        <tbody>
            <tr>
                <td id="cell1" class='Row1'>
                <img class='GameCover' src='Fortnite Front Cover.png' alt="cell1" />
                </td>
                <td id="cell2">
                <img class='GameCover' src='LOL Front Cover.png' alt="cell2" />
                </td>
                <td id="cell3">
                <img class='GameCover' src='Minecraft Front Cover.png' alt="cell3" />
                </td>
                <td id="cell4">
                <img class='GameCover' src='Roblox Front Cover.png' alt="cell4" />
                </td>
            </tr>
            <tr>
                <td id="cell5" class='Row2'>
                <img class='GameCover' src='Call of Duty Front Cover.jpg' alt="cell5" />
                </td>
                <td id="cell6">
                <img class='GameCover' src='Valorant Front Cover.jpg' alt="cell6" />
                </td>
                <td id="cell7">
                <img class='GameCover' src='Counter Strike 2 Front Cover.jpeg' alt="cell7" />
                </td>
                <td id="cell8">
                <img class='GameCover' src='The Sim 4 Front Cover.webp' alt="cell8" />
                </td>
            </tr>
      </tbody>
</table>

Javascript:

document.addEventListener('DOMContentLoaded', function() {
  let table = document.getElementById('TrendGames');
  table.addEventListener('click', function(event) {
    let clickedCell = event.target.closest('td');
    if (clickedCell) {
      handleCellClick(clickedCell);
    }
  });
});

function handleCellClick(clickedCell) {
  const row = clickedCell.parentElement;
  const cells = row.children;
  const display = cells[cells.length - 1].style.display ? '' : 'none';

  for (let i = 0; i < cells.length; i++) {
    cells[i].style.display = display;
  }
  if (display) { 
    const newCell = clickedCell.cloneNode(true);
    newCell.style.display = '';
    newCell.colSpan = cells.length;
    row.insertBefore(newCell, row.firstChild);
    openSlider(newCell);
  } else {
    clickedCell.remove();
    closeSlider(clickedCell);
  }
}
    
function openSlider(cell) {
  let WhichSlider = cell.id; // Using cell.id instead of clickedCell.ID
  switch(WhichSlider) {
    case "cell1":
        slider1(cell)
        break;
    case "cell2":
        slider2(cell)
        break;
    case "cell3":
        slider3(cell)
        break;
    case "cell4":
        slider4(cell)
        break;
    case "cell5":
        slider5(cell)
        break;
    case "cell6":
        slider6(cell)
        break;
    case "cell7":
        slider7(cell)
        break;
    case "cell8":
        slider8(cell)
        break;
  }
}

// down here are the functions of the open slider (slider1-slider8)

function closeSlider(cell) {
let slider = document.querySelector('.slider');
if (slider) {
    slider.remove();
}
}

I want to try to make a texture generator that allows you to make texture images or spritesheet flipbooks for VFX particles in games like Roblox and Unity/Unreal, capable of producing 2×2, 4×4, and 8×8 flipbooks as well. This I want to have a few aspects as adobe after effects has. Capable of also producing any where from lightning to animated text, wind, slashes, smoke, fire, water, etc.

I dont want this application to save any images yet, mostly to offer the user to download the generated image to their PC.

I also want to fit this into a web application, and host it on my own domain.

I have intermediate JS experience and semi advanced HTML/CSS experience.

heres a few examples of what im aiming to generate with this application.

these are images of single texture images and flipbook spritesheet images.

Single Textures:

Flipbook/Spritesheets:

I havent tried anything yet, just a generic question on where I should begin.

I’m currently using esbuild-wasm in my React frontend app. I’ve been converting it to a Next.JS app and am having trouble getting esbuild-wasm working since it keeps complaining that

Error: The "wasmURL" option only works in the browser

This used to work when I was on create-react-app but now with next-js I’m assuming it’s in the Node context and no longer works.

I’d like to convert react code from jsx -> pure JS and I’m wondering if there is a better way to do so?

The basic context here is that I am looking to dynamically transform the code and render the transformed code in an iframe.

My setup is that I have a next_app where the esbuild.wasm is server under next_app/public.

Is there another way to do this?

I have a class component that consist of ApexCharts properties in apexchart.js file. I want to display the charts at a functional component, Index.jsx but it shows that error. I followed the official docs of ApexCharts and try to solve the error from this discussion. However, no solution has solve my problem. I’m not sure whether the way I call the class or they way I write two charts’ properties in one class is wrong. Any advice or solution is greatly appreciated. Thank you.

Below is the code:

apexchart.js

import React, { Fragment, Component } from "react";
import Chart from "apexcharts";

class ApexChart extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      stacked_column_chart: {
        options: {
          chart: {
            id: "stacked-column-chart",
            height: 380,
            type: "bar",
            stacked: !0,
            toolbar: { show: !1 },
            zoom: { enabled: !0 },
          },
          xaxis: {
            categories: [
              "Jan",
              "Feb",
              "Mar",
              "Apr",
              "May",
              "Jun",
              "Jul",
              "Aug",
              "Sep",
              "Oct",
              "Nov",
              "Dec",
            ],
          },
        },
        plotOptions: {
          bar: { horizontal: !1, columnWidth: "20%", endingShape: "rounded" },
        },
        dataLabels: { enabled: !0 },
        series: [
          { name: "Earning", data: [5, 7, 7, 6, 7, 5, 7, 6, 7, 4, 6, 7] },
          { name: "Paid", data: [5, 6, 4, 5, 6, 4, 3, 5, 4, 6, 4, 3] },
        ],
        colors: ["#525ce5", "#edf1f5"],
        legend: { show: !1 },
        fill: { opacity: 1 },
      },
      //   statistic chart
      stastics_chart: {
        options: {
          chart: {
            id: "stastics-chart",
            type: "area",
            height: 80,
            sparkline: { enabled: !0 },
          },
        },
        series: [
          {
            data: [24, 66, 42, 88, 62, 24, 45, 12, 36, 10],
          },
        ],
        stroke: {
          curve: "smooth",
          width: 2,
        },
        colors: ["#525ce5"],
        tooltip: {
          fixed: { enabled: !1 },
          x: { show: !1 },
          y: {
            title: {
              formatter: function (e) {
                return "";
              },
            },
          },
          marker: {
            show: !1,
          },
        },
      },
    };
  }

  render() {
    return (
      <Fragment>
        <Chart
          options={this.state.stacked_column_chart.options}
          series={this.state.stacked_column_chart.series}
          type={this.state.stacked_column_chart.options.chart}
          height={380}
        />
        <Chart
          options={this.state.stastics_chart.options.chart}
          series={this.state.stastics_chart.series}
          type="area"
          height={80}
        />
      </Fragment>
    );
  }
}
export default ApexChart;

Index.jsx

import React, { Fragment, useEffect } from "react";
import Charts from "../apexchart";

export default function Index() {
  return (
    <div className="main-content">
      <div id="stacked-column-chart" class="apex-charts" dir="ltr">
        <Charts />
      </div>
  );
}

error: (when import apexcharts package)

error: (when import react-apexcharts package)

I’m new to coding and currently working on a project that using webpack. I want to create a menu with 20 items presented in card styles, where each card includes both the item name and its corresponding picture. Notably, the image names match the item names.

I’ve implemented a function to generate these cards, but I’m encountering an issue where the images fail to load on the page when using the function to call the image names. If I manually type in the photo name, the image successfully loads. Therefore, I’m sure all the photos are imported. I wonder how to address this issue and optimal the process. Thank you.

function importAll(r) {
    let images = {};
    r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
    return images;
  }
  
  const images = importAll(require.context('./images', false, /.(png|jpe?g|svg)$/));

const itemList = ["Honey", "Chocolate", "Matcha", "Coffee"];

function cards(e) {
    const card = document.createElement("div");
    card.classList.add("menu-item");
    const itemName = document.createElement("h2");
    itemName.textContent = e;
    const picture = document.createElement("img");
    picture.src = `images['${e.toLowerCase()}.jpg'];`; // work if I type images[honey.jpg];
    picture.alt = `${e}`;
    card.appendChild(picture);
    card.appendChild(itemName);
    return card
}

function menuPage() {
    const mainContent = document.createElement('div');
    mainContent.classList.add("menuContent");
    const header = document.createElement('h1');
    header.classList.add("header");
    header.textContent="Our Menu";
    mainContent.appendChild(header);

    for (let i = 0; i < itemList.length; i++){
        const e = itemList[i];
        mainContent.appendChild(cards(e));
    }
    return mainContent;
}

Working on a gatsby side project where I’m also using Typescript. I never used Typescript before so I’m expecting some sort of PHP type declaration behavior, but not sure, if that’s how it works. I’ve done quite a lot of work and happily carried on (thinking how good I’m with Typescript), when just realized that some of my imported interfaces were undefined and never got any error because of it. So I tried to break my code by using wrong types but Typescript seems to be ignoring all the declarations.
Here is an example:
I got this interface (draggable.ts):

export interface Draggable {
   x: number,
   y: number
}

Exported by this guy (index.ts)

import Draggable from './draggable';
import Resizable from './resizable';
import Stageable from './stageable';
import Page from './page';
import ToolState from './states/tool-state';
import CommonAction from './states/action';
import ToolItem from './tool';

export default {
   Draggable,
   Resizable,
   Stageable,
   ToolState,
   Page,
   CommonAction,
   ToolItem
}

Which is then imported as follows in the component

import Interfaces from '../interfaces';

And used in the following method’s type hinting:

 reposition: (event: MouseEvent, diffPos: Interfaces.Draggable) => {
     const position = {
         x: event.screenX - diffPos.x,
         y: event.screenY - diffPos.y
     }

    dispatch({ type: 'UPDATE_BAR_POSITION', payload: { position }})
}

Now if I try to call that method with wrong argument type, the code will run with no problem:

<div 
  className="bg-gray-600 toolbar" 
  style={{top: barPosition.y + 'px', left: barPosition.x + 'px', width: barWidth}}
  onDragStart={dragStart}
  onDrag={e => reposition(e, 'blaa')}
  onDragEnd={e => reposition(e, diffPos)}
  draggable={true}
>

Even if I try something like

onDrag={e => reposition(e, {x: 'blaa', y: 'blablaaa'})}

doesn’t make any difference.
Probably I’m having some misunderstanding how Typescript works.
Thanks.

I keep getting this error and I don’t know why I’ve tried using npm and script tags but I keep getting this error TypeError: Module name, ‘firebase/app’ does not resolve to a valid URL.

I was expecting for there to be no errors and so I could console.log(firebase)

I am finding it difficult to create a post request for a data model with two references either because of the way my code is structured or my little experience in mongoose, will need some help, I am a little bit stuck here.

From the code, I know there should be some sort of Id passed between the front end and back end but some tricks I have tried have not really worked, I will need some fresh ideas on how to implement this on my current code thank you.

//NewInvoiceData - the data model I want to send the post requests
const mongoose = require('mongoose')

const newInvoiceSchema = new mongoose.Schema(
    {

        invoiceDate: {
            type: String,
            required: true
        },
        invoiceDueDate: {
            type: String,
            required: true
        },
        customerInfoInvoiceData: {
            type: mongoose.Schema.Types.ObjectId,
            ref: 'CustomerInfoInvoiceData'
        },
        itemsInvoiceData: {
            type: mongoose.Schema.Types.ObjectId,
            ref: 'ItemsInvoiceData'
        }

    },

    {
        timestamps: true
    }

)
module.exports = mongoose.model('NewInvoiceData', newInvoiceSchema)

//The two models the above model is referencing is as seen below
//customerInfoInvoiceData
const mongoose = require('mongoose')
const NewInvoiceData = require('./NewInvoiceData');

const customerInfoInvoiceSchema = new mongoose.Schema(
    {
        customerName: {
            type: String
        },
        customerPhoneNumber: {
            type: Number
        },
        customerAddress: {
            type: String,
            // required:true
        },
        customerState: {
            type: String
        },

        // newInvoiceData: {
        //     type: mongoose.Schema.Types.ObjectId,
        //     ref: 'NewInvoiceData'
        // },

    },

    {
        timestamps: true
    }
)
module.exports = mongoose.model('CustomerInfoInvoiceData', customerInfoInvoiceSchema)

//ItemsInvoiceData
const mongoose = require('mongoose')
const NewInvoiceData = require('./NewInvoiceData');


const itemsInvoiceSchema = new mongoose.Schema(
    {
        productName: {
            type: String
        },
        costPrice: {
            type: Number
        },
        sellingPrice: {
            type: Number
        },
        unitOfMeasurement: {
            type: String
        },
        quantity: {
            type: Number
        },

        // newInvoiceData: {
        //     type: mongoose.Schema.Types.ObjectId,
        //     ref: 'NewInvoiceData'
        // },
    },

    {
        timestamps: true
    }

)
module.exports = mongoose.model('ItemsInvoiceData', itemsInvoiceSchema)


//Controller Creating the post request
//newInvoiceController
const NewInvoiceData = require('../models/NewInvoiceData')
const CustomerInfoInvoiceData= require('../models/CustomerInfoInvoiceData')
const ItemsInvoiceData=require('../models/ItemsInvoiceData')
const asyncHandler = require('express-async-handler')

const createNewInvoice = asyncHandler(async (req, res) => {
    const { invoiceDate, invoiceDueDate, customerInfoInvoiceData, itemsInvoiceData } = req.body

    if (!invoiceDate || !invoiceDueDate || !customerInfoInvoiceData || !itemsInvoiceData) {

        return res.status(400).json({ message: 'All fields are required' })
    }
    const addNewInvoice = await NewInvoiceData.create({ invoiceDate, invoiceDueDate, customerInfoInvoiceData, itemsInvoiceData})

    if (addNewInvoice) {//created
        res.status(201).json({ message: 'New Item Recorded' })
        console.log(addNewInvoice)
      
    } else {
        res.status(400).json({ message: 'Invalid Item' })
    }
})

//Here is my route
//newInvoiceRoute

const express = require('express')
const router = express.Router()
const newInvoiceController = require('../contollers/newInvoiceController')

router.route('/')
      .post(newInvoiceController.createNewInvoice) 
      .get(newInvoiceController.getNewInvoice)
      
module.exports = router


//React FrontEnd Code talking to the database via Axios (this is
just a snippet and not the complete react code)

const saveInvoiceDates = (e) => {
           e.preventDefault()
         Axios.post('http://localhost:3500/newInvoice', {invoiceDate, invoiceDueDate})
            .then((response) => { alert('TRANSACTION CREATED') }).catch(function (error) {
            console.log(error);
        });
    }

    const saveCustomerInvoiceInfo = (e)=>{
        Axios.post('http://localhost:3500/customerInvoiceInfo', 
        {customerName, customerAddress, customerPhoneNumber, customerState})
            .then((response) => { alert('TRANSACTION CREATED') }).catch(function (error) {
            console.log(error);
        });
    }

    const saveItemsInvoiceDetails = (e)=>{
        Axios.post('http://localhost:3500/itemInvoiceInfo', 
        {productName, costPrice, sellingPrice, unitOfMeasurement, quantity})
            .then((response) => { alert('TRANSACTION CREATED') }).catch(function (error) {
            console.log(error);
        });
    }

I have below code. It gives build error.

const [status, setStatus] = useState(null);

const handleSubmit = 
    async (name, ipaddr, port, sshuser, sshpass, sshport, license) => {

    setStatus(null);
    
    const userData = localStorage.getItem('user');
    
    if(userData != null) {
        var user = JSON.parse(userData);
        
        try {
            const res = await axios.post('/exec/addcontroller', 
                {user.email, name, ipaddr, port, sshuser, sshpass, sshport, license},
                {headers: {
                    'Authorization': user.jwt,
                }}
            ).then( function (res) {
                if(res.status === 200) {
                    setStatus({
                        type: 'success',
                        message: `Controller ${name} added successfully`,
                    });                    
                } else {
                    setStatus({
                        type: 'error',
                        message: `Could not add controller ${name}`,
                    });                    
                }
            });
        }catch(err) {
            setStatus({
                type: 'error',
                message: err.message,
            });                    
        }
    } else {
        setStatus({
            type: 'error',
            message: "User not logged in",
        });                    
    }
};

When I access the site, I get below error.

What could be the reason for this error?

Everything works as intended, besides the last part in the try block. Granted there is a lot of comments in this try block of past attempts, which have all failed. In the first screenshot screenshot1 it shows what it should look like if I manually click the arrow for the drop down. And in the second screenshot it shows what the code currently does screenshot2. It seems like the website that I click on only appears correctly if I follow the procedure in the code (login to class registation, click submit, and then click Get Registed on another page that sends me to the one I’m currently working on). I understand that it would be pretty hard to help me due to the fact that you can only login in with my credentials, unless you are a student at OSU.

I tried multiple ways of accessing the correct HTML Id’s, but it still doesn’t seem to work. I believe it’s because when I manually click the drop down it activates a JS script that allows the user to click on the webpage? Not entirely sure. I believe this is the relevant HTML

<div ng-cloak="" id="shortcut_module_added" dir="auto">
    <xe-popup-modal xe-id="keyboardShortcutLabel" show="modalShown" focusbackelement="tools" pageheader="Keyboard shortcuts">
        <popup-content>
            <div>
                <div ng-repeat="bannershortcut in shortcutObj" class="banner_aria-shortcut_{{$index}}" ng-class="banner_shortcut_{{$id}} ? 'shortcut-container-collapse' : 'shortcut-container-expanded'">
                    <span class="content-heading-shortcut" tabindex="0" ng-keydown="showDescription($event)" data-ng-bind="bannershortcut.sectionHeading" ng-click="showDescription($event)"></span>
                    <span class="shortcutAccordion" ng-keydown="showDescription($event)" ng-click="showDescription($event)" ng-class="!banner_shortcut_{{$id}} ? 'up' : 'down'"></span>
                    <div class="banner-shortcut banner_shortcut_{{$index}}" id="banner_shortcut_{{$id}}" ng-show="!banner_shortcut_{{$id}}">
                        <div class="shortcut-row" ng-repeat="hotkey in bannershortcut.shortcutList">
                            <div class="shortcut-description" aria-label="{{hotkey.description}}" data-ng-bind="hotkey.description"></div>
                            <div class="column-container">
                                <span ng-repeat-start="item in hotkey.combo" class="chicklet" data-ng-bind="item"></span><div class="delimiter-shortcut" ng-repeat-end="" ng-if="!$last">&nbsp;</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </popup-content>
    </xe-popup-modal>
</div>

<script type="text/javascript" src="/StudentRegistrationSsb/assets/modules/bannerWeb-mf.js"></script>



<script type="text/javascript">
    var mepcodeChanged='';
    if(null !== mepcodeChanged && undefined !== mepcodeChanged && mepcodeChanged == "true"){
        $(document).bind('notification-use-ready', function (e) {
            mepcodeNotificationAddition(window.mepCode)
        });
    }
</script>


<script type="text/javascript" src="/StudentRegistrationSsb/assets/modules/personaChange-mf.js"></script>


<main id="content" role="main" class="ui-layout-container" style="top: 99px; overflow: hidden; margin-bottom: 0px;">
    <div class="custom-css-class">
        <div id="title-panel" class="aurora-theme"><h1>Select a Term</h1></div>
    </div>
    <div class="ui-layout-north inner-north ui-layout-pane ui-layout-pane-north" id="inner-north" style="position: absolute; margin: 0px; inset: 0px 0px auto; width: auto; z-index: 0; height: 1px; display: block; visibility: visible;"></div>

    <div class="ui-layout-center inner-center overflow-pane ui-layout-pane ui-layout-pane-center" id="inner-center" style="position: absolute; margin: 0px; inset: 1px 0px 0px; height: 810px; width: 779px; z-index: 0; display: block; visibility: visible;">
        <div class="body-wrapper">
            <div class="body-content">
                <div class="overlay" style="display: none;"></div>
                <div id="term-date-selection" tabindex="0" class="ui-widget-content  vertical-form labels-above">
                    <div id="term-buttons">
                        <fieldset role="form">
                            <legend>Select a Term</legend>
                            <div id="term-select" role="search">
                                
                            </div>

                            <div id="term-window">
                                <div id="term-search-combobox">
                                    <label class="form-row" for="txt_term">
                                        
                                            Terms Open for Registration
                                        
                                    </label>
                                    <div class="select2-container term-combo2" id="s2id_txt_term" title="Select a term..." aria-required="true"><a href="javascript:void(0)" class="select2-choice select2-default" tabindex="-1">   <span class="select2-chosen" id="select2-chosen-1">Select a term...</span><abbr class="select2-search-choice-close"></abbr>   <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><label for="s2id_autogen1" class="select2-offscreen">
                                        
                                            Terms Open for Registration
                                        
                                    </label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="combobox" aria-expanded="true" aria-describedby="screen-reader-label-1" aria-labelledby="select2-chosen-1" id="s2id_autogen1" aria-controls="select2-chosen-1" tabindex="0"><div class="select2-drop select2-display-none select2-with-searchbox">   <div class="select2-search">       <label for="s2id_autogen1_search" class="select2-offscreen">
                                        
                                            Terms Open for Registration
                                        
                                    </label>       <input type="text" sanitize="true" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="select2-results-1" id="s2id_autogen1_search" placeholder="" tabindex="0">   </div>   <ul class="select2-results" role="listbox" id="select2-results-1">   </ul></div></div><input type="hidden" id="txt_term" name="txt_term" class="term-combo2" data-init-text="" value="" data-endpoint="/StudentRegistrationSsb/ssb/classRegistration/getTerms" data-save-endpoint="/StudentRegistrationSsb/ssb/term/saveTerm?mode=registration" data-allowmultiple="false" data-mode="registration" placeholder="Select a term..." tabindex="-1" title="
                                        
                                            Terms Open for Registration
                                        
                                    " style="display: none;">
                                    <br>
                                    
                                        
                                        <div id="div_alt_pin" class="visuallyhidden disabled" disabled="disabled"><br><label class="form-row" for="input_alt_pin">Alternate PIN<span class="required-mark" style="display: none;">*</span></label><input id="input_alt_pin" type="password" class="visuallyhidden disabled" disabled="disabled"><br>
                                        </div>
                                    

                                    <div id="searchAdvisee" style="display: none;">

                                        
                                    </div>
                                    

                                </div>

                                <div id="search-dates" style="display: none;">
                                    <label id="startDate-label" class="datePicker form-row" for="startDatepicker">Start Date</label>

                                    <div class="search-date"><input type="text" id="startDatepicker" name="startDatepicker" aria-label="Start Date format Month/Day/Year Date format is M M / d d / y y y y" title="Press F9 to open/close the calendar" class="hasMultiCalendarPicker" placeholder="MM/dd/yyyy"><span class="calendar-icon calendar-img"></span>
                                    </div>
                                    <label id="endDate-label" class="datePicker form-row" for="endDatepicker">End Date</label>

                                    <div class="search-date"><input type="text" id="endDatepicker" name="endDatepicker" aria-label="End Date format Month/Day/Year Date format is M M / d d / y y y y" title="Press F9 to open/close the calendar" class="hasMultiCalendarPicker" placeholder="MM/dd/yyyy"><span class="calendar-icon calendar-img"></span>
                                    </div>
                                </div>
                            </div>
                        </fieldset>

                    </div>

                    <div id="termStudentEligibilityErrors" style="display: none;"></div>
                    <div class="form-end-controls">
                        <button id="term-go" type="button" data-endpoint="/StudentRegistrationSsb/ssb/term/search?mode=registration" class="form-button">Continue</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
<div id="" class="ui-layout-resizer ui-layout-resizer-north ui-layout-resizer-open ui-layout-resizer-north-open" style="position: absolute; padding: 0px; margin: 0px; font-size: 1px; text-align: left; overflow: hidden; z-index: 2; top: 1px; cursor: default; display: none;"></div></main>

<div id="popups-container"></div>

<script type="text/javascript" src="/StudentRegistrationSsb/assets/modules/termView-mf.js"></script>
<script type="text/javascript" src="/StudentRegistrationSsb/assets/modules/registrationView-mf.js"></script>






<script type="text/javascript">
        var isExperienceIntegrated = ('false'.length != 0) ? (Boolean('false') && 'false' !== 'false') : false;
        if ((isExperienceIntegrated==true) && !(window.self !== window.top))
        {
            var url = '/StudentRegistrationSsb/error/standaloneApplication';
            window.location.replace(url);
        }
    </script><script>
        var extensibilityInfo = {
  "application": "StudentRegistrationSsb",
  "page": "term",
  "url": "/StudentRegistrationSsb/",
  "pluginUrl": "/StudentRegistrationSsb/plugins/web-app-extensibility-10.1/static/html/",
  "admin": false,
  "extensions": {},
  "resources": null
}
        window.mepCode='';
    </script><script>

        var transactionTimeoutMeta    = $( "meta[name=transactionTimeout]" ),
            transactionTimeoutSeconds = ( transactionTimeoutMeta.length == 1 ? parseInt( transactionTimeoutMeta.attr( "content" ) ) : 30 ),
            transactionTimeoutPadding = 10 * 1000,
            transactionTimeoutMilli   = ( transactionTimeoutSeconds * 1000 ) + transactionTimeoutPadding;

        $.ajaxSetup( { timeout: transactionTimeoutMilli } );

    </script><script>
    $(window).load(function() {
           $( "#splash" ).remove();
         });


     yepnope({
     test : window.JSON,
     nope : '/StudentRegistrationSsb/assets/json2.js'
      });

      $(window).load(function() {
          _.defer( function() {
              $( "#splash" ).remove();
          });
      });

screenshot3

I am also new to webscraping, so apologizes if this is hard to understand/read.

This is my code, again apologizes it is very messy atm:

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import selenium.webdriver.support.wait as wait
from selenium.common.exceptions import NoSuchElementException, StaleElementReferenceException, NoSuchWindowException, TimeoutException
from selenium.webdriver.support.ui import Select
import time
import threading
import os
#import env file .env
from dotenv import load_dotenv
chrome_options = Options()


driver = webdriver.Edge(chrome_options)
url="https://classes.oregonstate.edu/?keyword=CS261&srcdb=202402"
driver.get(url)
orginal_window=driver.current_window_handle
load_dotenv()
#username=os.getenv("USERNAME")
#password=os.getenv("PASSWORD")

username='username'
password='password'
def get_user_input():
    global set_up_classes
    set_up_classes= input("Have you set up classes already?")

#/html[1]/body[1]/header[1]/div[2]/a[1]
try:
    
    the_url=driver.find_element(by=By.XPATH, value="/html[1]/body[1]/header[1]/div[2]/a[1]")
    print(the_url.get_attribute("href"))
    the_url.click()
    if len(driver.window_handles) > 1:
        driver.switch_to.window(driver.window_handles[1])
        print(driver.current_url)
        login_url=driver.current_url
        
        WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.ID, "username")))
        username_driver=driver.find_element(by=By.ID, value="username").send_keys(username)
        time.sleep(3)

        password_selector="#password"
        WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.CSS_SELECTOR, password_selector)))

        password_driver=driver.find_element(by=By.CSS_SELECTOR, value=password_selector)

        for char in password:
            password_driver.send_keys(char)
            time.sleep(0.2)
    #https://api-46217189.duosecurity.com/frame/v4/auth/prompt?sid=frameless-b19a6056-caa0-4b20-8466-aeb92dc48b4d
    #https://api-46217189.duosecurity.com/frame/v4/auth/prompt?sid=frameless-7d2e5402-6038-4783-af32-ca317ea6057f   
        button_driver=driver.find_element(by=By.CSS_SELECTOR, value="body > main > form > div:nth-child(4) > button").click()
        #button_driver.click()
        #driver.switch_to.window(orginal_window)
        #print(driver.current_url)
        WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "#auth-view-wrapper > div:nth-child(2) > div.row.display-flex.align-flex-justify-content-center.verification-code")))
        code=driver.find_element(by=By.CSS_SELECTOR, value="#auth-view-wrapper > div:nth-child(2) > div.row.display-flex.align-flex-justify-content-center.verification-code").text
        DUO= driver.current_url
        print("Please type in DUO CODE:"+code)
        windows=driver.window_handles
        if len(windows) > 1:
            driver.switch_to.window(windows[1])
        else:
            print("No DUO window found")
        #Sleep until driver.current_window_handle is not DUO
        time.sleep(15)
        #try:

        #/html/body
        ##dont-trust-browser-button
        WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "#dont-trust-browser-button")))
        trust_button = driver.find_element(by=By.CSS_SELECTOR, value="#dont-trust-browser-button")
        print("attempting to click")
        trust_button.click()
        print("clicked")
        WebDriverWait(driver, 10).until(EC.staleness_of(trust_button))
        time.sleep(10)
        print("Clicked on 'Yes, this is my device' button.")
        # Wait for any overlay to disappear (check if 'lfjs_modaldiv' is present and wait until it's not visible)
        #WebDriverWait(driver, 20).until_not(EC.visibility_of_element_located((By.ID, "lfjs_modaldiv")))
        #print("Overlay has disappeared.")
        #print("Clicked on 'Yes, this is my device' button.")
        #driver.switch_to.default_content()
        """ except TimeoutException:
            print("The 'Yes, this is my device' button was not clickable after 10 seconds.")
        except Exception as e:
            print(f"An exception occurred while trying to click the button: {e}") """
        
        driver.switch_to.window(orginal_window)
        ##primary-cart-button
        #time.sleep(10)
        #wait until input is typed
        print("Before switching to default" +str(driver.current_url))
        #time.sleep(3)
        
        #Clicks on primary cart button
        WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.XPATH, "/html[1]/body[1]/main[1]/div[1]/div[1]/div[2]/form[1]/div[5]/div[1]/div[1]/button[1]")))
        enroll = driver.find_element(by=By.XPATH, value="/html[1]/body[1]/main[1]/div[1]/div[1]/div[2]/form[1]/div[5]/div[1]/div[1]/button[1]")
        enroll.click()
        
        #click on submit schedule button
        WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.XPATH, "/html[1]/body[1]/main[1]/div[2]/div[1]/div[4]/div[1]/button[2]")))
        submit_schedule = driver.find_element(by=By.XPATH, value="/html[1]/body[1]/main[1]/div[2]/div[1]/div[4]/div[1]/button[2]")
        original_window = driver.current_window_handle

        # Click to open the 2nd tab
        submit_schedule.click()

        # Wait for the 2nd tab and switch to it
        WebDriverWait(driver, 10).until(EC.number_of_windows_to_be(2))
        windows_handles = driver.window_handles
        second_tab = [window for window in windows_handles if window != original_window][0]
        driver.switch_to.window(second_tab)
        print("Switched to second tab")

        # Click to open the 3rd tab
        #abs xpath is: /html[1]/body[1]/div[4]/div[2]/div[4]/div[2]/span[1]/div[1]/a[1]/button[1]/div[1]/div[1]
        WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.XPATH, "/html[1]/body[1]/div[4]/div[2]/div[4]/div[2]/span[1]/div[1]/a[1]/button[1]/div[1]/div[1]")))
        get_registered = driver.find_element(by=By.XPATH, value="/html[1]/body[1]/div[4]/div[2]/div[4]/div[2]/span[1]/div[1]/a[1]/button[1]/div[1]/div[1]")
        get_registered.click()    
        WebDriverWait(driver, 10).until(EC.number_of_windows_to_be(3))
        windows_handles = driver.window_handles
        third_tab = [window for window in windows_handles if window not in [original_window, second_tab]][0]
        driver.switch_to.window(third_tab)
        print("Switched to third tab")


        try:
            #need to fix the dropdown menu part that still isn't working.
            '''WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "#s2id_txt_term > a")))
            select2_box = driver.find_element(by=By.CSS_SELECTOR, value="#s2id_txt_term > a")
            select2_box.click()
            print("clicked")
WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.CSS_SELECTOR, ".select2-input")))
            select2_input=driver.find_element(by=By.CSS_SELECTOR, value=".select2-input")
            select2_input.send_keys("Winter 2024")
            #term-go'''

            '''WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "#s2id_txt_term > a > span.select2-arrow")))
            select2_box = driver.find_element(by=By.CSS_SELECTOR, value="#s2id_txt_term > a > span.select2-arrow")
            select2_box.click()
            print("clicked")
            WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.CSS_SELECTOR, ".select2-input")))
            select2_input=driver.find_element(by=By.CSS_SELECTOR, value=".select2-input")
            select2_input.send_keys("Winter 2024")
            print("sent keys")'''

            # Click the dropdown to open it
            WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.CSS_SELECTOR, ".select2-container")))
            select2_dropdown = driver.find_element(by=By.CSS_SELECTOR, value=".select2-container")
            select2_dropdown.click()
            print("clicked")

            # Wait for the search box within the dropdown to be visible
            WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "#select2-result-label-3")))
            select2_search_box = driver.find_element(by=By.CSS_SELECTOR, value="#select2-result-label-3")
            select2_search_box.click()
            print("clicked")

            # Wait for the desired option to be clickable
            '''WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//li[contains(text(), 'Winter 2024')]")))
            select2_option = driver.find_element(by=By.XPATH, value="//li[contains(text(), 'Winter 2024')]")
            select2_option.click()
            print("clicked")'''
            time.sleep(50)
            #WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "#term-go")))
            #select4_box = driver.find_element(by=By.CSS_SELECTOR, value="#term-go")
            #select4_box.click()
            #select2_box.send_keys("Winter 2024")
            # Send keys to the search box within the Select2 dropdown
            
           
            '''
           
            script =  """
                var select2Container = $('#select2-container-id'); // Use the actual ID or class of the Select2 container
                select2Container.select2('open');

                // Wait for the dropdown to open and for the search box to become visible
                setTimeout(function() {
                var searchBox = $('input.select2-search__field');
                searchBox.val('Winter 2024').trigger('input');

                // Wait for the results to be filtered and become visible
                setTimeout(function() {
                    var results = $('.select2-results__option:contains("Winter 2024")');
                    if (results.length) {
                    results.trigger('mouseup'); // or .trigger('click');
                    }
                }, 500); // Increase this time if necessary
                }, 500); // Increase this time if necessary
                """
            driver.execute_script(script)
        '''
        except TimeoutException as e:
            print("Element not found within the time frame.")
            # Optionally, take a screenshot to help with debugging
            driver.save_screenshot('debug_screenshot.png')

      
        

        #/html[1]/body[1]/main[1]/div[1]/div[1]/div[2]/form[1]/div[5]/div[1]/div[1]/button[1]
        time.sleep(20)
except (NoSuchElementException, StaleElementReferenceException, NoSuchWindowException) as e:
    print(f"An error occurred: {e}")
finally:
    driver.quit()

I am trying to build a React Native project for iOS after I upgraded React Native Firebase from v10 to v17.
I solved many errors, but I cannot get rid of this last one:

ld: warning: ignoring duplicate libraries: '-lc++'
ld: building for 'iOS-simulator', but linking in object file (/.../ios/Pods/Crashlytics/iOS/Crashlytics.framework/Crashlytics[arm64][2](CLSBinaryImage.o)) built for 'iOS'
clang: error: linker command failed with exit code 1 (use -v to see invocation)

/.../ios/Pods/Pods.xcodeproj: warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 10.0, but the range of supported deployment target versions is 12.0 to 17.2.99. (in target 'React-RCTActionSheet' from project 'Pods')
/.../ios/Pods/Pods.xcodeproj: warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 12.0 to 17.2.99. (in target 'Fabric' from project 'Pods')
/.../ios/Pods/Pods.xcodeproj: warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 10.0, but the range of supported deployment target versions is 12.0 to 17.2.99. (in target 'React-callinvoker' from project 'Pods')
/.../ios/Pods/Pods.xcodeproj: warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 11.0, but the range of supported deployment target versions is 12.0 to 17.2.99. (in target 'Firebase' from project 'Pods')
/.../ios/Pods/Pods.xcodeproj: warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 12.0 to 17.2.99. (in target 'boost-for-react-native' from project 'Pods')
/.../ios/Pods/Pods.xcodeproj: warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 10.0, but the range of supported deployment target versions is 12.0 to 17.2.99. (in target 'RCTRequired' from project 'Pods')
/.../ios/Pods/Pods.xcodeproj: warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 10.0, but the range of supported deployment target versions is 12.0 to 17.2.99. (in target 'FBLazyVector' from project 'Pods')
/.../ios/Pods/Pods.xcodeproj: warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 10.0, but the range of supported deployment target versions is 12.0 to 17.2.99. (in target 'React' from project 'Pods')
/.../ios/Pods/Pods.xcodeproj: warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 12.0 to 17.2.99. (in target 'Crashlytics' from project 'Pods')

--- xcodebuild: WARNING: Using the first of multiple matching destinations:
{ platform:iOS Simulator, id:637201FD-B9E2-4C2E-8797-6DD23CC5440C, OS:17.0, name:iPhone 11 }
{ platform:iOS Simulator, id:637201FD-B9E2-4C2E-8797-6DD23CC5440C, OS:17.0, name:iPhone 11 }
** BUILD FAILED **


The following build commands failed:
        Ld /.../Library/Developer/Xcode/DerivedData/backporch-gklonbvhvuffcrcrsbundznbgjak/Build/Products/Debug-iphonesimulator/Backporch.app/Backporch normal (in target 'backporch' from project 'backporch')
(1 failure)

I should mention that the Android build works just fine; only the iOS one fails.

Pods file:

use_frameworks! :linkage => :static
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
require_relative '../node_modules/react-native/scripts/react_native_pods'
# use_modular_headers!
platform :ios, '11.0'

target 'backporch' do
  config = use_native_modules!
  use_react_native!(:path => config["reactNativePath"])

  target 'backporchTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  post_install do |installer|
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
        config.build_settings["ONLY_ACTIVE_ARCH"] = "YES"
      end
    end
    installer.pods_project.targets.each do |target|
      if (target.name&.eql?('FBReactNativeSpec'))
        target.build_phases.each do |build_phase|
          if (build_phase.respond_to?(:name) && build_phase.name.eql?('[CP-User] Generate Specs'))
            target.build_phases.move(build_phase, 0)
          end
        end
      end
    end
  end
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  # use_flipper!({ 'Flipper-Folly' => '2.3.0' })
  # post_install do |installer|
  #   flipper_post_install(installer)
  # end
end

React Native Version: 0.63.5
React Native Firebase Version: 17.5.0
Xcode Version: 15

Expected the app to be successfully built. I’m stuck on that error though