Passing entity model data into Bootstrap Modal

I’m trying to pass data to a modal. After searching around the internet and following bootstrap I found a couple of ways. 1) is by passing the model through data-bs-whatever="@Model", however, if try to access it by recipient (see below) and find its properties it gives me undefined. 2) I can pass the Id of the product by adding this line of code data-id="@Modal.EntityId", however if I follow that way I have to make an AJAX call which I find it unnecessary. How can I pass an entity with fields like; Id, Name, Number, etc. to the bootstrap modal?

Technologies: .NET 8 MVC, Bootstrap 5

Code as follows:


<table id="entities" class="table table-striped">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Product Name</th>
            <th scope="col">Part Number</th>
            <th scope="col">Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach(Entity ent in @Model.Entities)
        {
            <tr>
                <td>@ent.Id</td>
                <td>@ent.Name</td>
                <td>@ent.Number</td>
                <td>
                    // Other Actions
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@ent">Remove</button>
                </td>
            </tr>
        }
    </tbody>
</table>

<!-- Modal -->
<!-- Want to access the complete entity in the modal if possible -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function (){
        $('#products').DataTable();
        $('#clients').DataTable();
    })

    const exampleModal = document.getElementById('exampleModal')
    exampleModal.addEventListener('show.bs.modal', event => {
        const button = event.relatedTarget
        const recipient = button.getAttribute('data-bs-whatever')

        console.log(recipient.Name) // Accessing the property of recipient is undefined
        console.log(recipient) // This logs back the entity type
        const modalTitle = exampleModal.querySelector('.modal-title')
        const modalBodyInput = exampleModal.querySelector('.modal-body p')

        modalTitle.textContent = `Warning! You're about to remove ${recipient}`
        modalBodyInput.textContent = recipient.Name
    })
</script>

Spring Boot POST request returning 405 in a Dockerized React + Spring Todo App

I’m building a todo app with a Spring Boot backend and a React frontend. The backend provides the API, and the project is containerized using Docker.

My @GetMapping requests work correctly, but my @PostMapping method does not seem to be working at all. When I try to add a new todo item, I get a 405 Method Not Allowed error. Additionally, I don’t see any logs in Spring, which makes me think the request isn’t even reaching the backend.

What could be causing this issue? Any help would be appreciated!

Forum Component:

const handleSubmit = async (e) => {
    e.preventDefault();

    if (title.trim() === "") return;

    try {
      const response = await fetch(`${baseUrl}/api/todos/`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ title }),
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const newTodo = await response.json();
      onAdd(newTodo);
      setTitle("");
    } catch (error) {
      console.error("There was an error adding the todo:", error);
    }
  };

Controller Mappings:

@RestController
@RequestMapping("/api")
public class TodoController {

    private static final Logger logger = LoggerFactory.getLogger(TodoController.class);

    @Autowired
    private TodoService todoService;

    @GetMapping("/todos/")
    public ResponseEntity<List<TodoResponse>> getAllTodos() {
        logger.info("GET request to /api/todos");
        List<TodoResponse> response = todoService.getTodos();
        return ResponseEntity.ok(response);
    }

    @GetMapping("/todos/{id}")
    public ResponseEntity<TodoResponse> getTodoById(@PathVariable Long id) {
        logger.info("GET request to /api/todos/{}", id);
        TodoResponse response = todoService.getToDoById(id);
        return ResponseEntity.ok(response);
    }

    @PostMapping("/todos/")
    public ResponseEntity<TodoResponse> addTodo(@RequestBody TodoRequest request) {
        logger.info("POST request to /api/todos with body: {}", request);
        TodoResponse response = todoService.createToDo(request);
        return ResponseEntity.ok(response);
    }

    @PutMapping("/todos/{id}")
    public ResponseEntity<TodoResponse> updateTodo(@PathVariable Long id, @RequestBody TodoRequest request) {
        logger.info("PUT request to /api/todos/{} with body: {}", id, request);
        TodoResponse response = todoService.updateToDo(id, request);
        return ResponseEntity.ok(response);
    }

    @DeleteMapping("/todos/{id}")
    public ResponseEntity<Void> deleteTodo(@PathVariable Long id) {
        logger.info("DELETE request to /api/todos/{}", id);
        todoService.deleteToDoById(id);
        return ResponseEntity.noContent().build();
    }
}

Vite proxy config:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import dns from "node:dns";

dns.setDefaultResultOrder("verbatim");

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api/todos/": {
        target: "http://build-api:8080",
        changeOrigin: true,
        secure: false,
      },
    },
  },
});

