Category: javascript

I have 3 list of images and they display well, the problem i have created a check box but some how my approach is not working as expected. By this I mean, current code to create a check box to select an image as per module is not clickable and nor allowing a user to select, inspected an element from the browser no JavaScript errors. I need help on this part, so that when under select column from the table, users can be able to select that specific module name with its image being displayed.

<style>
#input[type="checkbox"] {
  display: inline-block;
  visibility: visible;
}
</style>

<!---BOOK COURSES-->
        <div class="udb-sec udb-cour">
        <h4><img src="images/icon/db2.png" alt="" /> Booking Courses</h4>
        <p>The courses available for booking or registration by the student.</p>
        <form id="courseForm" action="register_course.php" method="POST">
            <div class="sdb-cours">
            <?php

        include 'db_connection.php'; // Include the database connection

// Check if the user is logged in
if (!isset($_SESSION['user_id'])) {
    header("Location: index.html");
    exit;
}

$user_id = $_SESSION['user_id']; // Get the user ID from the session

// Check if the connection is still valid
if (!$conn->ping()) {
    die("Database connection failed.");
}

// Query to fetch available courses for the logged-in user
$sql = "
SELECT ac.course_id, ac.course_name, ac.duration, ac.category, ac.image
FROM available_courses ac
LEFT JOIN student_modules sm ON ac.course_name = sm.module_name AND sm.student_id = ?
WHERE sm.student_id IS NULL";

// Prepare the SQL statement
$stmt = $conn->prepare($sql);
if (!$stmt) {
    die("Error preparing the query: " . $conn->error);
}

// Bind the parameters
$stmt->bind_param("i", $user_id); // Bind the user_id parameter

// Execute the statement
if (!$stmt->execute()) {
    die("Error executing the query: " . $stmt->error);
}

// Get the result
$result = $stmt->get_result();
if ($result === false) {
    die("Error fetching the result: " . $stmt->error);
}

// Check if courses exist for the logged-in user
if ($result->num_rows > 0) {
    echo '<table class="table table-striped">';
    echo '<thead class="table-dark">';
    echo '<tr>';
    echo '<th scope="col">Select</th>';
    echo '<th scope="col">Image</th>';
    echo '<th scope="col">Course Name</th>';
    echo '<th scope="col">Duration</th>';
    echo '<th scope="col">Category</th>';
    echo '</tr>';
    echo '</thead>';
    echo '<tbody>';
    while ($row = $result->fetch_assoc()) {
        // Ensure image path is web-accessible
        $imagePath = str_replace('C:/xampp/htdocs/', '/', htmlspecialchars($row['image']));

        echo '<tr>';
        echo '<td><input type="checkbox" name="course_ids[]" value="' . htmlspecialchars($row['course_id']) . '"></td>';
        echo '<td><img src="' . $imagePath . '" alt="Course Image" width="100"></td>';
        echo '<td class="module-name">' . htmlspecialchars($row['course_name']) . '</td>';
        echo '<td>' . htmlspecialchars($row['duration']) . '</td>';
        echo '<td>' . htmlspecialchars($row['category']) . '</td>';
        echo '</tr>';
    }
    echo '</tbody>';
    echo '</table>';
    } else {
    echo '<p>No courses available at the moment.</p>';
    }

// Close the statement and the connection
        $stmt->close();
        $conn->close();
        ?>

            </div>
            <button type="submit" id="registerButton" class="btn btn-primary" disabled>Register</button>
            
        </form>
    </div>
    <script>
document.addEventListener('DOMContentLoaded', function() {
    const courseForm = document.getElementById('courseForm');
    if (courseForm) {
        courseForm.addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('input[name="course_ids[]"]:checked');
            const registerButton = document.getElementById('registerButton');
            if (registerButton) {
                registerButton.disabled = checkboxes.length === 0;
            }
        });
    }
});
</script>

I can access to this link in the web browser. But when it comes to the console or my react code, it keeps failing.

I tried both fetch and axios and none was working. It just keeps giving me ERR_CONNECTION_RESET and TypeError: Failed to fetch.

Here is what I’ve tried:

await fetch('https://api.ipify.org/');

await fetch('https://api.ipify.org?format=json', {
    "Access-Control-Allow-Origin": "*"
})

await fetch('https://api.ipify.org?format=json', {
    referrerPolicy: 'no-referrer',
})

await fetch('https://api.ipify.org?format=json', { mode: 'no-cors' })

await axios.get('https://api.ipify.org?format=json');

What the right way to get ip?

I am working on an application where the user is allowed to scroll content and then after a delay I am disabling scroll.

The way I’m disabling scrolling is by adding this class.

