title: 'parcel' is not recognized as an internal or external command, operable program or batch file. ERROR for Parcel bundler in Vanilla TYPESCRIPT Code
body: <p>This error is showed up when I ran the code for an Arkanoid Game published on freecodecamp articles. I am not able to set up the configuration correctly for the game. I expected it to run the game but it didn't do the same. While debugging it kept throwing errors regarding its build. I have no idea as I have learned it online but this error is not getting resolve.
  I am attaching both the debugger image and the error image along with the log file text, where it showed the error.
  <a href="https://i.stack.imgur.com/eFJDp.png" rel="nofollow noreferrer">DEBUG CONSOLE</a></p>
  <p><a href="https://i.stack.imgur.com/G7MWu.png" rel="nofollow noreferrer">TERMINAL</a></p>
  <pre><code>0 verbose cli [
  0 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
  0 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
  0 verbose cli   'start'
  0 verbose cli ]
  1 info using npm@7.5.3
  2 info using node@v15.9.0
  3 timing config:load:defaults Completed in 4ms
  4 timing config:load:file:C:\Program Files\nodejs\node_modules\npm\npmrc Completed in 5ms
  5 timing config:load:builtin Completed in 5ms
  6 timing config:load:cli Completed in 6ms
  7 timing config:load:env Completed in 2ms
  8 timing config:load:file:D:\arkanoid-ts-startHere\.npmrc Completed in 1ms
  9 timing config:load:project Completed in 2ms
  10 timing config:load:file:C:\Users\WELCOME\.npmrc Completed in 0ms
  11 timing config:load:user Completed in 0ms
  12 timing config:load:file:C:\Users\WELCOME\AppData\Roaming\npm\etc\npmrc Completed in 0ms
  13 timing config:load:global Completed in 0ms
  14 timing config:load:cafile Completed in 1ms
  15 timing config:load:validate Completed in 0ms
  16 timing config:load:setUserAgent Completed in 2ms
  17 timing config:load:setEnvs Completed in 3ms
  18 timing config:load Completed in 27ms
  19 verbose npm-session 84c35795bdcebad3
  20 timing npm:load Completed in 60ms
  21 timing command:run-script Completed in 146ms
  22 timing command:start Completed in 163ms
  23 verbose stack Error: command failed
  23 verbose stack     at ChildProcess.&lt;anonymous&gt; (C:\Program 
  Files\nodejs\node_modules\npm\node_modules\@npmcli\promise-spawn\index.js:64:27)
  23 verbose stack     at ChildProcess.emit (node:events:378:20)
  23 verbose stack     at maybeClose (node:internal/child_process:1067:16)
  23 verbose stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
  24 verbose pkgid ts-parcel@1.0.0
  25 verbose cwd D:\arkanoid-ts-startHere
  26 verbose Windows_NT 10.0.19042
  27 verbose argv &quot;C:\\Program Files\\nodejs\\node.exe&quot; &quot;C:\\Program 
  Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js&quot; &quot;start&quot;
  28 verbose node v15.9.0
  29 verbose npm  v7.5.3
  30 error code 1
  31 error path D:\arkanoid-ts-startHere
  32 error command failed
  33 error command C:\WINDOWS\system32\cmd.exe /d /s /c parcel serve src/index.html
  34 verbose exit 1
  </code></pre>
  <p>This is package.json file</p>
  <pre><code>{
  &quot;name&quot;: &quot;ts-parcel&quot;,
  &quot;version&quot;: &quot;1.0.0&quot;,
  &quot;description&quot;: &quot;&quot;,
  &quot;main&quot;: &quot;index.js&quot;,
  &quot;scripts&quot;: {
      &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;,
      &quot;start&quot;: &quot;parcel serve src/index.html&quot;,
      &quot;watch&quot;: &quot;parcel watch src/index.html&quot;
  },
  &quot;type&quot;: &quot;module&quot;,
  &quot;author&quot;: &quot;&quot;,
  &quot;license&quot;: &quot;ISC&quot;,
  &quot;devDependencies&quot;: {
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^4.11.0&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;^4.11.0&quot;,
      &quot;eslint&quot;: &quot;^7.16.0&quot;,
      &quot;eslint-config-prettier&quot;: &quot;^7.1.0&quot;,
      &quot;eslint-plugin-prettier&quot;: &quot;^3.3.0&quot;,
      &quot;parcel&quot;: &quot;^1.12.4&quot;,
      &quot;prettier&quot;: &quot;^2.2.1&quot;,
      &quot;typescript&quot;: &quot;^4.1.3&quot;
  }
  }
  </code></pre>
  <p>This is index.ts file</p>
  <pre><code>import {CanvasView} from './view/CanvasView';
  import {Ball} from './sprites/Ball';
  import {Brick} from './sprites/Brick';
  import {Paddle} from './sprites/Paddle';
  import {Collision} from './Collision';
  
  //Images
  import PADDLE_IMAGE from './images/paddle.png';
  import BALL_IMAGE from './images/ball.png';
  import BRICK_IMAGE from './images/brick.png';
  
  //level and colors
  import{
      PADDLE_SPEED,
      PADDLE_WIDTH,
      PADDLE_HEIGHT,
      PADDLE_STARTX,
      BALL_SPEED,
      BALL_SIZE,
      BALL_STARTX,
      BALL_STARTY
  } from './setup';
  
  //helpers
  import {createBricks} from './helpers';
  
  let gameOver = false;
  let score = 0;
  
  function setGameOver(view: CanvasView){
      view.drawInfo('Game Over!');
      gameOver = false;
  }
  
  function setGameWin(view: CanvasView){
      view.drawInfo('Game Won!!!');
      gameOver = false;
  }
  
  function gameLoop(
      view: CanvasView,
      bricks:Brick[],
      paddle: Paddle,
      ball: Ball,
      collision: Collision
  ){
      console.log(&quot;draw!&quot;);
      view.clear();
      view.drawBricks(bricks);
      view.drawSprite(paddle);
      view.drawSprite(ball);
      //move ball
      ball.moveBall();
  
      //move paddle and check as it won't exit the playField
      if(
          (paddle.isMovingLeft &amp;&amp; paddle.pos.x &gt; 0) || 
          (paddle.isMovingRight &amp;&amp; paddle.pos.x &lt; view.canvas.width - paddle.width)
      ){
          paddle.movePaddle();
      }
  
      collision.checkBallCollision(ball, paddle, view);
      const collidingBrick = collision.isCollidingBricks(ball, bricks);
  
      if(collidingBrick){
          score += 1;
          view.drawScore(score);
      }
  
      //GAME OVER!!! when ball leaves playField
      if(ball.pos.y &gt; view.canvas.height) gameOver = true;
      //if game won, set gameOver and display win
      if(bricks.length === 0) return setGameWin(view);
      //return if gameOver and don't run the requestAnimationFrame
      if(gameOver) return setGameOver(view);
  
      requestAnimationFrame(() =&gt; gameLoop(view,bricks,paddle,ball,collision));
  }
  
  function startGame(view:CanvasView){
      //reset display
      score = 0;
      view.drawInfo('');
      view.drawScore(0);
  
      //create collision
      const collision = new Collision();
  
      //create all bricks
      const bricks = createBricks();
  
      //create all paddle
      const paddle = new Paddle(
          PADDLE_SPEED,
          PADDLE_WIDTH,
          PADDLE_HEIGHT,
          {
              x: PADDLE_STARTX,
              y: view.canvas.height - PADDLE_HEIGHT - 5
          },
          PADDLE_IMAGE
      )
  
      //create a ball
      const ball = new Ball(
          BALL_SPEED,
          BALL_SIZE,
          {x: BALL_STARTX, y: BALL_STARTY},
          BALL_IMAGE
      );
  
      gameLoop(view, bricks, paddle, ball, collision);
  }
  
  //create a view
  const view = new CanvasView('#playField');
  view.initStartButton(startGame);
  </code></pre>
  <p>This is CanvasView.ts file</p>
  <pre><code>import {Brick} from '../sprites/Brick';
  import {Ball} from '../sprites/Ball';
  import {Paddle} from '../sprites/Paddle';
  import { BRICK_IMAGES } from '~/setup';
  
  export class CanvasView{
  canvas: HTMLCanvasElement;
  private context: CanvasRenderingContext2D | null;
  private scoreDisplay: HTMLObjectElement | null;
  private start: HTMLObjectElement | null;
  private info: HTMLObjectElement| null;
  
  constructor(canvasName: string){
      this.canvas = document.querySelector(canvasName) as HTMLCanvasElement;
      this.context = this.canvas.getContext('2d');
      this.scoreDisplay = document.querySelector('#score');
      this.start = document.querySelector('#start');
      this.info = document.querySelector('#info');
  }
  
  clear(): void{
      this.context?.clearRect(0,0,this.canvas.width, this.canvas.height);
  }
  
  initStartButton(startFunction: (view:CanvasView) =&gt; void): void{
      this.start?.addEventListener('click', () =&gt; startFunction(this));
  }
  
  drawScore(score: number): void{
      if(this.scoreDisplay) this.scoreDisplay.innerHTML = score.toString();
  }
  
  drawInfo(text: string): void{
      if(this.info) this.info.innerHTML = text;
  }
  
  drawSprite(brick: Brick | Paddle | Ball): void{
      if(!brick) return;
  
      this.context?.drawImage(
          brick.image,
          brick.pos.x,
          brick.pos.y,
          brick.width,
          brick.height
      );
  }
  
  drawBricks(bricks: Brick[]): void{
      bricks.forEach(brick =&gt; this.drawSprite(brick));
  }
  }
  </code></pre>
  <p>The above codes are the mainframe of the game. Hope it helps to resolve.</p>