Button should stop scrolling at defined hight on html page

I have a button on my html:

<button class="Kontakt-Button">Kontakt</button>

I want this button to be placed at the lower right side of the view point and scroll fixed when scrolling. But i want the button to stop scrolling once it reaches a hight of 300px from the bottom. I tried GPT, but it cant do it. So im seeking good old help from stackoverflow 🙂

This is css atm

.Kontakt-Button {
    position: fixed; /* Standardmäßig fixiert */
    bottom: 20%;
    right: 5%;
    background-color: #A79F79;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 5px 15px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

I dont have a working js so im not posting any or stuff that is broken anyways. Hopefully some of you can help me.
What did GPT do wrong? It always calculated with the height of the page. So when the lower part of the page reached the 300px from bottom, then the button jumped to 300px from the bottom of the page in view

Number the verses of poems with CSS and JS

I try to number the verses of poems, but the result is not quite satisfactory.

  1. I want to align all verses like the first one.
  2. Maintain a consistent line-height.
  3. Blank line must not be counted

The result should match the second blank example (but with number).

  const pre = document.getElementById('canto');
  const righe = pre.textContent.split('n');

  pre.innerHTML = '';

  righe.forEach(riga => {
    const span = document.createElement('span');
    span.textContent = riga.trim();
    pre.appendChild(span);
    pre.appendChild(document.createElement('br'));
  });
pre {
    background-color: #f9f9f9;
    padding: 2rem;
    counter-reset: verso;
    white-space: pre-wrap;
}

pre span {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
    counter-increment: verso;
}

pre span:nth-child(3n+1)::before {
    content: counter(verso) " ";
}
<b>With Span</b>
<pre id="canto">
Nel mezzo del cammin di nostra vita
mi ritrovai per una selva oscura,
ché la diritta via era smarrita.

Ahi quanto a dir qual era è cosa dura
esta selva selvaggia e aspra e forte
che nel pensier rinova la paura!
</pre>

<hr>

<b>Without Span</b>
<pre>
Nel mezzo del cammin di nostra vita
mi ritrovai per una selva oscura,
ché la diritta via era smarrita.

Ahi quanto a dir qual era è cosa dura
esta selva selvaggia e aspra e forte
che nel pensier rinova la paura!
</pre>

Is it possible to mass replace scripts in the Google spreadsheet (extensions -> apps script) with a given name?

I need to create a script in python/google scripts that will replace the script in the sheet. The source script that will be used for the replacement will be saved as Google Script and will have a permanent ID. After providing the sheet ID, the script would find the .gs function with the same name and insert the source script there. I’m trying to create something like this, but every time at some stage it throws HttpError 500 when requesting https://script.googleapis.com/v1/projects…/content?alt=json returned “Internal error encountered.”. Details: “Internal error encountered.”>

I tried creating a google and python script, still the same effect.

import time
import google.auth
from google.auth.transport.requests import Request
from google.oauth2.credentials import Credentials
from google_auth_oauthlib.flow import InstalledAppFlow
from googleapiclient.discovery import build
from googleapiclient.errors import HttpError

# Configuration constants
SCOPES = ['https://www.googleapis.com/auth/script.projects']  # Required API scope
SOURCE_SCRIPT_ID = 'YOUR_SOURCE_SCRIPT_ID_HERE'  # Replace with your source script ID
FILE_NAME = 'YOUR_SCRIPT_FILE_NAME_HERE'  # Replace with your script file name

def authenticate():
    """Handle OAuth2 authentication and return credentials."""
    creds = None
    # Load existing credentials if available
    if os.path.exists('token.json'):
        creds = Credentials.from_authorized_user_file('token.json', SCOPES)
    
    # Refresh or create new credentials if needed
    if not creds or not creds.valid:
        if creds and creds.expired and creds.refresh_token:
            creds.refresh(Request())
        else:
            flow = InstalledAppFlow.from_client_secrets_file(
                'credentials.json', SCOPES)
            creds = flow.run_local_server(port=0)
        # Save credentials for next run
        with open('token.json', 'w') as token:
            token.write(creds.to_json())
    return creds

def get_source_file_content(creds):
    """Retrieve content of the source file from the source project."""
    try:
        service = build('script', 'v1', credentials=creds)
        # Get content from source project
        source_project = service.projects().getContent(scriptId=SOURCE_SCRIPT_ID).execute()
        
        # Search for the specified file
        for file in source_project['files']:
            if file['name'] == FILE_NAME:
                return file['source']
        
        raise Exception(f"File {FILE_NAME} not found in source project.")
    except HttpError as error:
        print(f"API Error: {error}")
        raise

def update_target_script(target_script_id, new_content, creds):
    """Update the target script with new content."""
    max_retries = 3
    retry_delay = 5  # Seconds between retries
    
    for attempt in range(max_retries):
        try:
            service = build('script', 'v1', credentials=creds)
            # Get current content of target project
            target_project = service.projects().getContent(scriptId=target_script_id).execute()
            
            # Simplify file structure for API compatibility
            simplified_files = []
            for file in target_project.get('files', []):
                simplified_files.append({
                    'name': file['name'],
                    'type': file['type'],
                    'source': file['source']
                })
            
            # Update or add the target file
            file_found = False
            for file in simplified_files:
                if file['name'] == FILE_NAME:
                    file['source'] = new_content
                    file_found = True
                    break
            
            if not file_found:
                simplified_files.append({
                    'name': FILE_NAME,
                    'type': 'SERVER_JS',
                    'source': new_content
                })
            
            # Send update request
            request = {'files': simplified_files}
            response = service.projects().updateContent(
                scriptId=target_script_id,
                body=request
            ).execute()
            print("Script updated successfully!")
            return
        except HttpError as error:
            if error.resp.status == 500 and attempt < max_retries - 1:
                print(f"Server error. Retrying ({attempt + 1}/{max_retries})...")
                time.sleep(retry_delay)
            else:
                raise Exception(f"Update failed: {error}")

def main():
    """Main execution flow."""
    target_script_id = input("Enter target script ID: ")
    creds = authenticate()
    new_content = get_source_file_content(creds)
    update_target_script(target_script_id, new_content, creds)

if __name__ == '__main__':
    main()````

Understanding large parallel fetch request/response and timeout delays

Running this in terminal node test.js I was expecting console logs to print runtime close to 2000ms but instead it is well over 5000ms.

Why is that? Is the fetch queuing the requests? Could it be the OS limitation on parallel calls? I dont think the event loop is slowed that much with this simple loop though.

const run = async (i) => {
  const start = Date.now();
  const abortController = new AbortController();
  const timeout = setTimeout(() => {
    abortController.abort();
  }, 2000);
  try {
    const v = await (
      await fetch("https://slowendpoint.com", {
        method: "POST",
        body: JSON.stringify([{}]),
        signal: abortController.signal,
      })
    ).text();
  } catch (e) {
    console.error(e);
  } finally {
    console.log(i, "runtime", Date.now() - start);
    clearTimeout(timeout);
  }
};
for (let i = 0; i < 10000; i++) {
  run(i);
}

What is the difference between Starbucks’ mobile app analytics and website analytics? [closed]

I am experiencing inconsistencies between Starbucks’ mobile app and website analytics. The data doesn’t align, and user behavior varies across both platforms. Some key issues include:

Conversion rates are different between the app and the website.
User engagement is higher on one platform but not the other.
Tracking metrics are not consistent, making it hard to analyze performance.
I expected a similar user journey across both platforms, but the results are different.

I expected both the app and website to show similar user interactions.
I implemented tracking for both, but the data doesn’t match.
I assumed the customer journey would be seamless across platforms, but the behavior differs.

I am new to JavaScript and require hand-holding

I need to create variables ExecutorFullName and ExecutorFullAddress by concatenating First , middle and last; and Address, City, State, and Zip.

I have this so far, but don’t know what string to add first to define the new streing name.
Also – is there a correct or incorrect way to begin this statement? Do I need some sort of header info?

NewString = string.concat(efn,” “,emn,” “,eln) - this is where I struggle I think. 

var efn = ExecutorFirstName
var emn = ExecutorMiddleName
var eln = ExecutorLastName

Why can I not reuse the buffer I brought to the ReadableStreamBYOBReader?

Can someone explain the rational reading from a Web API (WHATWG) ReadableStream, using the BYOB (Bring Your Own Buffer) reader (ReadableStreamBYOBReader), why you cannot reuse your own buffer you brought.

Question: What is the point Bringing Your Own Buffer, if the Buffer you brought cannot be reused? What is the remaining advantage of bringing you own buffer? Why not just give the maximum read size?

If I may compare it to a supermarket, where you are encouraged to bring your own shopping bag. The first time you enter the supermarket with you own bag, everything works as expected, the supermarket fills you bag, you empty it at home, wife happy with you, great. Next you try again with your own bag. But supermarket does allow you to fill your bag as it already has been used before. Good luck with explaining this one at home.

The following code demonstrate multiple reads using the same buffer, and as expected fails, after the first attempt. Does not work in Safari, as Safari lacks BYOB support in the first place.

const url = 'https://raw.githubusercontent.com/Borewit/test-audio/958e057/Various%20Artists%20-%202009%20-%20netBloc%20Vol%2024_%20tiuqottigeloot%20%5BMP3-V2%5D/01%20-%20Diablo%20Swing%20Orchestra%20-%20Heroines.mp3';

async function byobReader(reader) {
  const myBuffer = new Uint8Array(256);
  let result;
  let i=0;
  do {
    console.log(`Read iteration ${++i}...`);
    result = await reader.read(myBuffer);
    console.log(`Read read=${result.value.length} bytes, done=${result.done}`);
  } while(!result.done);
}

async function run() {
  console.log('fetching...');
  const response = await fetch(url);
  if (response.ok) {
    console.log('HTTP response succussful');
    const stream = response.body;
    try {
      const reader = stream.getReader({mode:'byob'});
      console.log('BYOB Reader supported');
      await byobReader(reader);
    } catch(error) {
      console.error(`Failed to initialize BYOB-Reader=${error.message}`);
    }
  } else {
    console.error(`Failed with HTTP-status=${response.status}`);
  }
}

run().catch(error => {
  console.error(`Error: ${error.message}`);
});

If you browser support BYOB, the output will be:

fetching...
HTTP response succussful
BYOB Reader supported
Read iteration 1...
Read read=256 bytes, done=false
Read iteration 2...
Failed to initialize BYOB-Reader=Failed to execute 'read' on 'ReadableStreamBYOBReader': This readable stream reader cannot be used to read as the view has byte length equal to 0

The only clear advantage I can see compared to the ReadableStreamDefaultReader, is that you can set a constraint on the buffer size.

Error when downloading SVG files from React application

I have a page of iconCard components that consume icon components. I have added a button to each card to allow downloading the icon for each card on click of a button contained on that card with the ‘downloadSVG’ function. I see the download happen, and the images are named appropriately (svgFile.svg) and saved into my Downloads folder, but when I open my downloads folder on my machine and click on the svg file, I get this error:

Namespace prefix xlink for href on use is not defined

I have read about the deprecated xlink namespace for href attributes, but when I remove ‘xlink’ and just use ‘href’ it doesn’t resolve the issue. The path to my icons is as follows:

project/public/assets/icons/[icon-name]/[icon-name.svg]

Here is my code.

import React, { useCallback, useRef } from 'react';
import PropTypes from 'prop-types';

import { CbdsButton, CbdsIcon } from '@cbds/cbds-components-react';
import ButtonInlineCode from '../ButtonInlineCode';


const IconCard = ({ iconName, size, color, library, a11yRole, a11yLabel }) => {

const svgRef = useRef();

const downloadSVG = useCallback(() => {
    const svg = svgRef.current.innerHTML;
    const blob = new Blob([svg], { type: "image/svg+xml" });
    downloadBlob(blob, `${iconName}.svg`);
}, []);

return (
    <div className="cbdsws-c-iconCard">

    <div className="cbdsws-c-iconCard__media" ref={svgRef}>
    <CbdsIcon iconName={iconName} size={size} color={color} library={library} a11yRole={a11yRole} a11yLabel={a11yLabel ? a11yLabel : iconName} />
  </div>

  <div className="cbdsws-c-iconCard__body">
    <div className="cbdsws-c-iconCard__copyBtn cbdsws-c-iconCard__longName">
      <ButtonInlineCode codeSnippet={iconName} type={library === "ui" ? "icon" : "iconBrand"} />
      <br />
      <CbdsButton size="sm" onClick={downloadSVG} variant="ghost" label="Download" />
    </div>
  </div>

</div>
);

function downloadBlob(blob, filename) {
    const objectUrl = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = objectUrl
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    setTimeout(() => URL.revokeObjectURL(objectUrl), 5000);
    }

};

IconCard.propTypes = {
iconName: PropTypes.string.isRequired,
size: PropTypes.oneOf([
    "sm",
    "md",
    "12",
    "16",
    "20",
    "24",
    "28",
    "60",
    "80",
    "120",
    ]),
    color: PropTypes.oneOf(["primary", "light", "dark"]),
    library: PropTypes.oneOf(["ui", "brand"]),
    a11yRole: PropTypes.string,
    a11yLabel: PropTypes.string,
};

IconCard.defaultProps = {
    iconName: "close",
    size: null,
    color: null,
    library: "ui",
    a11yRole: "img",
};

export default IconCard;

And here is an example of one of the SVG files. They’re all like this one. I suppose it’s possible I may need to add Namespacing to each svg. There are hundreds of them. The ones on the cards are being pulled from 2 sprites, but to download them, I had to save each individual one to a folder.

<svg width="48" height="48" viewBox="0 0 48 48">
    <path fill-rule="evenodd" d="M24 4c10.985 0 20 9.015 20 20s-9.015 20-20 20S4 34.985 4 24 13.015 4 24 4zm0 10c-1.003 0-2 1-2 2v6h-6c-.999 0-2 1-2 2s1 2 2 2h6v6c0 1 1 2 2 2s2-1 2-2v-6h6c1 0 2-1 2-2s-1-2-2-2h-6v-6c0-1.001-.997-2-2-2z"></path>
</svg>

Can anyone please shed some light? Thank you.

Google Visualization Gauge Change Label Position

I am attempting to move the gauge label above the visualization.
My attempt to use $("#Min svg text:first").attr("y", 5); resulted in the label being chopped off on top. I’ve tried digging into the svg but none of my attempts have been able to add any padding/margin above the gauge.

Does anyone have a suggestion or experience with this? Many thanks as always.

Image of error

google.charts.load('current', {
  'packages': ['gauge']
});

const paramsMin = {
  divId: "Min",
  label: "Fastest",
  value: 3,
  greenFrom: 3,
  greenTo: 5,
}
google.charts.setOnLoadCallback(function() {
  drawChart(paramsMin)
});

const paramsStandard = {
  divId: "Standard",
  label: "Standard",
  value: 5,
}
google.charts.setOnLoadCallback(function() {
  drawChart(paramsStandard)
});

const paramsMax = {
  divId: "Max",
  label: "Slowest",
  value: 7,
  redFrom: 5,
  redTo: 7,
}
google.charts.setOnLoadCallback(function() {
  drawChart(paramsMax)
});

function drawChart(params) {
  const {
    divId,
    label,
    value,
    greenFrom = null,
    greenTo = null,
    redFrom = null,
    redTo = null
  } = params;

  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    [label, value],
  ]);

  var options = {
    width: 120,
    height: 120,
    greenFrom: greenFrom,
    greenTo: greenTo,
    redFrom: redFrom,
    redTo: redTo,
    minorTicks: 5,
    min: 0,
    max: 10,
  };

  var chart = new google.visualization.Gauge(document.getElementById(`${divId}`));

  chart.draw(data, options);
  $(`#${divId} svg text:first`).attr('y', 5);
}
.grid-container-element {
  display: grid;
  grid-template-columns: 125px 125px 125px;
}

