The archive did not include a dSYM for the hermes.framework with the UUIDs [some uuid] in react native

i am facing issue when uploading archive file from xcode to apple app store in react native project

The archive did not include a dSYM for the hermes.framework with the
UUIDs [B7ABE37E-553E-3465-82BA-50EFAA0CB16C]. Ensure that the
archive’s dSYM folder includes a DWARF file for hermes.framework with
the expected UUIDs.

i check on internet but no solution found

below is my podfile

# Transform this into a `node_require` generic function:
def node_require(script)
  # Resolve script with node to allow for hoisting
  require Pod::Executable.execute_command('node', ['-p',
    "require.resolve(
      '#{script}',
      {paths: [process.argv[1]]},
    )", __dir__]).strip
end

# Use it to require both react-native's and this package's scripts:
node_require('react-native/scripts/react_native_pods.rb')
node_require('react-native-permissions/scripts/setup.rb')

platform :ios, '13.4'
prepare_react_native_project!

flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'UNFApp' do
  config = use_native_modules!

  flags = get_default_flags()
  flags[:hermes_enabled] = true

  use_react_native!(
    :path => config[:reactNativePath],
    :fabric_enabled => flags[:fabric_enabled],
    :flipper_configuration => flipper_config,
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  # ⬇️ Add the permissions you need
  setup_permissions([
    'LocationWhenInUse', # Location access when the app is in use
    'LocationAlways',
  ])

  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
  pod 'RNReanimated', :path => '../node_modules/react-native-reanimated'
  pod 'GoogleUtilities', :modular_headers => true
  pod 'react-native-maps', :path => '../node_modules/react-native-maps'
  pod 'react-native-google-maps', :path => '../node_modules/react-native-maps'

  target 'UNFAppTests' do
    inherit! :complete
  end

  bitcode_strip_path = `xcrun --find bitcode_strip`.chop!
  def strip_bitcode_from_framework(bitcode_strip_path, framework_relative_path)
    framework_path = File.join(Dir.pwd, framework_relative_path)
    command = "#{bitcode_strip_path} #{framework_path} -r -o #{framework_path}"
    puts "Stripping bitcode: #{command}"
    system(command)
  end

  hermes_framework_path = "#{Pod::Config.instance.installation_root}/Pods/hermes-engine/destroot/Library/Frameworks"
framework_paths = [
  "#{hermes_framework_path}/universal/hermes.xcframework/ios-arm64/hermes.framework/hermes",
  "#{hermes_framework_path}/universal/hermes.xcframework/ios-arm64_x86_64-maccatalyst/hermes.framework/hermes"
]

bitcode_strip_path = `xcrun --find bitcode_strip`.chop!
framework_paths.each do |framework_relative_path|
  strip_bitcode_from_framework(bitcode_strip_path, framework_relative_path)
end
  # framework_paths.each do |framework_relative_path|
  #   strip_bitcode_from_framework(bitcode_strip_path, framework_relative_path)
  # end

  post_install do |installer|
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false
    )
    installer.pods_project.targets.each do |target|
      if target.name == 'hermes-engine'
        target.build_configurations.each do |config|
          config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'
        end
      end
    end
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end

below are my react native version

"react": "18.2.0",
    "react-native": "0.72.0",

Expo: Importing ‘use dom’ component from npm package

I’m trying out Expo’s new DOM components, which I love so far. However, I now wanted to test keeping a few DOM components in a npm package which I import to my Expo app.

Setup

The npm package

For testing purposes I created the package all fresh, with the following dependencies:

{
    "expo": "^52.0.27",
    "react": "^19.0.0",
    "react-native": "^0.77.0",
    "react-native-webview": "13.12.5",
    "styled-components": "^6.1.14"
  }

and trying to export the following component:

'use dom'

const Test = () => {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  )
}

export default Test

Through my index.js file with one line: export {default as Test} from './components/Test/Test.native'.

I compile the package using babel and test it locally using yalc.

Expo app

In my Expo app, I use the package’s component like this:

import { Test } from 'my-test-package'


export default function ProfileScreen() {
  return (
    <Test />
  )
}

Issue

When Expo tries to render the screen using the imported DOM component, it throws:

iOS Bundling failed:  node_modules/my-test-package/dist/components/Test/Test.native.js: <...>/my-expo-app/node_modules/my-test-package/dist/components/Test/Test.native.js: The "use dom" directive requires a default export to be present in the file.

I was thinking I maybe screwed up something with the exports/imports, but I tested the exact same setup locally in the Expo app (that is, exporting the Test.native.js component through an identical index file only that they were placed in the same project), and that worked fine.

I’m thinking it might be something with the Babel compiling, or the ‘use strict’ directive that comes with it…? Any ideas?

Thanks in advance!

loading script tag manually in react project

I want to load a widget from Bookeo site into my site they provide a script tag which I have to add into my site and they handle the rest, I wrote the code and every thing is working the script tag is loaded tot he dom successfully but the problem is that I have to reload the window once at least for the widget to sh
ow and when I saw inside of the network tap I found that it doesn’t make the requests for fetching the widget info till I render the screen manually

The widget code

import React, { useEffect } from "react";

const BookingWidget = (props) => {
  useEffect(() => {
    // Load the widget script when the component mounts
    const script = document.createElement("script");
    script.onload = () => {
      console.log("Widget script loaded and ready to initialize");
      // state in the parent 
      // I was trying to force component to reload (doesn't work)
      props.set_update_widget(true);
    };
    script.onerror = (error) => {
      console.error("Error loading widget script:", error);
    };
    script.type = "text/javascript";
    script.src = props.widget_src;
    script.async = true;
    const target = document.getElementById("bookeo-widget-container");
    target.innerHTML = "";
    target.appendChild(script);
    return () => {
      target.innerHTML = ""; // Remove widget if the component is unmounted
    };
  }, []);

  return (
    <div>
      <div id="bookeo-widget-container"></div>
    </div>
  );
};

export default BookingWidget;

parent componenet