html.noScroll,
body.noScroll {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;

However, iOS detects the user is scrolling down and is like cool, let’s give them more real estate. And then it realizes I removed scrolling so it’s like uh, oh, you need to be able to get out of this state, I should show you the URL bar. But then the URL bar is just a grey blob. The grey blob magically transforms into the page title/URL bar combo when you click on it, but until then it just looks like it’s a bug on the webpage.

There’s an absolute dearth of info about this online, seems like everyone wants the URL bar to disappear, but I want it to either stay or at least return completely when I disable scrolling.

I feel like I’ve tried everything.

The site already has this meta tag <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

I tried manually scrolling up 1-100 pixels before blocking the scroll.

I changed the way I block scroll according to various responses on SO.

Please, can someone help me get rid of this grey blob?! I’m 100% sure users will complain about it because it looks like it’s part of the webpage.

i am getting Cast to string failed for value error

see here the code to initalised that data

const initDB = async ()=>{
    await Listing.deleteMany({}) ;
    await Listing.insertMany(initData.data) ;
    console.log("Data is initalised") ;
};

initDB() ;

here is the listing schema

const listingSchema = new Schema({
  title: {
    type: String,
    required: true,
  },
  discription: String,
  image: {
    type: String,
    default:
      "https://plus.unsplash.com/premium_photo-1736880269895-84c3265dbfc3?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw2OXx8fGVufDB8fHx8fA%3D%3D",
    set: (v) =>
      v === ""
        ? "https://plus.unsplash.com/premium_photo-1736880269895-84c3265dbfc3?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw2OXx8fGVufDB8fHx8fA%3D%3D"
        : v,
  },
  price: Number,
  location: String,
  country: String,
});

import { useState, useEffect } from "react";
import { TodoProvider } from "./contexts/TodoContext";
import TodoForm from "./components/TodoForm";
import TodoItem from "./components/TodoItem";

function App() {
  const [todos, setTodos] = useState([]);

  const addTodo = (todo) => {
    setTodos((prev) => [{ id: Date.now(), ...todo }, ...prev]);
  };

  const updateTodo = (id, todo) => {
    setTodos((prev) =>
      prev.map((prevTodo) => (prevTodo.id === id ? todo : prevTodo))
    );
  };

  const deleteTodo = (id) => {
    setTodos((prev) => prev.filter((prevTodo) => prevTodo.id !== id));
  };

  const toggleComplete = (id) => {
    setTodos((prev) =>
      prev.map((prevtodo) =>
        prevtodo.id === id
          ? { ...prevtodo, completed: !prevtodo.completed }
          : prevtodo
      )
    );
  };

  useEffect(() => {
    const todosLocal = JSON.parse(localStorage.getItem("todos"));

    if (todosLocal && todosLocal.length > 0) {
      setTodos(todosLocal);
    }
  }, []);

  useEffect(() => {
    localStorage.setItem("todos", JSON.stringify("todos"));
  }, [todos]);

  return (
    <TodoProvider
      value={{ todos, addTodo, updateTodo, deleteTodo, toggleComplete }}
    >
      <h2 className="text-center text-3xl font-bold mt-1">Hello</h2>
      <div className="bg-[#172842] min-h-screen py-8">
        <div className="w-full max-w-2xl mx-auto shadow-md rounded-lg px-4 py-3 text-white">
          <h1 className="text-2xl font-bold text-center mb-8 mt-2">
            Manage Your Todos
          </h1>
          <div className="mb-4">
            {/* Todo form goes here */}
            <TodoForm />
          </div>
          <div className="flex flex-wrap gap-y-3">
            {todos.map((todo) => (
              <div key={todo.id} className="w-full">
                <TodoItem todo={todo} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </TodoProvider>
  );
}

export default App;

I’m getting error todos.map is not a function, only that line gives error if I remove the div of the mapping then the code works fine.
All the other functions and components works fine, then why is this not working.

Please someone explain this, todos is an array then why the mapping is not working here.

I’ve got the following codepen where I’m scrolling a container with overflow hidden. My left column has 3 links, and my right column has the container with 3 blocks of content that correspond to the links.

Here’s my codepen: https://codepen.io/mattmager/pen/WbemwmO

The scroll is doing what I want, but now I’d like the links on the left to ALSO be clickable to jump to the corresponding content sections on the right.

This is what I’m trying, but it doesn’t quite work because it’s moving the entire window as opposed to just the content with the container. Any ideas?:

const tabs = document.querySelectorAll('.workplace .transform-work-content .tab-link');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', (e) => {
    e.preventDefault();

    gsap.to(window, {
      scrollTo: sections[index],
      duration: 1,
      ease: "power2.inOut",
    });
  });
});

I’m encountering an issue in my React project where a button is being rendered twice, but only the bottom button works.

If anyone has any suggestions or has seen this before, I’d appreciate your help!

import React, { useState, useEffect, useRef } from 'react';

const PixelatedImage = ({ imageUrl }) => {
  const [pixelatedSections, setPixelatedSections] = useState([true, true, true, true]); // All sections pixelated initially
  const canvasRef = useRef(null);

  useEffect(() => {
    if (!imageUrl) return; // Wait for image to load

    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");
    const img = new Image();
    img.src = imageUrl;

    img.onload = () => {
      const width = img.width;
      const height = img.height;

      // Set canvas size to image size
      canvas.width = width;
      canvas.height = height;

      const pixelateSection = (left, top, sectionWidth, sectionHeight, pixelSize = 10) => {
        const offscreenCanvas = document.createElement("canvas");
        const offscreenContext = offscreenCanvas.getContext("2d");
        offscreenCanvas.width = sectionWidth;
        offscreenCanvas.height = sectionHeight;

        offscreenContext.drawImage(canvas, left, top, sectionWidth, sectionHeight, 0, 0, sectionWidth, sectionHeight);

        offscreenContext.imageSmoothingEnabled = false;
        offscreenContext.drawImage(offscreenCanvas, 0, 0, sectionWidth / pixelSize, sectionHeight / pixelSize);
        offscreenContext.drawImage(
          offscreenCanvas,
          0,
          0,
          sectionWidth / pixelSize,
          sectionHeight / pixelSize,
          0,
          0,
          sectionWidth,
          sectionHeight
        );

        context.drawImage(offscreenCanvas, left, top);
      };

      const unpixelateSection = (left, top, sectionWidth, sectionHeight) => {
        context.drawImage(img, left, top, sectionWidth, sectionHeight, left, top, sectionWidth, sectionHeight);
      };

      const drawCanvas = () => {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(img, 0, 0, width, height);

        if (pixelatedSections[0]) pixelateSection(0, 0, width / 2, height / 2);
        if (pixelatedSections[1]) pixelateSection(width / 2, 0, width / 2, height / 2);
        if (pixelatedSections[2]) pixelateSection(0, height / 2, width / 2, height / 2);
        if (pixelatedSections[3]) pixelateSection(width / 2, height / 2, width / 2, height / 2);
      };

      drawCanvas();
    };
  }, [imageUrl, pixelatedSections]); // Redraw whenever pixelatedSections changes

  const unpixelateNextSection = () => {
    const nextPixelatedSections = [...pixelatedSections];
    const nextIndex = nextPixelatedSections.indexOf(true);

    if (nextIndex !== -1) {
      nextPixelatedSections[nextIndex] = false; // Unpixelate the first pixelated section

      setPixelatedSections(nextPixelatedSections); // Update the state to trigger a re-render
    }
  };

  return (
    <div>
      <canvas ref={canvasRef}></canvas>
      {/* Handle button click with React's onClick */}
      <button onClick={unpixelateNextSection}>Unpixelate Next Section</button>
    </div>
  );
};

export default PixelatedImage;

I’ve been trying to fix it with no luck so far, and here’s what I’ve attempted:

Checked the component rendering logic to make sure it’s only rendering one button.
Used document.getElementById and manually added event listeners, but that caused the button to render twice.
Removed id and used React’s onClick event handler, but the problem still persists.

I’m using Nextjs version 14.2.4. I have a login page where once the user’s credentials are verified and function gets a response of success, a cookie is created using the user details from the response. The middleware file I’m running is checking (on all pages) for the cookie and either letting the user continue to the requested page or redirecting them to the login page. This all works fine locally, but in production, it seems like the middleware file is not running part of the time. To further explain, the user is let into the site, then after some navigation or even refreshing the home page, the user is redirected to the login page when it is clear that the required cookie is present. Any idea what could be causing this? Or ideas on how to troubleshoot this? I’m not seeing any errors on the network tab or otherwise and can see the cookie in the page request.