.grid-child-element {}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


<div class="grid-container-element">
  <div class="grid-child-element purple">
    <div id="Min" style="width: 120px; height: 120px;"></div>
  </div>
  <div class="grid-child-element green">
    <div id="Standard" style="width: 120px; height: 120px;"></div>
  </div>
  <div class="grid-child-element green">
    <div id="Max" style="width: 120px; height: 120px;"></div>
  </div>
</div>

Three.js Scene Freezes When Browser Tab is Idle

I’m working on a Three.js project with a Tamagotchi-style animated character using GLTF animations and an animation mixer. The project includes a robot, a hatching box, and interactive controls.

Everything runs smoothly until the browser tab is idle for a few minutes. When I return to the window the scene appears frozen and the robot stops animating.

My animation loop is in the class Experience.js:

this.time.on('tick', () => {
    this.update();
});

update() {
    const deltaTime = this.time.delta;
    this.world.update(deltaTime);
    this.camera.update();
    this.renderer.update();
}

In the class World.js the update is:

update(deltaTime) {
        if (this.box) {
            this.box.update(deltaTime)
        }
        if (this.robot) {
            this.robot.update(deltaTime)
        }
    }

Inside the Box.js:

update(deltaTime) {
        if (this.mixer) {
            this.mixer.update(deltaTime)
        }
    }