import React, { useEffect, useState } from "react";
import { useParams } from "react-router";
import { tour_data } from "../assets/data";
import BookingWidget from "../components/BookingWidget";

const TourPage = () => {
  const [update_widget, set_update_widget] = useState(false);
  let icon_filtering = {
    smallgroup: (
      <svg
        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-jhifpp"
        focusable="false"
        aria-hidden="true"
        viewBox="0 0 24 24"
        data-testid="PeopleAltOutlinedIcon"
      >
        <path d="M16.67 13.13C18.04 14.06 19 15.32 19 17v3h4v-3c0-2.18-3.57-3.47-6.33-3.87zM15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-.47 0-.91.1-1.33.24C14.5 5.27 15 6.58 15 8s-.5 2.73-1.33 3.76c.42.14.86.24 1.33.24zm-6 0c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm0 7c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4zm6 5H3v-.99C3.2 16.29 6.3 15 9 15s5.8 1.29 6 2v1z"></path>
      </svg>
    ),
    duration3hours: (
      <svg
        class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium css-zreh0f"
        focusable="false"
        aria-hidden="true"
        viewBox="0 0 24 24"
        data-testid="AccessAlarmOutlinedIcon"
      >
        <path d="m22 5.72-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39 6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"></path>
      </svg>
    ),
    skiptheline: (
      <svg
        class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium css-zreh0f"
        focusable="false"
        aria-hidden="true"
        viewBox="0 0 24 24"
        data-testid="FastForwardOutlinedIcon"
      >
        <path d="M15 9.86 18.03 12 15 14.14V9.86m-9 0L9.03 12 6 14.14V9.86M13 6v12l8.5-6L13 6zM4 6v12l8.5-6L4 6z"></path>
      </svg>
    ),
    smallgrouptour: (
      <svg
        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-jhifpp"
        focusable="false"
        aria-hidden="true"
        viewBox="0 0 24 24"
        data-testid="PeopleAltOutlinedIcon"
      >
        <path d="M16.67 13.13C18.04 14.06 19 15.32 19 17v3h4v-3c0-2.18-3.57-3.47-6.33-3.87zM15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-.47 0-.91.1-1.33.24C14.5 5.27 15 6.58 15 8s-.5 2.73-1.33 3.76c.42.14.86.24 1.33.24zm-6 0c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm0 7c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4zm6 5H3v-.99C3.2 16.29 6.3 15 9 15s5.8 1.29 6 2v1z"></path>
      </svg>
    ),
    mobileticketing: (
      <svg
        class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium css-zreh0f"
        focusable="false"
        aria-hidden="true"
        viewBox="0 0 24 24"
        data-testid="MobileFriendlyOutlinedIcon"
      >
        <path d="M19 1H9c-1.1 0-2 .9-2 2v3h2V4h10v16H9v-2H7v3c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zM7.01 13.47l-2.55-2.55-1.27 1.27L7 16l7.19-7.19-1.27-1.27-5.91 5.93z"></path>
      </svg>
    ),
    freecancellation: (
      <svg
        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-jhifpp"
        focusable="false"
        aria-hidden="true"
        viewBox="0 0 24 24"
        data-testid="CancelOutlinedIcon"
      >
        <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"></path>
      </svg>
    ),
    livetourguide: (
      <svg
        class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium css-zreh0f"
        focusable="false"
        aria-hidden="true"
        viewBox="0 0 24 24"
        data-testid="RecordVoiceOverOutlinedIcon"
      >
        <path d="M9 13c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm0 8c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm-6 4c.22-.72 3.31-2 6-2 2.7 0 5.8 1.29 6 2H3zM15.08 7.05c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27l-1.68 1.69zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z"></path>
      </svg>
    ),
    expressentrance: (
      <svg
        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-jhifpp"
        focusable="false"
        aria-hidden="true"
        viewBox="0 0 24 24"
        data-testid="BoltIcon"
      >
        <path d="M11 21h-1l1-7H7.5c-.58 0-.57-.32-.38-.66.19-.34.05-.08.07-.12C8.48 10.94 10.42 7.54 13 3h1l-1 7h3.5c.49 0 .56.33.47.51l-.07.15C12.96 17.55 11 21 11 21z"></path>
      </svg>
    ),
    instantconfirmation: (
      <svg
        class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium css-zreh0f"
        focusable="false"
        aria-hidden="true"
        viewBox="0 0 24 24"
        data-testid="CheckCircleOutlineOutlinedIcon"
      >
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"></path>
      </svg>
    ),
  };
  let { tourId } = useParams();
  useEffect(() => {
    // to insure that the page start from the top
    window.scrollTo(0, 0);

    // for the map view
    const map = L.map("map").setView([0, 0], 2); // Initial placeholder view

    // Fetch coordinates from Nominatim API
    fetch(
      `https://nominatim.openstreetmap.org/search?format=json&q=${tour_data.internal_ui.meeting_point
        .split(",")[0]
        .replaceAll(" ", "+")}`
    )
      .then((response) => response.json())
      .then((data) => {
        const lat = data[0].lat;
        const lon = data[0].lon;

        // Set the map to the location
        map.setView([lat, lon], 12);
        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
          maxZoom: 19,
        }).addTo(map);

        // Add marker
        L.marker([lat, lon])
          .addTo(map)
          .bindPopup(tour_data.internal_ui.meeting_point.split(",")[0])
          .openPopup();
      })
      .catch((error) => console.error("Error fetching location:", error));
  }, []);
  return (
    <div>
      <section className="tour_img_container">
        <img src={tour_data.internal_ui.main_image} alt="" />
        <div className="header_text">
          Experience Rome with
          <div className="header_text_inner">Tours of Rome</div>
        </div>
      </section>
      <section className="offers_container">
        {tour_data.internal_ui.offers.map((offer, id) => (
          <div key={id} className="offer">
            <div className="icon">
              {
                icon_filtering[
                  `${offer.title.replaceAll(" ", "").toLowerCase()}`
                ]
              }
            </div>
            <div className="heading">{offer.title}</div>
            <div className="content">{offer.info}</div>
          </div>
        ))}
      </section>
      <section className="main_tour_section">
        <section className="tour_img_view">
          <img src={tour_data.external_ui.main_image} alt="main image" />
          <div className="inner_content">
            <div className="heading">{tour_data.external_ui.title}</div>
            <p className="content">{tour_data.external_ui.introduction}</p>
            <div className="rating_section">
              <div className="stars">{tour_data.external_ui.stars}</div>
              <div className="rating">{tour_data.external_ui.rating}</div>
            </div>
          </div>
        </section>
        <div className="heading">Tour Details</div>
        <section className="tours_details">
          {tour_data.internal_ui.tour_details.map((tour_detials, id) => (
            <>
              <div key={id} className="tour_details">
                <div className="icon">
                  {
                    icon_filtering[
                      `${tour_detials.title.replaceAll(" ", "").toLowerCase()}`
                    ]
                  }
                </div>
                <div className="heading">{tour_detials.title}</div>
                <div className="content">{tour_detials.info}</div>
              </div>
            </>
          ))}
        </section>
        <div className="heading">Full Description</div>
        <section className="description"></section>
        <div className="heading">Things To Know</div>
        <section className="things_to_know">
          {tour_data.internal_ui.description.things_to_know.map((info, id) => (
            <p className="thing_to_know" key={id}>
              {info}
            </p>
          ))}
        </section>
        <div className="heading">Inclusions and Exclusions</div>
        <section className="inclusions_exclusions">
          {tour_data.internal_ui.inclusions.map((inclusion_data, id) => (
            <div key={id} className="inclusion_container">
              <svg
                class="MuiSvgIcon-root MuiSvgIcon-colorSuccess MuiSvgIcon-fontSizeMedium css-nm8jzx"
                focusable="false"
                aria-hidden="true"
                viewBox="0 0 24 24"
                data-testid="CheckIcon"
              >
                <path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
              </svg>
              <div>{inclusion_data}</div>
            </div>
          ))}
          {tour_data.internal_ui.exclusions.map((exclusions_data, id) => (
            <div key={id} className="exclusions_container">
              <svg
                class="MuiSvgIcon-root MuiSvgIcon-colorError MuiSvgIcon-fontSizeMedium css-dvceld"
                focusable="false"
                aria-hidden="true"
                viewBox="0 0 24 24"
                data-testid="CloseIcon"
              >
                <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
              </svg>
              <div>{exclusions_data}</div>
            </div>
          ))}
        </section>
        <div style={{display:"none"}} data = {update_widget}></div>
        <div className="heading">Meeting Point</div>
        <section className="meeting_point">
          <p className="content">{tour_data.internal_ui.meeting_point}</p>
        </section>
      </section>
      <div id="map" className="meeting_point"></div>
      <BookingWidget set_update_widget = {set_update_widget} widget_src={tour_data.bookeo_link}></BookingWidget>
    </div>
  );
};

