Try running the command from the Terminal app rather than from VS Code.
Btw, does happens when you run it without sudo?
I actually running from the terminal in MAC or is their any other terminal App outside the normal View - Terminal as directed by Mosh?
As you can see from the photo that I sent, when I use the Sudo, i get the respond that you can see in the photos.
My code works perfectly when I use node-modules/.bin/ parcel index.html and out puts the design result well
- but It doesnât allow me to go on with the next process(stop/exit) and by opening up the next terminal, that I need to allow "parcel build " or "parcel push " when I click keys, Control + C.
Hope you understand what I mean?
Thanks.
I am actually running from the terminal in MAC or is their any other terminal App outside the normal View - Terminal as directed by Mosh?
Please, as you can see from the photo that I sent, when I use the Sudo, i get the respond that you can see in the photos.
My code works perfectly when I use node-modules/.bin/ parcel index.html and out puts the design result well
- but It doesnât allow me to go on with the next process(stop/exit) and by opening up the next terminal, that I need to allow "parcel build " or "parcel push " when I click keys, Control + C.
Hope you understand what I mean?
Thanks.
Yes, every Mac comes with a pre-installed Terminal app called âTerminalâ. You can press Cmd + Space to bring up the spotlight and then type âTerminalâ and hit enter.
Try running the npm command to install the package as global BUT WITHOUT sudo.
If it shows an error, run it with sudo. Hopefully, it will not show any error. If it does, please copy and paste the command that you entered and the error message.
Error messages are easier to copy and search than screenshots. 
Hello,
Actually, I am communicating with my phone. my phone is quite different from my MAC. The screen shot I gave you is from the VS terminal and not the inbuilt MAC terminal. I was trying to explain that I donât have any other terminal App but the VS terminal app and the inbuilt MAC App.
I have tried using the Sudo on VS terminal but itâs reporting: 2
appurunoMacBook-puro:brandnew apple$ npm i -g parcel-bundler
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/parcel-bundler
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir â/usr/local/lib/node_modules/parcel-bundlerâ
npm ERR! [Error: EACCES: permission denied, mkdir â/usr/local/lib/node_modules/parcel-bundlerâ] {
npm ERR! errno: -13,
npm ERR! code: âEACCESâ,
npm ERR! syscall: âmkdirâ,
npm ERR! path: â/usr/local/lib/node_modules/parcel-bundlerâ
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
npm ERR! A complete log of this run can be found in: /Users/apple/.npm/_logs/2023-09-28T11_51_24_653Z-debug-0.log
appurunoMacBook-puro:brandnew apple$
2, When I used Sudo, I got the below response:
appurunoMacBook-puro:brandnew apple$ sudo npm i -g parcel-bundler
sudo: a terminal is required to read the password; either use the -S option to read from standard input or configure an askpass helper
appurunoMacBook-puro:brandnew apple$
Do you think I need to do what now to solve this?
Thanks so much!
Emeka
Hello Suffian,
Thank you so much for your time and kind efforts to help me.
I think i have just solved the problems partly by changing my terminal shell to zsh but now i canât automatically get a new terminal or exit my previous terminal to a new terminal, to build a new change after running the parcel index.html.
I made efforts to get a new terminal automatically after pressing CNTRL+C as demonstrated by Mosh but this doesnât work. Do you please have any ideas?
Thank you!
Emeka
I donât think changing from shell and zsh would make any difference. Do you mean you have successfully installed the parcel-bundler as a global package?
I do not think a mac comes without a Terminal app. Try following this support page of apple: Open or quit Terminal on Mac - Apple Support
In my experience, Terminals of IDE sometimes give issues which the standalone Terminal app doesnât. I have never seen the error message you shared (when using sudo), so it might mean that you need to use the Terminal app.
Hello Suffian,
I was able to install the parcel bundle Nd it worked when I changed to bash: zsh. I successfully installed the bundle using the sudo. I think it has to do with my MAC version. I am using a MAC Pro.
Thank you for the link you sent. The link you send to me is a general Mac instructions but I want to make more effort to know if I can get a new terminal when I use my Control+C. or maybe if their are other means I could automatically get a new terminal after termination of previous terminal job.
I will like to use the parcel build and parcel push on the new terminals.
I actually sent you the codes and results in earlier email before the last one. Please you can check.
Thank you and have a nice weekend.
Emeka.
After using the code i still get the Error. Any idea?
Thank you forward!
You can open a new terminal tab in your VS Code and run your other commands. Just to be sure youâre in the same directory in both terminals, you can run this command to check if they return the same paths (in each terminal tabs):
pwd
Btw, instead of installing the package as global, you can also run it using npx like this:
npx parcel-bundler index.html
# or a specific version like this:
npx parcel-bundler@1.12.5 index.html
I would love if you or anyone can help me please⌠i tried both ways it never works
Hello everyone , I would be grateful if someone could please help ou. I have similar issue but it is when I run parcel index.html or node.modules/.bin/parcel index.html I am stuck there and it gives me frustration:
What happens when you run this line in the terminal?
npx parcel-bundler index.html
Can you share the contents of your index.html file?
Also, please share a screenshot of the images folder.
For sharing the contents of index.html file, please copy the text and paste it inside a code block.
You can put your code between two lines with three tildes (i.e.
```) like this:
```
your code goes here (and this is a code block)
```
Text can be easily search and tested as compared to a picture of code.
here is the html content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Deploy Your Website in Less thatn 60s.">
<meta property="og:title" content="Moshify">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.moshified.com/#">
<title>Moshify - Go online for just $9</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=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
<header>
<nav class="nav collapsible">
<a class="nav__brand" href="#"><img src="images/logo.svg" alt=""></a>
<svg class="icon icon--white nav__toggler">
<use xlink:href="images/sprite.svg#menu"></use>
</svg>
<ul class="list nav__list collapsible__content">
<li class="nav__item"><a href="#">Hosting</a></li>
<li class="nav__item"><a href="#">VPS</a></li>
<li class="nav__item"><a href="#">Domain</a></li>
<li class="nav__item"><a href="#">Pricing</a></li>
</ul>
</nav>
</header>
<section class="block block--dark block--skewed-left hero">
<div class="container grid grid--1x2">
<header class=" block__header hero__content">
<h1 class="block__heading">Cloud Hosting for Pros</h1>
<p class="hero__tagline">Deploy your websites in less than 60 seconds</p>
<a href="#" class="btn btn--accent btn--stretched">Get started</a>
</header>
<picture>
<source type="image/webp" srcset="images/banner.webp 1x, images/banner@2x.webp 2x">
<source type="image/png" srcset="images/banner.png 1x, images/banner@2x.png 2x">
<img class="hero__image" src="images/banner.png" alt="">
</picture>
</div>
</section>
<section class="block container block-domain">
<header class="block__header">
<h2>Starting at $9 per month</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, consequatur.</p>
</header>
<div class="input-group">
<input type="text" class="input" placeholder="Enter domain name here...">
<button class="btn btn--accent">
<svg class="icon icon--white">
<use xlink:href="images/sprite.svg#search"></use>
</svg>
Search
</button>
</div>
<ul class="list block-domain__prices">
<li><span class="badge badge--secondary">.com $9</span></li>
<li>.sg $10</li>
<li>.space $10</li>
<li>.info $14</li>
<li>.net $10</li>
<li>.xyz $10</li>
</ul>
</section>
<section class="block container block-plans">
<div class="grid grid--1x3">
<div class="plan">
<div class="card card--secondary">
<header class="card__header">
<h3 class="plan__name">Entry</h3>
<span class="plan__price">$12</span>
<span class="plan__billing-cycle">/month</span>
<span class="badge badge--secondary badge--small">10% OFF</span>
<span class="plan__description">Easy start on the cloud</span>
</header>
<div class="card__body">
<ul class="list list--tick">
<li class="list__item">Unlimited Websites</li>
<li class="list__item">Unlimited Bandwidth</li>
<li class="list__item">100 GB SSD Storage</li>
<li class="list__item">3 GB RAM</li>
</ul>
<button class="btn btn--outline btn--block">Buy now</button>
</div>
</div>
</div>
<div class="plan plan--popular">
<div class="card card--primary">
<header class="card__header">
<h3 class="plan__name">Entry</h3>
<span class="plan__price">$12</span>
<span class="plan__billing-cycle">/month</span>
<span class="badge badge--primary badge--small">10% OFF</span>
<span class="plan__description">Easy start on the cloud</span>
</header>
<div class="card__body">
<ul class="list list--tick">
<li class="list__item">Unlimited Websites</li>
<li class="list__item">Unlimited Bandwidth</li>
<li class="list__item">100 GB SSD Storage</li>
<li class="list__item">3 GB RAM</li>
</ul>
<button class="btn btn--outline btn--block">Buy now</button>
</div>
</div>
</div>
<div class="plan">
<div class="card card--secondary">
<header class="card__header">
<h3 class="plan__name">Entry</h3>
<span class="plan__price">$12</span>
<span class="plan__billing-cycle">/month</span>
<span class="badge badge--secondary badge--small">10% OFF</span>
<span class="plan__description">Easy start on the cloud</span>
</header>
<div class="card__body">
<ul class="list list--tick">
<li class="list__item">Unlimited Websites</li>
<li class="list__item">Unlimited Bandwidth</li>
<li class="list__item">100 GB SSD Storage</li>
<li class="list__item">3 GB RAM</li>
</ul>
<button class="btn btn--outline btn--block">Buy now</button>
</div>
</div>
</div>
</div>
</section>
<section class="block container">
<header class="block__header" data-aos="slide-up">
<h2>Host on the Cloud to Keep Growing</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, commodi.</p>
</header>
<article class="grid grid--1x2 feature">
<div class="feature__content" data-aos="fade-right">
<span class="icon-container">
<svg class="icon icon--primary">
<use xlink:href="images/sprite.svg#easy"></use>
</svg>
</span>
<h3 class="feature__heading">Super Easy to Use</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit vel blanditiis ea laudantium quasi eos, rem tempora non veritatis animi!</p>
<a href="#" class="link-arrow">Learn more</a>
</div>
<picture data-aos="fade-left">
<source type="image/jpg" srcset="images/easy.jpg 1x, images/easy@2x.jpg 2x">
<source type="image/webp" srcset="images/easy@2x.webp 2x">
<img class="feature__image" src="images/easy@2x.jpg" alt="">
</picture>
</article>
<!--the second one-->
<article class="grid grid--1x2 feature">
<div class="feature__content">
<span class="icon-container">
<svg class="icon icon--primary">
<use xlink:href="images/sprite.svg#computer"></use>
</svg>
</span>
<h3 class="feature__heading">Super Easy to Use</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit vel blanditiis ea laudantium quasi eos, rem tempora non veritatis animi!</p>
<a href="#" class="link-arrow">Learn more</a>
</div>
<picture>
<source type="image/jpg" srcset="images/fast.jpg 1x, images/fast@2x.jpg 2x">
<source type="image/webp" srcset="images/fast.webp 1x">
<img class="feature__image" src="images/fast@2x.jpg" alt="">
</picture>
</article>
<!--the third one-->
<article class="grid grid--1x2 feature">
<div class="feature__content">
<span class="icon-container">
<svg class="icon icon--primary">
<use xlink:href="images/sprite.svg#wordpress"></use>
</svg>
</span>
<h3 class="feature__heading">Super Easy to Use</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit vel blanditiis ea laudantium quasi eos, rem tempora non veritatis animi!</p>
<a href="#" class="link-arrow">Learn more</a>
</div>
<picture>
<source type="image/jpg" srcset="images/wordpress@2x.jpg 2x">
<source type="image/webp" srcset="images/wordpress.webp 1x, images/wordpress@2x.webp 2x">
<img class="feature__image" src="images/wordpress@2x.jpg" alt="">
</picture>
</article>
<!--the fourth one-->
<article class="grid grid--1x2 feature">
<div class="feature__content">
<span class="icon-container">
<svg class="icon icon--primary">
<use xlink:href="images/sprite.svg#clock"></use>
</svg>
</span>
<h3 class="feature__heading">Super Easy to Use</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit vel blanditiis ea laudantium quasi eos, rem tempora non veritatis animi!</p>
<a href="#" class="link-arrow">Learn more</a>
</div>
<picture>
<source type="image/jpg" srcset="images/support@2x.jpg 2x">
<source type="image/webp" srcset="images/support.webp 1x, images/support@2x.webp 2x">
<img class="feature__image" src="images/support@2x.jpg" alt="">
</picture>
</article>
</section>
<section class="block block--dark block--skewed-right block-showcase">
<header class="block__header">
<h2>User-friendly Control Panel</h2>
</header>
<div class="container grid grid--1x2">
<picture class="block-showcase__image">
<source type="image/png" srcset="images/ipad.png 1x">
<source type="image/webp" srcset="images,ipad.webp 1x, images/ipad@2x.webp 2x">
<img src="images/ipad.png" alt="">
</picture>
<ul class="list">
<li>
<div class="media">
<div class="media__image">
<svg class="icon icon--primary">
<use xlink:href="images/sprite.svg#computer"></use>
</svg>
</div>
<div class="media__body">
<h3 class="media__title">Easy start & Manage Updates</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque illo quam officiis delectus, impedit incidunt recusandae vero sint reiciendis omnis?</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media__image">
<svg class="icon icon--primary">
<use xlink:href="images/sprite.svg#growth"></use>
</svg>
</div>
<div class="media__body">
<h3 class="media__title">Easy start & Manage Updates</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque illo quam officiis delectus, impedit incidunt recusandae vero sint reiciendis omnis?</p>
</div>
</div>
</li>
<li>
<div class="media">
<div class="media__image">
<svg class="icon icon--primary">
<use xlink:href="images/sprite.svg#wordpress"></use>
</svg>
</div>
<div class="media__body">
<h3 class="media__title">Easy start & Manage Updates</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque illo quam officiis delectus, impedit incidunt recusandae vero sint reiciendis omnis?</p>
</div>
</div>
</li>
</ul>
</div>
</section>
<section class="block">
<header class="block__header" data-aos="slide-up">
<h2>What our Customers are Saying</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore, neque.
</p>
</header>
<div class="container">
<div class="card testimonial" data-aos="fade-up-right">
<div class="grid grid--1x2">
<div class="testimonial__image">
<img src="images/testimonial.jpg" alt="A happy smilling customer">
<span class="icon-container icon-container--accent">
<svg class="icon icon--white icon--small">
<use xlink:href="images/sprite.svg#quotes"></use>
</svg>
</span>
</div>
<blockquote class="quote">
<p class="quote__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis adipisci sint quidem temporibus, libero excepturi doloremque dignissimos nam minus modi.</p>
<footer>
<div class="media">
<div class="media__image">
<svg class="icon icon--primary quote__line">
<use xlink:href="images/sprite.svg#line"></use>
</svg>
</div>
<div class="media__body">
<h3 class="media__title quote__author">John Smith</h3>
<p class="quote__organization">ABC Company</p>
</div>
</div>
</footer>
</blockquote>
</div>
</div>
</div>
</section>
<div class="container">
<div class="callout callout--primary callout--signup">
<div class="grid grid--1x2">
<div class="callout__content">
<h2 class="callout__heading">Ready to Get Started</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel hic dolorum eius minima ab at, porro sed explicabo doloribus magni!</p>
</div>
<a href="#" class="btn btn--secondary btn--stretched">Get Started</a>
</div>
</div>
</div>
<footer class="block block--dark footer">
<!--First one-->
<div class="grid container footer__sections">
<section class="collapsible footer__section">
<div class="collapsible__header">
<h2 class="collapsible__heading footer__heading">PRODUCTUS</h2>
<svg class="icon icon--white collapsible__chevron">
<use xlink:href="images/sprite.svg#chevron"></use>
</svg>
</div>
<div class="collapsible__content">
<ul class="list">
<li><a href="#">Website Hosting</a></li>
<li><a href="#">Free Automated Wordpress</a></li>
<li><a href="#">Migrations</a></li>
</ul>
</div>
</section>
<!--Second one-->
<section class="collapsible footer__section">
<div class="collapsible__header">
<h2 class="collapsible__heading footer__heading">COMPANY</h2>
<svg class="icon icon--white collapsible__chevron">
<use xlink:href="images/sprite.svg#chevron"></use>
</svg>
</div>
<div class="collapsible__content">
<ul class="list">
<li><a href="#">About</a></li>
<li><a href="#">Affiliates</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</section>
<!--Third one-->
<section class="collapsible footer__section">
<div class="collapsible__header">
<h2 class="collapsible__heading footer__heading">SUPPORT</h2>
<svg class="icon icon--white collapsible__chevron">
<use xlink:href="images/sprite.svg#chevron"></use>
</svg>
</div>
<div class="collapsible__content">
<ul class="list">
<li><a href="#">Contact</a></li>
<li><a href="#">Knowledge Base</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
</section>
<!--Fourth one-->
<section class="collapsible footer__section">
<div class="collapsible__header">
<h2 class="collapsible__heading footer__heading">DOMAINS</h2>
<svg class="icon icon--white collapsible__chevron">
<use xlink:href="images/sprite.svg#chevron"></use>
</svg>
</div>
<div class="collapsible__content">
<ul class="list">
<li><a href="#">Domain Checker</a></li>
<li><a href="#">Domain Transfer</a></li>
<li><a href="#">Free Domain</a></li>
</ul>
</div>
</section>
<div class="footer__brand">
<img src="images/logo.svg" alt="">
<p class="footer__copyright">Copyright 2020 Mosh Hamedani</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
The issue is in this line:
<source type="image/webp" srcset="images,ipad.webp 1x, images/ipad@2x.webp 2x">
Replace images,ipad.webp with images/ipad.webp.