In the Robot.js:

update(deltaTime) {
        if (this.tamagotchiController) {
            this.tamagotchiController.update(deltaTime)
        }
    }

Animation updating in TamagotchiController.js:

update(deltaTime) {
    if (this.mixer) {
        this.mixer.update(deltaTime);
    }
}

Finally the Camera.js update is:

update() {
        if (this.controls) {
            this.controls.update()
        }
    }

and the Renderer.js:

update() {
        this.instance.render(this.scene, this.camera.instance)
    }

The live project is here

I have no idea what is going wrong because no errors appear on the console.

Here is the Time.js used in the project:

import EventEmitter from './EventEmitter.js'

export default class Time extends EventEmitter {
    constructor() {
        super()

        // Setup
        this.start = Date.now()
        this.current = this.start
        this.elapsed = 0
        this.delta = 0.016 // Initialize with a typical frame time in seconds

        window.requestAnimationFrame(() => {
            this.tick()
        })
    }

    tick() {
        const currentTime = Date.now()
        this.delta = (currentTime - this.current) / 1000 // Convert milliseconds to seconds
        this.current = currentTime
        this.elapsed = (this.current - this.start) / 1000 // Convert milliseconds to seconds

        this.trigger('tick')

        window.requestAnimationFrame(() => {
            this.tick()
        })
    }
}