Very strange behavior. There are even times where it seems like all is working, but I’ll check again in an hour or so and I’m back to being redirected.

I’m using the app directory and I’m not sure that there are any work arounds that will not cause a flicker when the user navigates to the page.

Example directory

|-site
|--app
|---login
|----page.js
|---page.js
|--src
|--middleware.js

Example middleware file –

import { NextResponse } from "next/server";


export async function middleware(req) {
  const isAuthenticated = await req.cookies.has("auth");
  const url = req.nextUrl.pathname;
  
  if (url != "/login") {
    if (!isAuthenticated) {
      // Redirect to the login page
      console.log("User not authenticated!!!");
      return NextResponse.redirect("http://localhost:3000/login"); //of course this is pointing to the actual site
    }
    
  }
  return NextResponse.next();
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)'],
};

I’ve tried using an HOC instead of the middleware file. This works but of course I get a flicker. I’ve also rewritten my middleware file to use NextResponse.rewrite vs NextResponse.redirect, but that didn’t seem to fit my needs. At first, I had all of the pages in my matcher array, but then I switched to an empty array since this needs to run on all four pages of the site and that of course made no difference.

I am working on implementing a system to generate google docs and then export them using JavaScript using the Google API service. I have been able to make the docs, and make changes to them, but now I want to export them in bulk. Using the batch endpoint, I am able to make the request for multiple exports, but it always comes back with a redirect. I have not been able to find a way to follow this redirect to export the documents, but since I need to export many of these documents at once, I want to do this request in a batch.

I have tried a few variations of a batch request with different mimeTypes, and the only valid response I have been able to get is 302, redirected.

--batch_1
Content-Type: application/http
Content-Id: <export-{docId}>

GET /drive/v3/files/{docId}/export?mimeType=application/pdf

--batch_1
Content-Type: application/http
Content-Id: <export-{docId}>

GET /download/drive/v3/files/{docId}/export?mimeType=application/pdf

--batch_1

These are two variations that I thought had the best chance of success, but I only get 302 with the first request, and an error with the second.

If possible I would like to make the request in the batch, and get the data back, without making multiple requests to the endpoint. If this is not possible, is there an alternative to reduce API requests?

I have the following code for an array sourced from an external datasource

useEffect(() => {
const relatedDocumentCases = datasource;
setDocuments(
  Array.isArray(relatedDocumentCases)
    ? relatedDocumentCases.map(doc => ({
        key: doc.pzInsKey,
        name: doc.UploadedDocumentName,
        mimeType: doc.UploadedDocumentMimetype,
        attachKey: doc.UploadedDocumentLinkAttachKey,
        date: new Date(doc.UploadDate).toLocaleString('en-US', {
          year: 'numeric',
          month: 'numeric',
          day: 'numeric',
          hour: 'numeric',
          minute: '2-digit',
          hour12: true
        }),
        status: doc.pyStatusWork
      }))
    : []
);

}, [value]);

For reuse, we’d like to make ‘pzInsKey’, ‘UploadedDocumentName’, etc (basically everything in doc) populated from a const string. This is because case-by-case different properties will be called. But is that possible? Every time I try to combine doc + string the parameter becomes a string and won’t source from the array.

Ok, So I have a script in .js for rpg maker. I am trying to move the actor to target – attack animation – return to original position.
However, the best I have had is Attack – Dash to target – dash back.

I cannot seem to overwrite the attack animation with the dash forward first.

I have tried different approaches such as asynchronous, waits etc, but no matter what, it is always attack – dash – dash back.
Even though the debug logs say it is happening in the correct order which is weird. Its almost as if the script is correct, but rmmz cores are overwriting certain things on its own.
It is sideview and Time Progress (Active) if that matters.

/*:
 * @target MZ
 * @plugindesc Moves actor close to enemy when attacking, then attacks. (No return movement yet)
 * @ScarredInteractive
 * @help
 * This plugin modifies attack behavior so that:
 *  1. The actor moves directly to the enemy.
 *  2. The actor stops before attacking.
 *  3. The attack animation plays at the correct time.
 *
 * Debugging logs will appear in the console (F12 in playtest).
 */