export default TourPage;

img1
img2

Unhandled Rejection (TypeError): Cannot read properties of undefined (reading ‘map’)” when rendering dynamic data

I am building a React application where I fetch a list of items from an API and display them in a list. The API request is asynchronous, and here’s my component code:

import React, { useEffect, useState } from "react";

function App() {
  const [items, setItems] = useState();

  useEffect(() => {
    fetch("https://api.example.com/items")
      .then((response) => response.json())
      .then((data) => setItems(data))
      .catch((error) => console.error("Error fetching data:", error));
  }, []);

  return (
    <div>
      <h1>Item List</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

When I load the page, I get this error in the browser:

Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'map')

I expected the items to load and be displayed in a list, but the application crashes instead.

  1. I tried logging the items state and noticed it starts as undefined.
  2. I expected React to handle the state update after the API call, but it seems to break before the data is fetched.
  3. I attempted setting the initial state to null instead of undefined, but the same error occurred.
    How can I fix this issue and ensure the app doesn’t crash while fetching data asynchronously?

Collapsible table in Bootstrap 5 stops being smooth

Working on a tabular view where you can open a production order and see all of the parts inside this order. A part can exist out of multiple parts as well so the table could be infinitely expanding.

When making a demo of this I am running into the trouble where the ‘collapse’ component of BS5 is very nice and smooth, but as soon as I put this functionality into a table all the smoothness goes away and it is rather glitchy.

Does anyone know the fix; or should I start looking into other frameworks?

In the code below I’ve added a smooth button and the table which is stuttering

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Order Dashboard</title>
<!-- Styles -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" />
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.full.min.js"></script>

</head>
<body>
    <div class="content">
        <div class="container-fluid">
            <h2>Product Order Dashboard</h2>
            <p>Welcome to the production order dashboard!</p>
            
            <p class="d-inline-flex gap-1">
                <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                  Link with href
                </a>
                <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                  Button with data-bs-target
                </button>
              </p>
              <div class="collapse" id="collapseExample">
                <div class="card card-body">
                  Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
                </div>
              </div>




              <div class="">
                <h5 class="mb-3">Recent Activity</h5>
                <div class="table-responsive">
                    <table class="table table-hover table-bordered table-striped">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">Order ID</th>
                                <th scope="col">Product ID</th>
                                <th scope="col">Product</th>
                                <th scope="col">Quantity</th>
                                <th scope="col">Customer</th>
                                <th scope="col">Comment</th>
                                <th scope="col">Critical Lead time</th>
                                <th scope="col">Status</th>
                                <th scope="col">Collapse</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>2</td>
                                <td>2</td>
                                <td>Product 2</td>
                                <td>20</td>
                                <td>Customer 2</td>
                                <td>Comment 2</td>
                                <td>3 days</td>
                                <td>Active</td>
                                <td><a href="#" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">Collapse</a></td>
                            </tr>
                            
                            <tr id="collapseExample2" class="collapse">
                                <td colspan="9">
                                    <div class="card card-body">
                                        Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
                                    </div>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>3</td>
                                <td>3</td>
                                <td>Product 3</td>
                                <td>30</td>
                                <td>Customer 3</td>
                                <td>Comment 3</td>
                                <td>4 days</td>
                                <td>Active</td>
                                <td><a href="#" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample3">Collapse</a></td>
                            </tr>
                            
                            <tr id="collapseExample3" class="collapse">
                                <td colspan="9">
                                    <div class="card card-body">
                                        Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
                                    </div>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>4</td>
                                <td>4</td>
                                <td>Product 4</td>
                                <td>40</td>
                                <td>Customer 4</td>
                                <td>Comment 4</td>
                                <td>5 days</td>
                                <td>Active</td>
                                <td><a href="#" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseExample4" aria-expanded="false" aria-controls="collapseExample4">Collapse</a></td>
                            </tr>
                            
                            <tr id="collapseExample4" class="collapse">
                                <td colspan="9">
                                    <div class="card card-body">
                                        Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
                                    </div>
                                </td>
                            </tr>
                        </tbody>

        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

How to pass the params into soap api when using soap package in nestjs

I wanted to pass the params/attributes into my soap api. providing an example

For example when calling the api through postman I am passing separated=”true” like this


<bookingLand>
                    <barcodeRequest separated="true">A4</barcodeRequest>
</bookingLand>

but I dont know how to pass it when calling it through internally in my api

 bookingLand: {
          barcodeRequest: 'A4',
}

Can someone please help me here I have tried using _attributes and $attributes but its giving me an error from api side

I am using this https://www.npmjs.com/package/soap

I tried using AI tools like chatgpt and deepseek but didnt get the answer that i wanted.

How to integrate telwindcss with daisyUI

can anyone tell me how to integrate DaisyUI with Tailwind CSS? When I install Tailwind CSS now, there is no tailwind.config.js file created, and that’s correct because the documentation has changed. Tailwind works fine, but since there is no tailwind.config.js file, how can I integrate it with DaisyUI?

I created tenwind.config file initally but then put the daisy ui code but it will not works

I want to share a signal between components aross my application, alternatives to service implementation

My scenario is, I have a dialog, which is opened through a signal, but I want to trigger this dialog to open, across my application. The obvious way is to create a DialogService (providedIn: 'root') and store the signal there, but is there a more lightweight way to achieve the same.

Dialog component HTML:

@if(showDialog()) {
  <kendo-dialog 
    title="sometitle"
  >
    some text
  </kendo-dialog>
}

Dialog Component TS:

@Component({ ... })
export class DialogComponent {
  showDialog = signal(false); // <-- I want to share this signal, across multiple components.
}

Version is Angular 19 but am ok with something that is backwards compatible also.

while connecting my mongodb to backend its showing me error

[nodemon] restarting due to changes...
[nodemon] starting `ts-node src/server.ts`
Server running at http://localhost:3000
Server is running at http://localhost:5000
(node:29444) NOTE: The AWS SDK for JavaScript (v2) is in maintenance mode.
 SDK releases are limited to address critical bug fixes and security issues only.

Please migrate your code to use AWS SDK for JavaScript (v3).
For more information, check the blog post at https://a.co/cUPnyil
(Use `node --trace-warnings ...` to show where the warning was created)
MongoServerSelectionError: connect ETIMEDOUT 13.234.25.74:27017
    at Timeout._onTimeout (C:Usersakanksha.mishraDesktopintranet-backendnode_modulesmongodbsrcsdamtopology.ts:567:30)
    at listOnTimeout (node:internal/timers:569:17)
    at processTimers (node:internal/timers:512:7) {
  reason: TopologyDescription {
    type: 'ReplicaSetNoPrimary',
    servers: Map(3) {
      'watcho-tms-shard-00-01.fhfgb.mongodb.net:27017' => [ServerDescription],
      'watcho-tms-shard-00-00.fhfgb.mongodb.net:27017' => [ServerDescription],
      'watcho-tms-shard-00-02.fhfgb.mongodb.net:27017' => [ServerDescription]
    },
    stale: false,
    compatible: true,
    heartbeatFrequencyMS: 10000,
    localThresholdMS: 15,
    setName: 'atlas-zjemyv-shard-0',
    maxElectionId: null,
    maxSetVersion: null,
    commonWireVersion: 0,
    logicalSessionTimeoutMinutes: null
  },
  code: undefined,
  [Symbol(errorLabels)]: Set(0) {}
}

this is showing in my backend log

i tried solving error using chargpt which states that “Fixing MongoDB Connection Timeout:

Go to the MongoDB Atlas dashboard and navigate to "Network Access" under "Security". Add your current IP address or use 0.0.0.0/0 for testing purposes.
Verify that port 27017 is open on your network and not blocked by firewalls or antivirus software.
Test connectivity using tools like ping or telnet to ensure your application can reach the database servers.
Resolving ReplicaSetNoPrimary:
Check the status of your MongoDB Atlas cluster in the dashboard to ensure all nodes are healthy.
Upgrade your MongoDB Node.js driver to the latest version compatible with your cluster.
Addressing AWS SDK Warning:
Update your project dependencies to use AWS SDK v3 by replacing v2 imports with v3-specific packages (e.g., @aws-sdk/client-s3 for S3 operations).
Follow AWS's migration guide for minimal code changes during the transition67." 

but this is not working

How to modify the code for the display of the stereoscopic view from the Html5 to Html

I am Derby. I am new in this community. I would need the help to modify the code for the display of the stereoscopic view from the Html5 to the Html format as the result of the demonstration on the website “3d-stereo-html5” (https://github.com/moul/3d-stereo-html5?tab=readme-ov-file). The source code is from the project entitled “3d-stereo-html5” (https://github.com/moul/3d-stereo-html5?tab=readme-ov-file). I cannot perform the same result as the demonstration on the website “3d-stereo-html5″(https://github.com/moul/3d-stereo-html5?tab=readme-ov-file) because the source code is based on the Html5 that I am new for this format, not the Html. The image cannot show on the web page and perform the stereoscopic effect. Attached is the source code. I wish the source code and the link from one old project would help you solve the problem and provide the solutions based on your specialty. Thank you.

<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <select onChange="javascript:img.src=this.value">
      <option value="/images/statue2-3D-side-by-side-960.jpg">statue2-3D-side-by-side-960.jpg</option>
      <option value="/images/5310631602_dc8361d16e.jpg">5310631602_dc8361d16e.jpg</option>
      <option value="/images/masters3dsidebyside1.jpg">masters3dsidebyside1.jpg</option>
      <option value="/images/side-by-Side-LCI.jpg">side-by-Side-LCI.jpg</option>
      <option value="/images/G-Force-trailer-3D.jpg">G-Force-trailer-3D.jpg</option>
      <option value="/images/side-by-side-3d.jpg">side-by-side-3d.jpg</option>
      <option value="/images/5305857371_a7b21074a2.jpg">5305857371_a7b21074a2.jpg</option>
    </select>

    <select onChange="javascript:algorythm=this.value;handleImg(img);">
      <option value="default" selected>Default</option>
      <optgroup label="3d renderers">
        <option value="true-anaglyphs">True Anaglyphs</option>
        <option value="optimized-anaglyphs">Optimized Anaglyphs</option>
        <option value="gray-anaglyphs">Gray Anaglyphs</option>
        <option value="color-anaglyphs">Color Anaglyphs</option>
        <option value="half-color-anaglyphs">Half Color Anaglyphs</option>
      </optgroup>
      <optgroup label="not 3d effects">
        <option value="grayscale">Grayscale</option>
        <option value="brightness">Brightness</option>
        <option value="threshold">Threshold</option>
      </optgroup>
    </select>

    <hr />

    <script>
      var canvas = document.createElement('canvas');
      var canvas2 = document.createElement('canvas');
      var algorythm = 'default';
      var img = new Image;
      img.onload = function() {
        handleImg(img);
      };

      function handleImg(img) {
        halfWidth = img.width / 2;
        canvas.width = img.width;
        //canvas.width = halfWidth;
        canvas.height = img.height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var pixels = imageData.data;
        console.info('canvas.width', canvas.width);
        console.info('canvas.height', canvas.height);
        console.info('pixels.length', pixels.length);
        for (var i = 0, il = pixels.length; i < il; i+= 4) {
          //var color = Math.random() * 255;
          if ((i / 4) % img.width < img.width / 2) {
            var r1 = pixels[i + 0],
              r2 = pixels[i + 0 + img.width * 2],
              g1 = pixels[i + 1],
              g2 = pixels[i + 1 + img.width * 2],
              b1 = pixels[i + 2],
              b2 = pixels[i + 2 + img.width * 2],
              ra = 0,
              ga = 0,
              ba = 0;

            switch (algorythm) {
            case 'true-anaglyphs':
              ra = 0.299 * r1 + 0.587 * g1 + 0.114 * b1;
              ba = 0.299 * r2 + 0.587 * g2 + 0.114 * b2;
              break;
            case 'optimized-anaglyphs':
              ra = 0.7 * g1 + 0.3 * b1;
              ga = g2;
              ba = b2;
              break;
            case 'gray-anaglyphs':
              ra = 0.299 * r1 + 0.587 * g1 + 0.114 * b1;
              ga = ba = 0.299 * r2 + 0.587 * g2 + 0.114 * b2;
              break;
            case 'color-anaglyphs':
              ra = r1;
              ga = r2;
              ba = b2;
              break;
            case 'half-color-anaglyphs':
              ra = 0.299 * r1 + 0.587 * g1 + 0.114 * b1;
              ga = r2;
              ba = b2;
              break;
            case 'grayscale':
              var v = 0.299 * r1 + 0.587 * g1 + 0.114 * b1;
              ra = ga = ba = v;
              break;
            case 'brightness':
              var adjustment = 100;
              ra = r1 + adjustment;
              ga = g1 + adjustment;
              ba = b1 + adjustment;
              break;
            case 'threshold':
              var v = (r1 + 0.2126 * r1 + 0.7152 * g1 + 0.0722 * b1) ? 255 : 0;
              ra = ga = ba = v;
            break;
            case 'default':
              ra = r1;
              ga = g1;
              ba = b1;
              break;
            default:
              break;
            }
          } else {
            ra = 255;
            ga = 255;
            ba = 255;
          }
          pixels[i + 0] = ra;
          pixels[i + 1] = ga;
          pixels[i + 2] = ba;
        }
        ctx.putImageData(imageData, 0, 0);

        canvas2.width = img.width;
        canvas2.height = img.height;
        canvas.style.display = 'block';
        var ctx2 = canvas2.getContext('2d');
        ctx2.drawImage(img, 0, 0);

        document.body.appendChild(canvas);
        document.body.appendChild(canvas2);
      }
    img.src = 'images/statue2-3D-side-by-side-960.jpg';
    </script>
  </body>
</html>

How to generate and automatically open google doc with data from google sheet using appscript?

I have this existing code, it does create the google doc however the data are not replaced and it does not open automatically. I was hoping for the google doc to be just temporary as well but they kept piling up in my drive everytime I test it, is there any possible means to do what I am trying to do?

code.gs

function printRouteSlip(formObject) {
const templateId = "url  of my google doc"; // Template Google Doc ID
const templateFile = DriveApp.getFileById(templateId);

// Make a copy of the template
const newDoc = templateFile.makeCopy(`Route Slip for ${formObject.trackingNumber}`);
const newDocId = newDoc.getId();
const doc = DocumentApp.openById(newDocId);
const body = doc.getBody();

// Replace placeholders in the document with actual data from formObject
body.replaceText("{{TimeStamp}}", formObject.timeStamp || "");
body.replaceText("{{TrackingNumber}}", formObject.trackingNumber || "");
body.replaceText("{{DateReceived}}", formObject.dateReceived || "");
body.replaceText("{{ReceivedBy}}", formObject.receivedBy || "");
body.replaceText("{{TransactionType}}", formObject.transactionType || "");
body.replaceText("{{Description}}", formObject.description || "");
body.replaceText("{{OriginOffice}}", formObject.originOffice || "");
body.replaceText("{{ActionTaken}}", formObject.actionTaken || "");
body.replaceText("{{Recipient}}", formObject.recipient || "");
body.replaceText("{{DateTransmitted}}", formObject.dateTransmitted || "");
body.replaceText("{{Remarks}}", formObject.remarks || "");
body.replaceText("{{EmailAddress}}", formObject.email_add || "");

// Save and close the document
doc.saveAndClose();

// Get the document URL
const docUrl = `https://docs.google.com/document/d/${newDocId}/edit`;

// Show the document in a modal for the user to print
const html = HtmlService.createHtmlOutput(`
    <p>Click the button below to open and print the document:</p>
    <a href="${docUrl}" target="_blank">
        <button style="padding: 10px 20px; font-size: 16px;">Open Document</button>
    </a>
    <script>
        window.onunload = function() {
            google.script.run.deleteTempFile('${newDocId}');
        };
    </script>
`).setWidth(400).setHeight(200);
SpreadsheetApp.getUi().showModalDialog(html, "Print Route Slip");

}

function deleteTempFile(fileId) {
    const file = DriveApp.getFileById(fileId);
    if (file) {
        file.setTrashed(true);
    }
}

javascript.html

function preventFormSubmit(event) {
event.preventDefault(); // Prevent the form from submitting normally

Swal.fire({
    title: "Are you sure?",
    text: "You can no longer edit this once submitted.",
    icon: "warning",
    showCancelButton: true,
    confirmButtonColor: "#3085d6",
    cancelButtonColor: "#d33",
    confirmButtonText: "Yes, submit it!"
}).then((result) => {
    if (result.isConfirmed) {
        addTimestamp();
        Swal.fire({
            title: 'Please Wait',
            text: 'Transaction is being recorded.',
            icon: "info",
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        google.script.run
            .withSuccessHandler(function(trackingNumber) {
                const formObject = {
                    timeStamp: document.getElementById('timeStamp').value,
                    trackingNumber: trackingNumber,
                    dateReceived: document.getElementById('dateReceived').value,
                    receivedBy: document.getElementById('receivedBy').value,
                    transactionType: document.getElementById('transactionType').value,
                    description: document.getElementById('description').value,
                    originOffice: document.getElementById('originOffice').value,
                    actionTaken: document.getElementById('actionTaken').value,
                    recipient: document.getElementById('recipient').value,
                    remarks: document.getElementById('remarks').value,
                    dateTransmitted: document.getElementById('dateTransmitted').value,
                    email_add: document.getElementById('email_add').value || "" // Optional field
                };

                handleFormSubmit(formObject);

                Swal.close();
                Swal.fire({
                    title: 'Success!',
                    html: `The document tracking number is:<br><strong>${trackingNumber}</strong>`,
                    icon: 'success',
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#3085d6'
                }).then(() => {
                    Swal.fire({
                        title: "Do you want to print the data?",
                        icon: "question",
                        showCancelButton: true,
                        confirmButtonText: "Yes",
                        cancelButtonText: "No"
                    }).then((printResult) => {
                        if (printResult.isConfirmed) {
                            // Call the printRouteSlip function here
                            google.script.run.printRouteSlip(formObject);
                        }
                    });
                });
            })
            .withFailureHandler(function(error) {
                Swal.fire({
                    title: 'Error',
                    text: `An error occurred: ${error.message}`,
                    icon: 'error',
                    confirmButtonColor: '#d33'
                });
            })
            .generateTrackingNumber();
    }
});

}

React Input State Reset and Space Character Issue in Dynamic Checklist Component

I’m working on a React component to manage a preparation checklist where users can add, delete, and save items. The functionality works as intended for the most part, but I’m encountering two issues:

Input Field State Reset:

When adding a new checklist item, the input field (newField) sometimes resets unexpectedly, likely due to component re-renders.
This happens when I update the items state, causing the entire component to re-render.

Space Character Issue:

Spaces at the beginning or end of the input are not handled properly.

Here’s the code snippet:

"use client";

import { useState, useTransition } from "react";

import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { LoaderSpinner } from "@/components/loader-spinner";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { delay } from "@/lib/utils";
import { XIcon, Check, CircleMinus } from "lucide-react";
import { prepCheckList } from "@/lib/utils";
import { useRouter } from "next/navigation";

export function PreparationChecklist({
  isChecklistOpen,
  setIsChecklistOpen,
  entityId,
  data,
}) {
  const [isPending, startTransition] = useTransition();

  const [isOpen, setIsOpen] = useState(false);
  const [items, setItems] = useState(
    data?.length > 0
      ? data
      : [
          {
            label: "label 1",
            checked: false,
            isNew: false,
          },
          {
            label: "label 2",
            checked: false,
            isNew: false,
          },
          {
            label: "label 3",
            checked: false,
            isNew: false,
          },
          { label: "label 4", checked: false, isNew: false },
          {
            label: "label 5",
            checked: false,
            isNew: false,
          },
          {
            label: " label 6",
            checked: false,
            isNew: false,
          },
        ],
  );
  const [newField, setNewField] = useState("");
  const [isSaving, setIsSaving] = useState(false);
  const [isAdding, setIsAdding] = useState(false);

  const route = useRouter();

  const handleCheckedChange = (index, checked) => {
    setItems((prevItems) => {
      const updatedItems = [...prevItems];
      updatedItems[index].checked = checked;
      return updatedItems;
    });
  };

  const handleSave = async () => {
    setIsSaving(true);
    const response = await prepCheckList(entityId, items);
    console.log("response: >>>>>>>>>", response);

    await delay(1000); // Simulate API call
    startTransition(() => {
      route.refresh();
      setIsSaving(false);
          });
  };

  const handleAddMoreClick = () => {
    if (isAdding) {
      if (newField) {
        // Add new item if input is not empty
        setItems((prevItems) => [
          ...prevItems,
          { label: newField, checked: false, isNew: true },
        ]);
        setNewField(""); // Reset the input field
        setIsAdding(false); // Hide the input field
      } else {
        // Hide input field if clicked again with no input
        setIsAdding(false);
      }
    } else {
      // Show input field
      setIsAdding(true);
    }
  };
  const handleDeleteField = (index) => {
    // Only allow deleting items with `isNew: true`
    setItems((prevItems) =>
      prevItems.filter((_, i) => !(i === index && prevItems[i].isNew)),
    );
  };
  return (
   
      
      <Dialog
      open={isChecklistOpen}
      onOpenChange={() => setIsChecklistOpen(!isChecklistOpen)}
    >
        <DialogContent className="sm:max-w-[900px]">
          <DialogHeader>
            <DialogTitle className="text-xl">
              Checklist
            </DialogTitle>
          </DialogHeader>
          <div className="ml-2">
            <ScrollArea className="h-[250px] rounded-md">
              {items.map((item, index) => (
                <div
                  key={`${index}-${item.label}`}
                  className="flex items-center gap-3 py-2"
                >
                  <Checkbox
                    id={`${index}-${item.label}`}
                    checked={item.checked}
                    onCheckedChange={(checked) =>
                      handleCheckedChange(index, checked)
                    }
                    className="h-4 w-4"
                  />
                  <Label
                    htmlFor={`${index}-${item.label}`}
                    className="cursor-pointer"
                  >
                    {item.label}
                  </Label>
                  <div className="flex w-6 justify-center">
                    {item.isNew && (
                      <Button
                        variant="link"
                        size="smIcon"
                        onClick={() => handleDeleteField(index)}
                      >
                        <CircleMinus className="h-4 w-4 text-red-500 hover:text-red-600" />
                      </Button>
                    )}
                  </div>
                </div>
              ))}
            </ScrollArea>
          </div>
          <div className="mt-4 flex items-center justify-end gap-4">
            {isAdding && (
              <Input
                value={newField}
                onChange={(e) => setNewField(e.target.value)}
                placeholder="Add new checklist item"
                className="flex-1"
              />
            )}
            <Button
              size={isAdding ? "icon" : "sm"}
              variant={isAdding ? "outline" : "TypeA"}
              onClick={handleAddMoreClick}
              className={isAdding ? "rounded-full" : ""}
            >
              {isAdding ? (
                newField ? (
                  <Check className="h-5 w-5 text-green-500 hover:text-green-600" />
                ) : (
                  <XIcon className="h-5 w-5 text-red-500 hover:text-red-600" />
                )
              ) : (
                "Add More"
              )}
            </Button>
            <Button
              size="sm"
              variant="TypeA"
              onClick={handleSave}
              disabled={isSaving || isPending}
            >
              {isSaving || isPending ? (
                <LoaderSpinner className="text-white" />
              ) : (
                "Save changes"
              )}
            </Button>
          </div>
          <DialogFooter></DialogFooter>
        </DialogContent>
      </Dialog>
   
  );
}

What I’ve Tried:

Debouncing the Input: I’ve tried debouncing the input handler, but the field still resets during re-renders.

Expected Behavior:

The input field should retain its value even if the component re-renders when items state is updated.
Users should be able to type spaces (leading, trailing, or in-between) without restrictions.

Questions:

  1. How can I prevent the input field (newField) from resetting during
    re-renders?
  2. What’s the best way to handle spaces in the input field while
    ensuring clean validation?

Any advice or alternative approaches would be greatly appreciated! Thank you.

Creating a slider for a horizontal navigation bar that ‘slides’ between options

I’m building a html page with a navigation bar at the top, in the center and horizontally aligned.image 1

The idea is to have a ‘sliding’ selection bar, rather than a border that only appears on a selected or hovered-over item in the navigation bar. I have that working for the development page, for example if I scroll my mouse over to ‘the cabaret’, the border around the ‘development’ element correctly ‘slides’ to the right of the page, eventually wrapping around ‘the cabaret’.
image 2

Above you can see me screenshotting midway after I’ve hovered my mouse over ‘the cabaret’.

The problem I’m having comes with the other pages, which for a reason that has been baffling me for hours, are not working like the development page. Here is an example:image 3

As you can see, when I choose to navigate to this page, the slider does not initialise correctly, instead loading in as vertical line in the middle of the navigation bar, and displaying no further behaviour, if I try to hover over another element in the navigation bar for example.

But why! I have used console.log in my JS to ensure the right active link is being passed when an option is chosen, and I can see it is when checking the console during runtime.

Here is what I believe to be the relevant HTML, CSS and JS:

// Add event listeners for option clicks
const options = document.querySelectorAll('.option');
let selectedOption = null;

options.forEach((option) => {
  option.addEventListener('click', () => {
    // Deselect previous option
    if (selectedOption) {
      selectedOption.classList.remove('selected');
    }

    // Select the clicked option
    option.classList.add('selected');
    selectedOption = option;

    // Get page ID from data attribute in HTML
    const pageId = option.getAttribute('data-page');
    const activeLinkId = option.getAttribute('data-active-link');
    const activeLink = document.getElementById(activeLinkId);
    navigateToPage(pageId, activeLink);
  });
});

// PAGE NAVIGATION
function navigateToPage(pageId, activeLink) {
  const portfolioPageContent = document.getElementById('portfolio-page').children; // children so not background, goal to swipe text elements up
  const selectedPage = document.getElementById(pageId);

  if (!selectedPage) {
    console.error(`Page with ID "${pageId}" not found.`);
    return;
  }


  // Update navbar links for active state
  const links = document.querySelectorAll('.navbar a');
  links.forEach(link => link.classList.remove('active'));  // Remove 'active' from all links
  if (activeLink) {
    activeLink.classList.add('active');  // Add 'active' to the selected link
    moveSlider(activeLink); // Move slider to active link
  }


  // Swipe the portfolio page content up, not the background
  gsap.to(portfolioPageContent, {
    y: '-200%',
    opacity: 0,
    duration: 0.8,
    ease: 'power2.inOut',
    onComplete: () => {

      if (selectedPage) {
        selectedPage.style.display = 'block';
        gsap.to(selectedPage, { opacity: 1, duration: 0});
        
        
      } else {
        console.error(`Page with ID "${pageId}" not found.`);
      }

      // Fade in new page first, then hide old page
      gsap.to(selectedPage, { opacity: 1, duration: 1 }, "fade-in")
        .then(() => {
          document.getElementById('portfolio-page').style.visibility = 'hidden';
        });


        console.log(activeLink);
        if (activeLink) {
          setTimeout(() => {
            moveSlider(activeLink);
          }, 100);
        }

        // Add hover-over effect to move the slider
        links.forEach(link => {
          link.addEventListener('mouseenter', () => moveSlider(link));
        });

        // Keep slider on the active link when not hovering
        navbar.addEventListener('mouseleave', () => {
          if (activeLink) moveSlider(activeLink);
        });

    },
  });
}

const navbar = document.querySelector('.navbar');
const slider = document.querySelector('.slider');
const links = document.querySelectorAll('.navbar a');
console.log(links);

// Function to move the slider
function moveSlider(link) {
  const rect = link.getBoundingClientRect(); // Get the link's position
  const navbarRect = navbar.getBoundingClientRect(); // Get navbar's position

  const sliderWidthAdjustment = 1.5; // Shrink the width slightly
  const sliderLeftAdjustment = -1.5; // Offset to the left slightly

  slider.style.width = `${rect.width - sliderWidthAdjustment}px`; // Adjust width
  slider.style.left = `${rect.left - navbarRect.left + sliderLeftAdjustment}px`; // Adjust position

}
  #page-development,
  #page-messagetomountains,
  #page-cabaret {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #202020;
    text-align: center;
    z-index: 10;
    opacity: 0;
    transition: opacity 1s ease-in-out; 
    /* text-shadow: 0.001rem 0 0.1rem #c8fcfc; */
    text-shadow: none;
    font-family: "Lucida Console", "Courier New", monospace;
}

#page-development {
  background: radial-gradient(circle, #f4d4b4 0%, #e9ceb3 100%);
}

#page-messagetomountains {
  /* background: radial-gradient(circle, #F5C7C7 0%, #e0bdbd 100%); */
  background: radial-gradient(circle, #94d0e8 0%, #82c1db 100%);
  color: white ;
}

#page-cabaret {
  background: radial-gradient(circle, #8E98F9 0%, #868ed6 100%);
}

.navbar {
  position: relative;
  display: flex;
  justify-content: center;
  /* align-items: center;
  flex-wrap: wrap; */
  background-color: #82c1db;
  padding: 10px 20px;
}

.navbar a {
  position: relative;
  color: white;
  text-decoration: none;
  padding: 8px 20px;
  margin: 0 150px;
  border: 2px solid transparent;
  border-radius: 20px;
  z-index: 1; /* links above slider */
  transition: color 0.3s, transform 0.3s;
}

.navbar a:hover {
  color: #eeffff;
}

.navbar a.active {
  color: #ffffff;
}

/* moving border */
.slider {
  position: absolute;
  height: calc(100% - 23px); /* try match link padding */
  border: 2px solid #ffffff;
  border-radius: 20px;
  background: none;
  transition: all 0.4s ease;
  z-index: 0; /* sits behind the links */
}
<div id="page-development" style="display: none;"> 
      <nav class="navbar">
        <div class ="slider"></div>
        <a href="#development" class="active" id = "development-link">development</a>
        <a href="#messagetomountains">messagetomountains</a>
        <a href="#cabaret">the cabaret</a>
      </nav> 
      <h2>dev page</h2>
      <p>this is the development page.</p>
    </div>
  
    <div id="page-messagetomountains" style="display: none;">
      <nav class="navbar">
        <div class ="slider"></div>
        <a href="#development">development</a>
        <a href="#messagetomountains" class="active" id = "messagetomountains-link">messagetomountains</a>
        <a href="#cabaret">the cabaret</a>
      </nav> 
      <h2>messagetomountains page</h2>
      <p>this is the messagetomountains page.</p>
    </div>
  
    <div id="page-cabaret" style="display: none;">
      <nav class="navbar">
        <div class ="slider"></div>
        <a href="#development">development</a>
        <a href="#messagetomountains">messagetomountains</a>
        <a href="#cabaret" class="active" id = "cabaret-link">the cabaret</a>
      </nav>  
      <h2>cabaret page</h2>
      <p>welcome to the cabaret.</p>
    </div>

To give context, there is a central portfolio page that houses 3 options. When an option is clicked, it fades out the portfolio page by swiping the text up on the portfolio page, and then fades in the content from one of the options (page-development, page-cabaret, etc.). Only though when the ‘page-development’ is displayed does the slider behave correctly, and in the other two cases it does not.

What have I tried?
I’ve tried rewriting the moveSlider function, and have had success in changing the way the slider works and yet it still will only work for the development page. No matter what behaviour I try to execute. I’ve tried reworking the navigateToPage function, such that I try only to initialise the navbar inside there and that has not worked either. My code during this process has become a bit of a mess to which is unfortunate, due to me trying to incorporate this ‘activeLink’ parameter which was not part of the code before.

This has been my first time using GSAP and also having a page ‘fade in’ and ‘fade out’ other pages on top of it, rather than just navigating to a specific option page when an option is clicked e.g. /development. I think in trying to do it this way I have overcomplicated things and made the transitioning between pages quite awkward.

I would really appreciate any guidance on how to correct the slider such that it behaves as intended and as it currently does on the development page, across all other pages where it is present. To reiterate, that would be the selected page has a border, and dragging the mouse over another option would ‘slide’ that border across to that option. If not clicked, and the mouse is dragged away, the border would automatically slide back to its initial position, resting around the currently selected page’s option.

If nothing else, I’m really curious as to why this is only working on the development page. It is bugging me so much! I suppose it’s something to do with it being the first page listed in my HTML .. but why? Thanks so much for any help 😀