How to resolve the dependency conflicts I’m facing while setting up Rocket.Chat?

I’m trying to set up Rocket.Chat on my local machine, but I’m running into several build errors that I can’t seem to resolve. I’ve followed the official setup instructions, but I’m hitting issues during the installation process with Yarn.

Here are some of the error messages I’m encountering (removed some because of body limit):

command exited (1) errors from multiple packages, including @rocket.chat/livechat, @rocket.chat/fuselage-ui-kit, and others.

A lot of packages (like bcrypt, sharp, highlight.js, esbuild, etc.) require building and keep failing.

There are warnings like must be built because it never has been before or the last one failed.

I’ve already tried clearing the Yarn cache and reinstalling dependencies using yarn install –force, but the issue persists. I also made sure I have the necessary build tools installed (node-gyp, Python, etc.) and have updated my Node.js version.

Has anyone here faced similar issues or can offer advice on how to resolve them? Any help or suggestions would be greatly appreciated!

Checkout the below, this is what i received after running yarn install

➤ YN0000: · Yarn 4.6.0
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 0s 794ms
➤ YN0000: ┌ Post-resolution validation
➤ YN0060: │ @testing-library/react is listed by your project with version 16.0.1 (pa9c24), which doesn't satisfy what @react-spectrum/test-utils and other dependencies request (^15.0.7).
➤ YN0060: │ @testing-library/react is listed by your project with version 16.0.1 (pc78b6), which doesn't satisfy what @react-spectrum/test-utils and other dependencies request (^15.0.7).
➤ YN0060: │ @typescript-eslint/eslint-plugin is listed by your project with version 5.60.1 (p4a625), which doesn't satisfy what eslint-plugin-jest requests (^6.0.0 || ^7.0.0 || ^8.0.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p03f1f), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p058dc), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0 || ^9.7.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p1861a), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p18f2b), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p19abf), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-jest) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p1b0a5), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p1e4af), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0 || ^9.7.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p2b44b), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p2d4ce), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p4a185), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p4cc1f), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0 || ^9.7.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p50632), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p596bb), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p5f09f), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p63790), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p67268), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0 || ^9.7.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p6b481), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p78da6), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p79ebc), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p7b1f7), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p7bf2c), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p9989a), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0 || ^9.7.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pad400), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pb231b), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0 || ^9.7.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pc8576), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pca560), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pd6a98), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pd739b), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pdd4b4), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pdf71e), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pe325a), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0 || ^9.7.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pe8bbd), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pf6807), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0 || ^9.7.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pffe6f), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ prettier is listed by your project with version 3.3.3 (p2088b), which doesn't satisfy what @rocket.chat/prettier-config and other dependencies request (~2.7.1).
➤ YN0060: │ prettier is listed by your project with version 3.3.3 (p582a7), which doesn't satisfy what @rocket.chat/prettier-config and other dependencies request (~2.7.1).
➤ YN0060: │ prettier is listed by your project with version 3.3.3 (p58d10), which doesn't satisfy what @rocket.chat/prettier-config requests (~2.7.1).
➤ YN0060: │ prettier is listed by your project with version 3.3.3 (p6eec0), which doesn't satisfy what @rocket.chat/prettier-config requests (~2.7.1).
➤ YN0060: │ prettier is listed by your project with version 3.3.3 (pbb663), which doesn't satisfy what @rocket.chat/prettier-config requests (~2.7.1).
➤ YN0060: │ prettier is listed by your project with version 3.3.3 (pcc453), which doesn't satisfy what @rocket.chat/prettier-config and other dependencies request (~2.7.1).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p0f476), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p1434d), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p35994), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (^17.0.2).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p5a657), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p64616), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p67eab), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p78ed8), which doesn't satisfy what @rocket.chat/ui-contexts and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p8ca07), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p97776), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (~17.0.2).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p97ace), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (pa454c), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (pa9294), which doesn't satisfy what @rocket.chat/layout and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (pada5d), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (~17.0.2).
➤ YN0060: │ react is listed by your project with version 18.3.1 (pd5e5d), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (^17.0.2).
➤ YN0060: │ react is listed by your project with version 18.3.1 (pd7632), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (pf1cb7), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (^17.0.2).
➤ YN0060: │ react-aria is listed by your project with version 3.37.0 (p612cf), which doesn't satisfy what @rocket.chat/ui-voip requests (~3.23.1).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (p08ac0), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (p46e93), which doesn't satisfy what @rocket.chat/fuselage-toastbar and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (p54b31), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (^17.0.2).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (p7e149), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (pb0a81), which doesn't satisfy what @rocket.chat/fuselage-toastbar and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (pcf2f8), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (pd54c2), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (pdbd80), which doesn't satisfy what @rocket.chat/logo and other dependencies request (17.0.2).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (pdfd68), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (pf0691), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-i18next is listed by your project with version 13.2.2 (p927a5), which doesn't satisfy what @rocket.chat/layout and other dependencies request (~11.15.4).
➤ YN0060: │ react-i18next is listed by your project with version 13.2.2 (paaa51), which doesn't satisfy what @rocket.chat/layout and other dependencies request (~11.15.4).
➤ YN0060: │ react-virtuoso is listed by your project with version 4.12.0 (pa6103), which doesn't satisfy what @rocket.chat/fuselage requests (1.2.4).
➤ YN0060: │ react-virtuoso is listed by your project with version 4.12.0 (ped875), which doesn't satisfy what @rocket.chat/fuselage requests (1.2.4).
➤ YN0060: │ sodium-native is listed by your project with version 4.3.1 (p68628), which doesn't satisfy what sodium-plus requests (^3.2.0).
➤ YN0060: │ sodium-native is listed by your project with version 4.3.1 (p8dac2), which doesn't satisfy what sodium-plus requests (^3.2.0).
➤ YN0060: │ typescript is listed by your project with version 5.7.2 (p457bb), which doesn't satisfy what typedoc and other dependencies request (~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.1.0 || ~5.1.0 || ~5.1.0 || ~5.1.0 || ~5.1.0 || ~5.1.0 || ~5.1.0).
➤ YN0060: │ typescript is listed by your project with version 5.7.2 (pa421e), which doesn't satisfy what typia and other dependencies request (>=4.8.0 <5.7.0 || >=4.8.0 <5.7.0 || >=4.8.0 <5.7.0 || >=4.8.0 <5.7.0 || >=4.8.0 <5.7.0 || >=4.8.0 <5.7.0 || >=4.8.0 <5.7.0).
➤ YN0060: │ typescript is listed by your project with version 5.7.2 (pc93b7), which doesn't satisfy what typedoc and other dependencies request (~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.1.0 || ~5.1.0 || ~5.1.0 || ~5.1.0 || ~5.1.0 || ~5.1.0 || ~5.1.0).
➤ YN0060: │ vite is listed by your project with version 6.1.0 (pe722d), which doesn't satisfy what @vitejs/plugin-react requests (^4.2.0 || ^5.0.0).
➤ YN0002: │ @rocket.chat/eslint-config@workspace:packages/eslint-config doesn't provide typescript (p95e9c), requested by @typescript-eslint/eslint-plugin and other dependencies.
➤ YN0002: │ @rocket.chat/fuselage-ui-kit@workspace:packages/fuselage-ui-kit [15ac9] doesn't provide @rocket.chat/css-in-js (p06cfb), requested by @rocket.chat/ui-video-conf.
➤ YN0002: │ @rocket.chat/fuselage-ui-kit@workspace:packages/fuselage-ui-kit [15ac9] doesn't provide @testing-library/dom (pf39f4), requested by @testing-library/react and other dependencies
➤ YN0002: │ @rocket.chat/ui-voip@workspace:packages/ui-voip doesn't provide i18next (p61397), requested by react-i18next.
➤ YN0002: │ @rocket.chat/ui-voip@workspace:packages/ui-voip doesn't provide react-dom (p7140c), requested by @rocket.chat/fuselage and other dependencies.
➤ YN0002: │ @rocket.chat/ui-voip@workspace:packages/ui-voip doesn't provide react-virtuoso (p35845), requested by @rocket.chat/fuselage.
➤ YN0002: │ @rocket.chat/uikit-playground@workspace:apps/uikit-playground doesn't provide @rocket.chat/emitter (p96230), requested by @rocket.chat/ui-contexts.
➤ YN0002: │ @rocket.chat/uikit-playground@workspace:apps/uikit-playground doesn't provide @rocket.chat/i18n (paf171), requested by @rocket.chat/ui-contexts.
➤ YN0002: │ @rocket.chat/uikit-playground@workspace:apps/uikit-playground doesn't provide @rocket.chat/rest-typings (p31a26), requested by @rocket.chat/ui-contexts.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration [965c2] doesn't provide @testing-library/dom (pf276a), requested by @testing-library/react.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration [965c2] doesn't provide react-dom (pe969c), requested by @storybook/react and other dependencies.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration [965c2] doesn't provide webpack (p22b59), requested by babel-loader.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration doesn't provide @rocket.chat/core-typings (p42a80), requested by @rocket.chat/ui-contexts.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration doesn't provide @rocket.chat/fuselage (p9c76a), requested by @rocket.chat/layout.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration doesn't provide @testing-library/dom (p8f876), requested by @testing-library/react.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration doesn't provide i18next (p96b8f), requested by react-i18next.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration doesn't provide react-dom (p97a13), requested by @rocket.chat/layout and other dependencies.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration doesn't provide webpack (pd764a), requested by babel-loader.
➤ YN0002: │ rocket.chat@workspace:. doesn't provide @types/node (pa98d6), requested by ts-node.
➤ YN0086: │ Some peer dependencies are incorrectly met by your project; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
➤ YN0086: │ Some peer dependencies are incorrectly met by dependencies; run yarn explain peer-requirements for details.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 1s 889ms
➤ YN0000: ┌ Link step
➤ YN0007: │ @kaciras/deasync@npm:1.1.0 must be built because it never has been before or the last one failed
➤ YN0007: │ aws-sdk@npm:2.1691.0 must be built because it never has been before or the last one failed
➤ YN0007: │ bcrypt@npm:5.1.1 must be built because it never has been before or the last one failed
➤ YN0007: │ highlight.js@npm:9.18.5 must be built because it never has been before or the last one failed
➤ YN0007: │ isolated-vm@npm:5.0.1 must be built because it never has been before or the last one failed
➤ YN0007: │ sharp@npm:0.33.5 must be built because it never has been before or the last one failed
➤ YN0007: │ @matrix-org/matrix-sdk-crypto-nodejs@npm:0.2.0-beta.1 must be built because it never has been before or the last one failed
➤ YN0007: │ @napi-rs/pinyin@npm:1.7.0 must be built because it never has been before or the last one failed
➤ YN0007: │ gc-stats@npm:1.4.1 must be built because it never has been before or the last one failed
➤ YN0007: │ protobufjs@npm:7.4.0 must be built because it never has been before or the last one failed
➤ YN0007: │ esbuild@npm:0.24.0 must be built because it never has been before or the last one failed
➤ YN0007: │ es5-ext@npm:0.10.64 must be built because it never has been before or the last one failed
➤ YN0007: │ esbuild@npm:0.25.0 must be built because it never has been before or the last one failed
➤ YN0007: │ esbuild@npm:0.24.2 must be built because it never has been before or the last one failed
➤ YN0007: │ @swc/core@npm:1.9.2 [e975a] must be built because it never has been before or the last one failed
➤ YN0007: │ event-loop-stats@npm:1.4.1 must be built because it never has been before or the last one failed
➤ YN0007: │ core-js@npm:2.6.12 must be built because it never has been before or the last one failed
➤ YN0007: │ gifsicle@npm:5.3.0 must be built because it never has been before or the last one failed
➤ YN0007: │ mozjpeg@npm:7.1.1 must be built because it never has been before or the last one failed
➤ YN0007: │ optipng-bin@npm:7.0.1 must be built because it never has been before or the last one failed
➤ YN0007: │ pngquant-bin@npm:6.0.1 must be built because it never has been before or the last one failed
➤ YN0007: │ cwebp-bin@npm:7.0.1 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 1m 2s
➤ YN0000: · Done with warnings in 1m 6s

How to Pass props to createBrowserRouter, React-Router V7

I have read that createBrowserRouter should be outside React function, I could not find anyway/tutorial that show how to pass props to the components, should I use (useContext) in this case? Are there any other options?

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route index element={<Home articles={articles} />} />
      <Route path="About" element={<About />} />
    </Route>
  )
);

export function App() {
  const [articles, setArticles] = useState();

  return (
    <div>
      <RouterProvider router={router} />
    </div>
  );
}