(() => {
    const _Game_Battler_performActionStart = Game_Battler.prototype.performActionStart;
    const _Game_Battler_performActionEnd = Game_Battler.prototype.performActionEnd;
    const _Game_Action_apply = Game_Action.prototype.apply;

    // **Intercept step-forward behavior**
    Game_Battler.prototype.performActionStart = function (action) {
        if (this.isActor() && action?.isAttack()) {
            console.log("Blocking default step-forward before attack.");
            return; // Prevent RPG Maker from stepping forward automatically
        }
        _Game_Battler_performActionStart.call(this, action);
    };

    // **Intercept attack execution and force movement first**
    Game_Action.prototype.apply = function (target) {
        const subject = this.subject();
        if (subject.isActor() && target.isEnemy()) {
            console.log(`--- ATTACK SEQUENCE INITIATED ---`);

            // **Stop default attack animation from playing too soon**
            subject._delayedAttack = this; // Store the attack for later execution
            subject.requestMotion("wait");

            moveToEnemy(subject, target, () => {
                console.log(`Actor reached enemy. Now attacking...`);

                // **Now we manually trigger the stored attack**
                executeDelayedAttack(subject, target);
            });

        } else {
            _Game_Action_apply.call(this, target);
        }
    };

    // **Override step-back behavior**
    Game_Battler.prototype.performActionEnd = function () {
        if (this.isActor()) {
            console.log("Blocking default step-back after attack.");
            return; // Prevent RPG Maker's auto return movement
        }
        _Game_Battler_performActionEnd.call(this);
    };

    function moveToEnemy(actor, enemy, callback) {
        const spriteActor = SceneManager._scene._spriteset.findActorSprite(actor);
        const spriteEnemy = SceneManager._scene._spriteset.findEnemySprite(enemy);

        if (spriteActor && spriteEnemy) {
            console.log(`Actor Original Position: x=${spriteActor.x}, y=${spriteActor.y}`);
            console.log(`Enemy Position: x=${spriteEnemy.x}, y=${spriteEnemy.y}`);

            actor._originalX = spriteActor.x;
            actor._originalY = spriteActor.y;

            const targetX = spriteEnemy.x - 40;
            const targetY = spriteEnemy.y;

            console.log(`Moving to target: x=${targetX}, y=${targetY}`);

            spriteActor.startMove(targetX - spriteActor.x, targetY - spriteActor.y, 10);

            const movementChecker = setInterval(() => {
                if (Math.abs(spriteActor.x - targetX) < 2 && Math.abs(spriteActor.y - targetY) < 2) {
                    clearInterval(movementChecker);
                    console.log("Movement to enemy completed!");
                    if (callback) callback();
                }
            }, 50);
        } else {
            console.error("Could not find actor or enemy sprite!");
        }
    }

    function executeDelayedAttack(actor, target) {
        if (actor._delayedAttack) {
            console.log(`Executing stored attack!`);

            actor.requestMotion("attack");

            setTimeout(() => {
                _Game_Action_apply.call(actor._delayedAttack, target);
                console.log(`Attack logic applied!`);

                waitForAttackAnimation(actor, () => {
                    console.log("Attack animation finished. Moving back...");
                    returnToStart(actor);
                });

                actor._delayedAttack = null; // Clear stored attack

            }, 200); // Smooth delay before applying attack
        }
    }

    function returnToStart(actor) {
        const spriteActor = SceneManager._scene._spriteset.findActorSprite(actor);
        if (spriteActor) {
            console.log(`Returning Actor to Original Position: x=${actor._originalX}, y=${actor._originalY}`);
            spriteActor.startMove(actor._originalX - spriteActor.x, actor._originalY - spriteActor.y, 10);

            const returnChecker = setInterval(() => {
                if (Math.abs(spriteActor.x - actor._originalX) < 2 && Math.abs(spriteActor.y - actor._originalY) < 2) {
                    clearInterval(returnChecker);
                    console.log("Actor fully returned to original position.");
                    actor.requestMotion("wait");
                }
            }, 50);
        }
    }

    function waitForAttackAnimation(actor, callback) {
        const spriteActor = SceneManager._scene._spriteset.findActorSprite(actor);

        if (spriteActor) {
            console.log("Waiting for attack animation to finish...");
            const animationDuration = 30; // Approximate time for an attack animation (adjust as needed)

            setTimeout(() => {
                console.log("Attack animation completed.");
                callback();
            }, animationDuration * 16); // 16ms per frame
        } else {
            console.error("Could not find actor sprite for attack animation timing!");
            callback();
        }
    }

    Spriteset_Battle.prototype.findActorSprite = function (actor) {
        return this._actorSprites.find(sprite => sprite._battler === actor);
    };

    Spriteset_Battle.prototype.findEnemySprite = function (enemy) {
        return this._enemySprites.find(sprite => sprite._battler === enemy);
    };

})();

Here are the logs indicating its in absolute perfect order, but gameplay is not…

— ATTACK SEQUENCE INITIATED —

MoveBattle.js:64 Actor Original Position: x=664, y=376

MoveBattle.js:65 Enemy Position: x=302, y=270

MoveBattle.js:73 Moving to target: x=262, y=270

MoveBattle.js:80 Movement to enemy completed!

MoveBattle.js:39 Actor reached enemy. Now attacking…

MoveBattle.js:91 Executing stored attack!

MoveBattle.js:97 Attack logic applied!

MoveBattle.js:130 Waiting for attack animation to finish…

MoveBattle.js:134 Attack animation completed.

MoveBattle.js:100 Attack animation finished. Moving back…

MoveBattle.js:113 Returning Actor to Original Position: x=664, y=376

MoveBattle.js:119 Actor fully returned to original position.

MoveBattle.js:53 Blocking default step-back after attack.

I’m working on a Chrome extension that takes screenshots of websites. The process involves opening a URL in a new tab and capturing a screenshot. However, many websites have pop-ups (e.g., offers, intake forms, modals) that interfere with the screenshot.

I want to remove this pop ups before taking the screenshots. Currently, I’m using a strategy that checks for elements with a highest z-index greater than 500 and hides them via JavaScript. This works in most cases, but some pop-ups still remain visible.

I’m looking for a more robust approach to reliably remove pop-ups or modal dialogs before taking screenshots. How can I improve my solution, or are there any better ways to detect and remove pop-ups programmatically? Would using specific CSS selectors, or other strategies, be more effective?

I follow the indications in:

https://mmf-fe.github.io/svgicon/guide/#vue-3-x

I just change arrow.svg (I do not know at witch file the documentation refers):

Also I created the project with:

npm create vuetify@latest

this is my Login.vue

<script setup lang="ts">
//import arrowData from "./arrow.svg"
</script>
<template>
    <div>
  <!--      <icon :data="arrowData" /> -->
        <!-- It is recommended to configure transformAssetUrls，. You can directly pass in the svg file path. -->
        <icon data="./arrow.svg" width="190" height="190" />
    </div>
</template>

this is my main.js:

/**
 * main.js
 *
 * Bootstraps Vuetify and other plugins then mounts the App`
 */


import { VueSvgIconPlugin } from '@yzfe/vue-svgicon'
import '@yzfe/svgicon/lib/svgicon.css'

// Plugins
import { registerPlugins } from '@/plugins'

// Components
import App from './App.vue'

// Composables
import { createApp } from 'vue'

const app = createApp(App)

registerPlugins(app)

app.mount('#app')

app.use(VueSvgIconPlugin, {tagName: 'icon'})

