I'm trying to run npm run build but I encounter this error. I tried to solve it but I'm just beginning my dev journey and was following an old tutoria.how can i go about solving this issue, any solutions will be appreciated.
the error:
error during build:
TypeError: Cannot read properties of undefined (reading 'startOffset')
at overwriteAttrValue (file:///C:/Users/Altayeb/Desktop/guide_gps/node_modules/vite/dist/node/chunks/dep-557f29e6.js:43339:50)
at Object.transform (file:///C:/Users/Altayeb/Desktop/guide_gps/node_modules/vite/dist/node/chunks/dep-557f29e6.js:43575:29)
at async transform (file:///C:/Users/Altayeb/Desktop/guide_gps/node_modules/rollup/dist/es/shared/rollup.js:21928:16)
at async ModuleLoader.addModuleSource (file:///C:/Users/Altayeb/Desktop/guide_gps/node_modules/rollup/dist/es/shared/rollup.js:22153:30)
here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GUIDE GPS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/a11y-slider@latest/dist/a11y-slider.css" />
<script src="https://unpkg.com/a11y-slider@latest/dist/a11y-slider.js" defer></script>
</head>
<body>
<header class="primary-header">
<div class="container">
<div class="nav-wrapper">
<a href="#"><img src="images/logo.svg" alt="Logo"></a>
<button class="mobile-nav-toggle" aria-controls="primary-navigation" aria-expanded="false">
<span class="visually-hidden">Menu</span>
</button>
<nav class="primary-navigation" id="primary-navigation">
<ul aria-label="Primary" role="list" class="nav-list">
<li><a href="#">Pricing</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="https://github.com/Altayeb1422/Privacy-policy-/blob/main/Privacy-policy">Privacy Policy</a></li>
<!-- <li><a href="#">Careers</a></li>
<li><a href="#">Community</a></li> -->
</ul>
</nav>
<button class="button | display-sm-none display-md-inline-flex">Get Started</button>
</div>
</div>
</header>
<main>
<section class="hero | text-center-sm-only padding-block-900">
<div class="container">
<div class="even-columns">
<div class="flow">
<h1 class="fs-primary-heading fw-bold">
Vehicle tracking systems can offer companies big benefits.</h1>
<p>Manage makes it simple for software teams to plan day-to-day tasks while keeping the larger team goals in
view.</p>
<button class="button">Get Started</button>
</div>
<div class="hero__image">
<img class="mx-auto" src="images/gps.png" alt="">
</div>
</div>
</div>
</section>
<section class="sales-points | padding-block-900">
<div class="container">
<div class="even-columns">
<div class="sales-points__blog flow text-center-sm-only" style="--flow-spacer: 1.5rem">
<h2 class="fs-secondary-heading fw-bold">What technology we use?</h2>
<p>We use the state of the art tracking hardware,
Teltonika FMB920 is compact and smart tracker with Bluetooth connectivity,
internal High Gain GNSS and GSM antennas and integrated backup battery.
FMB920 is designed for light vehicles tracking in applications like insurance telematics,
rental cars, recovery of stolen cars, public safety services, delivery transport, taxi and much more.
</p>
<div>
<img src="images/tracker1.png" alt="">
</div>
</div>
<div>
<ul class="numbered-items | flow" role="list">
<li>
<div class="flow" style="--flow-spacer: 1em">
<h3 class="numbered-items__title | fs-600 fw-bold">Accelerometer sensor</h3>
<p class="numbered-items__body" data-width="wide">
The FMB920 is packed with Accelerometer sensor to detect every possible driving senario,
Green Driving, Over Speeding detection, Jamming detection, GNSS Fuel Counter, DOUT Control Via Call, Excessive Idling detection, Unplug detection, Towing detection, Crash detection, Auto Geofence, Manual Geofence.</p>
</div>
</li>
<li>
<div class="flow" style="--flow-spacer: 1em">
<h3 class="numbered-items__title | fs-600 fw-bold">Rugged Build</h3>
<p class="numbered-items__body" data-width="wide">
The FMB920 is designed to withstand harsh environmental condition making it last for years.
Operating temperature (without battery) -40 °C to +85 °C,
Operating humidity 5% to 95% non-condensing,
Ingress Protection Rating IP54,
Battery charge temperature 0 °C to +45 °C, Battery discharge temperature -20 °C to +60 °C.</p>
</div>
</li>
<li>
<div class="flow" style="--flow-spacer: 1em">
<h3 class="numbered-items__title | fs-600 fw-bold">Mobile App For Live-Tracking</h3>
<p class="numbered-items__body" data-width="wide">
GUIDE GPS provide a mobile application for
tracking your vehicles live within the app,
after the inatallment of the tracking hardware.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="carousel | padding-block-700 text-center">
<h2 class="fs-secondary-heading fw-bold">Mobile App</h2>
<div class="hero__image" >
<img class="mx-auto" width="300" height="430" src="images/app.svg" alt="">
</div>
<ul class="slider">
<li>
<!-- <img src="images/avatar-anisha.png" alt=""> -->
<div class="slider-content | flow" style="--flow-spacer: 1rem">
<h3 class="fw-bold text-accent-400">Live Tracking</h3>
<p data-width="wide">
The applicaton provide the ability to live track your vhechile anywhere.
providing information on the time, distanc, fuel conusumption, and much more.</p>
</div>
</li>
<li>
<li>
<!-- <img src="images/avatar-anisha.png" alt=""> -->
<div class="slider-content | flow" style="--flow-spacer: 1rem">
<h3 class="fw-bold text-accent-400">Live Tracking</h3>
<p data-width="wide">
The applicaton provide the ability to live track your vhechile anywhere.
providing information on the time, distanc, fuel conusumption, and much more.</p>
</div>
</li>
<li>
<!-- <img src="images/truck.jpg" alt=""> -->
<div class="slider-content | flow" style="--flow-spacer: 1rem">
<h3 class="fw-bold text-accent-400">Track Your Entire Fleet</h3>
<p data-width="wide">
With our App you will be alble to track
multiple vechiles, with live location updates, time , speed,
fuel conusumbtion, engine igntion, etc...
</p>
</div>
</li>
<li>
<!-- <img src="images/tracker1.png" alt=""> -->
<div class="slider-content | flow" style="--flow-spacer: 1rem">
<h3 class="fw-bold text-accent-400">Hardware Monitring</h3>
<p data-width="wide">
The App allows you to monitor your hardware "GPS Device"
status, incase of dissconnection or signal failure.
</p>
</div>
</li>
<li>
</li>
</ul>
<a class="btn btn-google" href="https://play.google.com/store/apps/details?id=com.guidegpsclient.android" title="Google Play">Google Play</a>
</section>
<section class="cta | padding-block-900 bg-accent-400 text-neutral-100">
<div class="container">
<div class="even-columns vertical-align-center">
<div>
<p class="fs-primary-heading fw-bold">Secure Your Vhicles With Us.</p>
</div>
<div class="justify-self-end-md">
<button class="button" data-type="inverted">Call Us</button>
</div>
</div>
</div>
</section>
</main>
<footer class="primary-footer | padding-block-700 bg-neutral-900 text-neutral-100">
<div class="container">
<div class="primary-footer-wrapper">
<div class="primary-footer-logo-social">
<a href="#" aria-label="home">
<svg class="logo" width="146" height="24">
<use xlink:href=""></use>
</svg>
</a>
<ul class="social-list" role="list" aria-label="Social links">
<li><a aria-label="facebook" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-facebook"></use>
</svg></a>
</li>
<li><a aria-label="youtube" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-youtube"></use>
</svg>
</a></li>
<li><a aria-label="twitter" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-twitter"></use>
</svg>
</a></li>
<li><a aria-label="pinterest" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-pinterest"></use>
</svg>
</a></li>
<li><a aria-label="instragram" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-instagram"></use>
</svg>
</a></li>
</ul>
</div>
<div class="primary-footer-nav">
<nav class="footer-nav">
<ul class="flow" style="--flow-spacer: 1em" aria-label="Footer" role="list">
<li><a href="#">Home</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<!-- <li><a href="#">Careers</a></li>
<li><a href="#">Community</a></li> -->
<li><a href="https://github.com/Altayeb1422/Privacy-policy-/blob/main/Privacy-policy">Privacy Policy</a></li>
</ul>
</nav>
</div>
<div class="primary-footer-form">
<form action="">
<input type="email">
<button class="button" data-shadow="none">Go</button>
</form>
<p>Copyright 2020. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<script type="module" src="/main.js"></script>
</body>
</html>