this is my arrow.svg:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<style type="text/css">
    .st0{display:none;fill:#191919;}
    .st1{display:none;fill-rule:evenodd;clip-rule:evenodd;fill:#191919;}
    .st2{display:none;}
    .st3{display:inline;fill-rule:evenodd;clip-rule:evenodd;fill:#191919;}
    .st4{display:inline;fill:#191919;}
    .st5{fill:#191919;}
</style>
<g id="row3">
    <path id="nav:5_3_" class="st0" d="M17.7,59.6c0,7.2,5.9,13,13.3,13c5.5,0,10.2-3.3,12.2-7.9l40.5,8.1c0,3.6,1.5,6.8,3.9,9.1
        l-13.9,21.6c-1.9-1-4.1-1.6-6.4-1.6c-7.3,0-13.3,5.8-13.3,13c0,7.2,5.9,13,13.3,13s13.3-5.9,13.3-13c0-2.9-0.9-5.5-2.5-7.7
        l14.4-22.3c1.4,0.5,2.9,0.8,4.5,0.8c7.3,0,13.3-5.8,13.3-13s-5.9-13-13.3-13c-5.4,0-10,3.2-12.1,7.7l-40.7-8.1
        c-0.1-4.1-2.1-7.7-5.2-10l10.1-23.5c1,0.2,2,0.4,3.1,0.4c7.3,0,13.3-5.8,13.3-13S59.5,0,52.2,0c-7.3,0-13.3,5.8-13.3,13
        c0,4.2,2,7.9,5.1,10.3L33.8,46.9c-0.9-0.2-1.9-0.3-2.8-0.3C23.7,46.6,17.7,52.4,17.7,59.6z M45.5,13c0-3.6,3-6.5,6.6-6.5
        c3.7,0,6.6,2.9,6.6,6.5s-3,6.5-6.6,6.5C48.5,19.6,45.5,16.6,45.5,13z M90.4,72.7c0-3.6,3-6.5,6.6-6.5c3.7,0,6.6,2.9,6.6,6.5
        s-3,6.5-6.6,6.5C93.3,79.2,90.4,76.3,90.4,72.7z M67.3,108.4c3.7,0,6.6,2.9,6.6,6.5c0,3.6-3,6.5-6.6,6.5c-3.7,0-6.6-2.9-6.6-6.5
        C60.7,111.3,63.7,108.4,67.3,108.4z M24.4,59.6c0-3.6,3-6.5,6.6-6.5c3.7,0,6.6,2.9,6.6,6.5c0,3.6-3,6.5-6.6,6.5
        C27.3,66.2,24.4,63.2,24.4,59.6z"/>
    <path id="nav:4_2_" class="st0" d="M68.6,46.6H58.3l-2.6,15.5h15.5L68.6,46.6z M110,66.5c-9.9,0-18,7.9-18,17.7
        c0,9.8,8,17.7,18,17.7c9.9,0,18-7.9,18-17.7C128,74.4,120,66.5,110,66.5z M110,89.2l-7.6,4.5l7.6-20.9l7.6,20.9L110,89.2z
         M108.2,61.6c-1.7,0.1-3.3,0.4-4.8,0.9L92.1,30.8H67.4l1.7,10H57.8l1.7-10H38.6L8.3,90.4h44l3.4-20.3h15.6l3.4,20.3H88
        c0.5,1.6,1.1,3.2,1.9,4.6H0l36-68.8h58.9L108.2,61.6z"/>
    <path id="nav:3_4_" class="st1" d="M128,64L90.3,50.3l10.5-22.5L77.9,38.1L64,1L50,38.1L27.2,27.8l10.5,22.5L0,64l37.7,13.7
        l-10.5,22.5L50,89.9L64,127l14-37.1l22.8,10.3L90.3,77.7L128,64z M11,64.2l29.1-8.7l5.7-1.7l15.1,10.4H11z M64,115.5l-8.7-28
        l-1.9-6.2L64,66.5V115.5z M64,12.5l8.7,28l1.9,6.2L64,61.6V12.5z M82.2,74.3L67.2,63.9H117l-29.1,8.7L82.2,74.3z"/>
    <path id="nav:2_1_" class="st1" d="M110.5,12.7c-9.7,0-17.5,7.7-17.5,17.1c0,4.2,5.2,13.1,5.2,13.1l8.8,14.5
        c-13.2,0.8-33.4,7.5-34,28.9c-0.1,4.9-2,8.9-5.7,12.3c-10.5,9.7-32.5,10.9-40.6,11l12.5-21.8c0,0,8-12.1,8-17.7
        c0-12.8-10.6-23.2-23.7-23.2C10.6,46.9,0,57.3,0,70.1c0,5.7,7.1,17.7,7.1,17.7L23.6,115l0,0.3c0.2,0,1,0,2.4,0
        c7.9,0,32.8-1,45.3-12.5c4.8-4.4,7.3-9.9,7.5-16.3c0.6-23.2,29.1-23.6,31.7-23.5h0.1l0.1-0.1l11.5-20c0,0,5.9-8.9,5.9-13.1
        C128,20.4,120.2,12.7,110.5,12.7z M23.7,82c-7.7,0-14-6.1-14-13.6c0-7.5,6.3-13.7,14-13.7c7.7,0,14,6.1,14,13.7
        C37.7,75.9,31.4,82,23.7,82z M110.5,38.6c-5.7,0-10.3-4.5-10.3-10.1c0-5.6,4.6-10.1,10.3-10.1c5.7,0,10.3,4.5,10.3,10.1
        C120.8,34.1,116.2,38.6,110.5,38.6z"/>
    <path id="nav:1_3_" class="st0" d="M0,86.7c0.6,10.1,4.7,20,12.6,27.8c7.9,7.8,17.9,11.8,28.2,12.4l-0.5-5
        c-8.9-0.4-17.8-3.8-24.6-10.5C9,104.7,5.5,96,5.1,87.3L0,86.7z M11.8,86.2c0.1,7.5,2.9,14.8,8.8,20.5c5.7,5.6,13.2,8.5,20.7,8.7
        l-0.9-4.9c-6,0-12.1-2.2-16.7-6.8c-4.7-4.6-7-10.8-6.9-16.8L11.8,86.2z M23.6,86.5c-0.2,4.5,1.4,9,4.8,12.4c3.5,3.5,8.2,5,12.8,4.7
        l-1.7-4.8c-2.9,0.2-5.8-0.8-8-2.9c-2.4-2.4-4.1-5.1-3.6-8.2L23.6,86.5z M126.1,87.6l-26.5-26l6.7-6.6l-6.3-6.2l3.9-3.8L83.8,25.1
        l-3.9,3.8l-6.7-6.6l-6.7,6.6L40,2.9c-2.4-2.4-6.6-2.4-9,0L7.9,25.6c-2.5,2.4-2.5,6.4,0,8.9l26.5,26l-5.1,5c-1.7,1.7-1.7,4.3,0,5.9
        l8.8,8.7l-6.6,6.4l9.5,9.4l6.5-6.5l8.8,8.7c1.7,1.6,4.3,1.6,6,0l5.1-5l26.5,26c1.2,1.2,2.8,1.8,4.5,1.8c1.7,0,3.3-0.6,4.5-1.8
        l23.1-22.7c1.2-1.2,1.9-2.8,1.9-4.4C128,90.4,127.3,88.8,126.1,87.6z M37.4,57.6l-26.5-26c-0.8-0.8-0.8-2.1,0-2.9l2.7-2.6
        l27.9,27.5L37.4,57.6z M43.1,52L15.1,24.5l3.9-3.8L47,48.1L43.1,52z M48.5,46.6L20.5,19.2l3.9-3.8l27.9,27.5L48.5,46.6z M53.9,41.3
        L26,13.8l3.9-3.8l27.9,27.5L53.9,41.3z M59.3,36L31.4,8.5L34,5.9c0.4-0.4,0.9-0.6,1.5-0.6c0.6,0,1.1,0.2,1.5,0.6l26.5,26L59.3,36z
         M100,116.2c-0.8,0.8-2.2,0.8-3,0l-26.5-26l4.2-4.1l28,27.5L100,116.2z M104.2,112.1l-28-27.5l3.9-3.8l28,27.5L104.2,112.1z
         M109.6,106.8l-28-27.5l3.9-3.8l28,27.5L109.6,106.8z M115.1,101.5L87.1,74l3.9-3.8l28,27.5L115.1,101.5z M123.1,93.5l-2.7,2.6
        l-28-27.5l4.2-4.1l26.5,26c0.4,0.4,0.6,0.9,0.6,1.5C123.8,92.6,123.5,93.1,123.1,93.5z"/>
</g>
<g id="row2">
    <polygon id="nav:5_2_" class="st0" points="103.1,78 103.1,65.4 69.6,65.4 69.6,127.1 58,127.1 58,65.4 24.9,65.4 24.9,78 0,60.7 
        24.9,43.4 24.9,56 58,56 58,25.4 46.6,25.4 64.2,0.9 81.8,25.4 69.6,25.4 69.6,56 103.1,56 103.1,43.4 128,60.7     "/>
    <path id="nav:4_1_" class="st1" d="M36.1,55.8L75.9,76c4.9,2.5,6.8,8.4,4.3,13.2c-2.5,4.8-8.5,6.7-13.4,4.2L26.9,73.2
        c-4.9-2.5-6.8-8.4-4.3-13.2S31.2,53.3,36.1,55.8z M37.9,84.3l13.3,6.8L23.9,127L37.9,84.3z M68.2,2l33.7,17.1
        c4.1,2.1,5.8,7.1,3.6,11.2c-2.1,4.1-7.2,5.7-11.4,3.6L60.5,16.7c-4.1-2.1-5.8-7.1-3.6-11.2C59,1.5,64.1-0.1,68.2,2z M76.1,71.1
        c2.3-6.8,5.4-14,9.2-21.1c2.1-4,4.3-7.8,6.6-11.4L57.9,21.3c-1.7,3.9-3.5,7.9-5.6,11.9c-3.8,7.2-7.9,13.8-12.2,19.6L76.1,71.1z"/>
    <path id="nav:3_2_" class="st1" d="M64,0C28.2,0,0,27.8,0,63c0,35.2,28.2,62.9,64,62.9c9.3,0,18-1.9,25.9-5.3l-3-4.9
        c-2.2,0.8-4.4,1.5-6.7,2.1c1.5-2,2.9-4.1,4.2-6.2l-3.2-5.2c0,0,0,0,0,0c-2.5,4.8-5.4,9.3-8.5,13.4c-2.1,0.4-3.9,0.5-5.8,0.5V92.4
        c2.6,0.2,5.3,0.5,8,1c-0.8-2.1-1.5-4.1-1.9-6c-2.1-0.4-4.1-0.6-6.1-0.7V65.7h13.5c2.1-2.2,4.6-4.1,7.4-5.6H66.8V39.3
        c6.4-0.4,13.7-2.2,20.9-5.2c3.1,8,5.1,15.9,5.7,23.8c1.8-0.5,3.6-0.8,5.5-1c-0.7-7.3-2.9-16-6.2-24.7c5.6-2.4,10.7-5,14.7-7.8
        c8.6,9.4,13.9,21.9,14.5,35.7h-7c5.4,2.8,9.7,7.3,12.3,12.7c0.5-3.2,0.8-6.5,0.8-9.9C128,27.8,99.8,0,64,0z M47.8,8
        c-4.1,5.6-7.9,12.4-10.7,19.4c-4.9-2-9.2-4.4-12.6-6.8C31.1,14.6,39,10.2,47.8,8z M20.5,24.5c4,2.8,9.1,5.4,14.7,7.8
        c-3.8,10-6,20-6.4,27.9H6C6.6,46.3,11.9,33.9,20.5,24.5z M6,65.7h22.8c0.2,7.8,2.4,18,6.4,28c-5.6,2.4-10.7,5-14.7,7.8
        C11.9,92,6.6,79.6,6,65.7z M24.5,105.4c3.6-2.6,7.9-5,12.8-7c2.6,7,6.2,13.7,10.5,19.4C39,115.7,31.1,111.3,24.5,105.4z
         M61.2,120.2c-1.9,0-3.8-0.2-5.8-0.5c-5.3-6.9-9.8-15-13.2-23.3c6.4-2.2,13-3.5,19-3.9V120.2z M61.2,86.7
        c-6.4,0.4-13.7,2.2-20.9,5.2c-3.4-8.9-5.5-17.8-5.8-26.1h26.7V86.7z M61.2,60.2H34.4c0.4-8.7,2.4-17.4,5.8-26.1
        c7.2,2.9,14.5,4.8,20.9,5.2V60.2z M61.2,33.5c-6.2-0.4-13-1.9-19.2-4.1c3.6-8.5,8.3-16.3,13.4-23.1c2.1-0.4,3.9-0.5,5.8-0.5V33.5z
         M66.8,33.5V5.8c1.9,0,3.8,0.2,5.8,0.5c5.1,6.8,9.8,14.6,13.4,23.1C79.8,31.7,73,33.2,66.8,33.5z M90.9,27.4
        c-2.8-7-6.6-13.9-10.7-19.4c8.8,2.2,16.8,6.7,23.3,12.6C100.1,23,95.8,25.4,90.9,27.4z M121.2,77c-2-4.1-5.3-7.5-9.4-9.7
        c-3.1-1.6-6.7-2.6-10.4-2.6c-0.6,0-1.2,0-1.8,0.1c-1.5,0.1-2.9,0.4-4.2,0.8c-1.5,0.4-3,1-4.4,1.7c-2.1,1.1-4,2.6-5.6,4.3
        c-3.7,3.8-5.9,9-5.9,14.7c0,0.6,0.1,1.2,0.2,1.9c0.3,1.4,0.8,3,1.4,4.6c1.9,4.7,4.6,9.5,4.9,9.9c0,0,0,0,0,0l2.4,4l1.9,3.2l2.3,3.8
        l8.7,14.3l14.6-25.3c0,0,7.4-11.2,7.4-16.4C123.3,83,122.5,79.8,121.2,77z M114.2,85.9c-0.3,3.4-1.9,6.3-4.4,8.4
        c-1.8,1.5-4.1,2.6-6.6,2.9c-0.6,0.1-1.3,0.2-1.9,0.2c-4.6,0-8.7-2.4-11-5.9c-1.3-1.9-2-4.2-2-6.7c0-4.8,2.8-9,6.9-11.2
        c1.4-0.7,2.8-1.2,4.4-1.4c0.5-0.1,1.1-0.1,1.6-0.1c7.2,0,12.9,5.7,12.9,12.6C114.3,85.1,114.2,85.5,114.2,85.9z"/>
    <path id="nav:2" class="st0" d="M76.8,32H17.6c-1.8,0-3.3,1.5-3.3,3.2v89.6c0,1.8,1.5,3.2,3.3,3.2h59.2c1.8,0,3.3-1.5,3.3-3.2V35.2
        C80.1,33.4,78.6,32,76.8,32z M47.2,125.9c-3.1,0-5.6-2.5-5.6-5.5c0-3.1,2.5-5.5,5.6-5.5c3.1,0,5.6,2.5,5.6,5.5
        C52.8,123.4,50.3,125.9,47.2,125.9z M73.3,110.3c0,0.9-0.7,1.6-1.6,1.6H22.7c-0.9,0-1.6-0.7-1.6-1.6V40.2c0-0.9,0.7-1.6,1.6-1.6
        h48.9c0.9,0,1.6,0.7,1.6,1.6V110.3z M113.7,38.8c-0.6-9.8-4.6-19.3-12.2-26.8C93.9,4.5,84.2,0.6,74.3,0l0.5,4.8
        c8.6,0.4,17.2,3.7,23.7,10.1c6.5,6.4,9.9,14.9,10.3,23.3L113.7,38.8z M102.3,39.3c-0.1-7.2-2.8-14.3-8.4-19.8
        c-5.5-5.4-12.7-8.2-20-8.4l0.9,4.7c5.8,0,11.7,2.2,16.2,6.5c4.5,4.5,6.7,10.4,6.6,16.2L102.3,39.3z M90.9,39
        c0.2-4.3-1.3-8.7-4.7-12c-3.4-3.3-7.9-4.9-12.4-4.6l1.6,4.7c2.8-0.2,5.6,0.7,7.8,2.8c2.3,2.3,3.9,4.9,3.4,7.9L90.9,39z M47.2,61.7
        c-9.2,0-16.7,7.4-16.7,16.5c0,9.1,7.5,16.5,16.7,16.5c9.3,0,16.8-7.4,16.8-16.5C64,69.1,56.5,61.7,47.2,61.7z M47.2,82.9l-7.1,4.2
        l7.1-19.5l7.1,19.5L47.2,82.9z"/>
    <path id="nav:1" class="st1" d="M33.1,31.3C33.1,14.6,47.2,1,64.2,1c17,0,30.7,13.5,30.7,30.2c0,14.4-10.2,26.4-23.8,29.4L63.8,127
        l-7.3-66.4C43.2,57.1,33.1,45.4,33.1,31.3z M63.8,23.2c0-4.6-3.8-8.2-8.4-8.2S47,18.6,47,23.2s3.8,8.2,8.4,8.2S63.8,27.7,63.8,23.2
        z"/>
</g>
<g id="row1">
    <path id="nav:5_1_" class="st0" d="M49.7,1h23.7v14H49.7V1z M49.7,47.7h23.7V57H49.7V47.7z M49.7,89.6h23.7V127H49.7V89.6z
         M30.8,19.7h75.9V43H30.8L18.4,31.4L30.8,19.7z M21.3,61.7h75.9l12.4,11.7L97.1,85H21.3V61.7z"/>
    <path id="nav:4" class="st1" d="M64,1C38.8,1,18.3,21.2,18.3,46S64,127,64,127s45.7-56.2,45.7-81S89.2,1,64,1z M64,74.9
        c-16.6,0-30-13.2-30-29.5C34,29,47.4,15.8,64,15.8c16.6,0,30,13.2,30,29.5C94,61.6,80.6,74.9,64,74.9z"/>
    <g id="nav:3_3_" class="st2">
        <ellipse class="st3" cx="16.7" cy="81.5" rx="4.6" ry="4.6"/>
        <ellipse class="st3" cx="113.7" cy="49.4" rx="4.6" ry="4.6"/>
        <path class="st4" d="M82.9,76.4c-1.6,0-3.1-0.2-4.5-0.6l1-3.5c1.4,0.4,3.2,0.5,4.8,0.4l0.3,3.6C84,76.4,83.5,76.4,82.9,76.4z
             M90.5,74.6l-1.8-3.2c1.3-0.7,2.4-1.7,3.4-3.1l3,2.1C93.8,72.3,92.3,73.6,90.5,74.6z M20.3,74l-3.6-1c0.5-1.8,1.1-3.6,1.7-5.3
            l3.5,1.3C21.3,70.5,20.8,72.2,20.3,74z M72.9,72.8c-1.3-1.2-2.6-2.7-3.8-4.6l3.1-2c1.1,1.6,2.1,2.9,3.2,3.8L72.9,72.8z M98,65.4
            l-3.4-1.5c0.3-0.7,0.7-1.5,1-2.2c0.4-0.9,0.8-1.9,1.3-2.8l3.3,1.6c-0.4,0.9-0.8,1.8-1.2,2.7C98.7,63.9,98.4,64.6,98,65.4z
             M24,64.1l-3.3-1.6c0.9-1.8,1.8-3.4,2.8-5l3.1,1.9C25.6,60.9,24.8,62.4,24,64.1z M66.3,63.4l-0.4-0.7c-0.7-1.3-1.5-2.7-2.3-4
            l3.2-1.8c0.8,1.4,1.6,2.8,2.3,4.2l0.4,0.7L66.3,63.4z M102.9,56.1l-3-2.2c1.4-1.8,2.9-3.1,4.6-4.1l1.8,3.2
            C105.1,53.7,103.9,54.7,102.9,56.1z M29.7,55.4l-2.8-2.4c1.3-1.5,2.8-2.8,4.3-4l2.2,2.9C32.1,52.9,30.8,54,29.7,55.4z M60.7,54.4
            c-1.1-1.4-2.3-2.5-3.6-3.4l2.2-3c1.6,1.1,3,2.4,4.3,4.1L60.7,54.4z M37.8,49.4L36.3,46c1.8-0.8,3.8-1.3,5.8-1.6l0.5,3.6
            C40.9,48.3,39.3,48.7,37.8,49.4z M52.7,48.8c-1.5-0.5-3.2-0.8-5-0.9l0.3-3.6c2.1,0.2,4.1,0.5,5.8,1.1L52.7,48.8z"/>
        <path id="nav:3_1_" class="st4" d="M94.8,14.3L64.1,26.8L33.2,14.3L0,27.8v85.1l33.2-13.4l30.4,12.3l31.2-11.5l33.2,13.6V27.9
            L94.8,14.3z M122.4,105.5L97.6,95.3V70.1c-1.4,2.2-3.1,4.3-5.6,5.8v19.3l-25.6,9.4V67.4c-0.8-1.3-1.4-2.5-2.1-3.8
            c-1.1-2.1-2.2-4.1-3.4-5.9v47L36,94.6V52.4c-2.1,1.3-4,3-5.6,4.9v37.3L5.6,104.7V31.4l24.9-10.1v25.9C32.2,46,34,45,36,44.2V21.4
            l24.9,10.1V47c2.2,1.7,4,3.7,5.6,5.8v-21L92,21.4V65c0.6-1.2,1.3-2.5,1.9-4c1-2.2,2.1-4.6,3.6-6.9V21.4l24.9,10.2V105.5z"/>
    </g>
    <path id="nav:2_3_" class="st5" d="M64,1L17.9,127L64,99.8l46.1,27.2L64,1z M64,21.4l32.6,89.2L64,91.3V21.4z"/>
    <path id="nav:1_2_" class="st0" d="M64,127C28.7,127,0,98.7,0,64S28.7,1,64,1s64,28.2,64,63S99.3,127,64,127z M64,10.2
        C33.8,10.2,9.3,34.3,9.3,64s24.5,53.8,54.7,53.8s54.7-24.1,54.7-53.8S94.2,10.2,64,10.2z M52.8,53L29.9,97.5L75.2,75l22.9-44.5
        L52.8,53z M64,69.5c-3.1,0-5.6-2.4-5.6-5.5c0-3,2.5-5.5,5.6-5.5s5.6,2.4,5.6,5.5C69.6,67,67.1,69.5,64,69.5z"/>
</g>
</svg>

But when I’m going to see the icon i see:

I’m aspect to see an icon or an error but I cannot see neither an error no an icon

And also If I’m going to change Login.vue in this way:

<script setup lang="ts">
import arrowData from "./arrow.svg"
</script>
<template>
    <div>
  <      <icon :data="arrowData" /> 
        <!-- It is recommended to configure transformAssetUrls，. You can directly pass in the svg file path. 
        <icon data="./arrow.svg" width="190" height="190" /> -->
    </div>
</template>

At compilation time I get:

C:UsersvisCorso_vueprova3mybadge>npm run dev

> [email protected] dev
> vite


  VITE v5.4.14  ready in 518 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
21:53:31 [vite] hmr update /src/views/session/Login.vue
21:53:31 [vite] Internal server error: Failed to resolve import "./arrow.svg" from "src/views/session/Login.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: C:/Users/vis/Corso_vue/prova3/mybadge/src/views/session/Login.vue:2:22
  1  |  /* unplugin-vue-components disabled */import { defineComponent as _defineComponent } from "vue";
  2  |  import arrowData from "./arrow.svg";
     |                         ^
  3  |  const _sfc_main = /* @__PURE__ */ _defineComponent({
  4  |    __name: "Login",
      at TransformPluginContext._formatError (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:49257:41)        
      at TransformPluginContext.error (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:49252:16)
      at normalizeUrl (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:64199:23)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:64331:39
      at async Promise.all (index 1)
      at async TransformPluginContext.transform (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:64258:7)      
      at async PluginContainer.transform (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:49098:18)
      at async loadAndTransform (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:51931:27)
      at async viteTransformMiddleware (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:62031:24)

I know there are two issue in one question, but I’ve spend all the day trying to solve the issue, but no hope at all.

I’m trying to create a timer in THREE.js. All the libraries are installed through NPM and the seem to be correctly installed, I’ve created a scene and loaded an object with a GLTFLoader. Orbit controls also all seem to be working correctly. Other modules are importing correctly eg:

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

But when I enter:
import { Timer } from 'three/addons/misc/Timer.js';
I get the error `Unable to resolve the path to module ‘three/addons/misc/Timer.js’. I’ve tried looking in the node_moduls folder, in the three folder. But I can’t even find the addons folder. So I’m a bit confused. Can anyone tell me what I’m doing wrong?

We have a flow in our app where we allow someone to be speaking (microphone) to a bot and the bot is talking back via audio.

It works fine when there is only one device, but if the user wants to use airpods we are having problems. On iOS (Safari, and Chrome) when using wired/Bluetooth headphones that include a microphone here is what we experience:

1. Before recording: Audio playback works correctly through headphones.
2. After recording + permissions being granted the audio output switches to the device speakers, even though the headphones are still connected.

I created a very simple page to reproduce the issue. I did find a bug that says it’s been fixed but its clearly no https://bugs.webkit.org/show_bug.cgi?id=196539

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Microphone Recorder</title>
</head>
<body>
    <h1>Microphone Recorder</h1>
    <button id="startBtn">Start Recording</button>
    <button id="stopBtn" disabled>Stop Recording</button>
       <audio id="audioPlayback" controls src="https://cdn.jsdelivr.net/npm/[email protected]/media/Justice_Genesis_16bit_trim_mono_y6iHYTjEyKU.wav" playsinline></audio>


    <script>
        let mediaRecorder;
        let audioChunks = [];

        document.getElementById('startBtn').addEventListener('click', async () => {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                mediaRecorder = new MediaRecorder(stream);
                audioChunks = [];

                mediaRecorder.ondataavailable = event => {
                    if (event.data.size > 0) {
                        audioChunks.push(event.data);
                    }
                };

                mediaRecorder.onstop = () => {
                    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                    const audioUrl = URL.createObjectURL(audioBlob);
                    document.getElementById('audioPlayback').src = audioUrl;
                };

                mediaRecorder.start();
                document.getElementById('startBtn').disabled = true;
                document.getElementById('stopBtn').disabled = false;
            } catch (error) {
                console.error('Error accessing microphone:', error);
            }
        });

        document.getElementById('stopBtn').addEventListener('click', () => {
            mediaRecorder.stop();
            document.getElementById('startBtn').disabled = false;
            document.getElementById('stopBtn').disabled = true;
        });
    </script>
</body>
</html>

Again the steps to reproduce:

1. Connect headhpones
2. Start playing audio
3. Click start recording

Notice: sound changes from headphones to speakers. This works fine when using Chrome on my laptop.