When I run 'npm run watch:js', it changes app.js file code

Question

I have a Node.js project, and after the Parcel update, I’m running into an issue.

In my ./public/js/ folder I have two files: bundle.js and bundle.js.map. Previously, Parcel was compiling/bundling the code in these two files. However, after the update, it’s now changing my app.js file. And I can’t figure out how to adjust the Parcel to the before‐mentioned two files. This is my package.json file:

{
  "name": "Project",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "nodemon server.js",
    "watch:js": "parcel watch ./public/js/index.js --dist-dir ./public/js/bundle.js",
    "build:js": "parcel watch ./public/js/index.js --dist-dir ./public/js/bundle.js"
    }
 "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "axios": "^1.10.0"
  },
  "devDependencies": {
    "parcel": "^2.15.4".
}

Using Parcel‐bundle, I want to run this code from the index.js file.

• Login.js file:

  import axios from 'axios'
  export const login=async(email,password)=>{ 
      try{
          const res=await axios({
              method:'POST',
              url:'http://127.0.0.1:7000/api/v1/user/login',
              data:{
                  email,
                  password
              }
          })
          if(res.data.status==='success'){
              alert('Logged in Successfully!')
              window.setTimeout(()=>{
                  location.assign('/')
              },1500)
          }
  
      }catch(err){
          alert(err.response.data.message)
      }
  }
  console.log('the document is: ',document.querySelector('.form'))
  

• index.js file:

  import '@babel/polyfill'
  import {login} from './login'
  document.querySelector('.form').addEventListener('submit',e=>{
      e.preventDefault()
      const email=document.getElementById('email').value;
      const password=document.getElementById('password').value;
      login(email,password)
  })
  

When I run the

npx parcel build ./public/js/js/index.js --dist-dir ./public/js --no-cache

or the

npm run watch

command, it changes my app.js file.

1. Before executing the command, my app.js file was:

   app.use('/',viewRoute)
   app.use('/api/v1/tours',tourRoute)
   app.use('/api/v1/user',userRoute)
   app.use('/api/v1/review',reviewRoute)
   app.all('*',(req,res,next)=>{
     next(new AppError(`Can't find ${req.originalUrl} on this server!`,404))})
   

2. After running the command on my app.js file, it automatically generates this code:

   require("@babel/polyfill");
   var $knI9B$axios = require("axios");
   const $70af9284e599e604$export$596d806903d1f59e = async (email, password)=>{
       try {
           const res = await (0, ($parcel$interopDefault($knI9B$axios)))({
               method: 'POST',
               url: 'http://127.0.0.1:7000/api/v1/user/login',
               data: {
                   email: email,
                   password: password
               }
           });
           if (res.data.status === 'success') {
               alert('Logged in Successfully!');
               window.setTimeout(()=>{
                   location.assign('/');
               }, 1500);
           }
       } catch (err) {
           alert(err.response.data.message);
       }
   };
   console.log('the document is: ', document.querySelector('.form'));
   document.querySelector('.form').addEventListener('submit', (e)=>{
       e.preventDefault();
       const email = document.getElementById('email').value;
       const password = document.getElementById('password').value;
       (0, $70af9284e599e604$export$596d806903d1f59e)(email, password);
   });
   
   
   //# sourceMappingURL=app.js.map
   

I want to try to execute this code into bundle.js and bundle.js.map. Not executed in app.js and does not make app.js.map file.

require("@babel/polyfill");
var $knI9B$axios = require("axios");
const $70af9284e599e604$export$596d806903d1f59e = async (email, password)=>{
    try {
        const res = await (0, ($parcel$interopDefault($knI9B$axios)))({
            method: 'POST',
            url: 'http://127.0.0.1:7000/api/v1/user/login',
            data: {
                email: email,
                password: password
            }
        });
        if (res.data.status === 'success') {
            alert('Logged in Successfully!');
            window.setTimeout(()=>{
                location.assign('/');
            }, 1500);
        }
    } catch (err) {
        alert(err.response.data.message);
    }
};
console.log('the document is: ', document.querySelector('.form'));
document.querySelector('.form').addEventListener('submit', (e)=>{
    e.preventDefault();
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    (0, $70af9284e599e604$export$596d806903d1f59e)(email, password);
});

I’ve tried a number of things to fix it, and continually get this same output.

Answer 1

You're accidentally specifying a file (bundle.js) instead of a directory as the output path in Parcel, which causes it to overwrite unintended files like app.js.

Your current command:

parcel watch ./public/js/index.js \
  --dist-dir ./public/js/bundle.js

This tells Parcel: “Write outputs into a folder named bundle.js,”

which ends up clobbering app.js.

Instead,

Use --dist-dir to specify a folder and use --out-file to name the generated file:

"scripts": {
  "start": "nodemon server.js",
  "watch:js": "parcel watch ./public/js/index.js \
    --dist-dir ./public/js/dist \
    --out-file bundle.js",
  "build:js": "parcel build ./public/js/index.js \
    --dist-dir ./public/js/dist \
    --out-file bundle.js"
}

Where,

1. --dist-dir ./public/js/dist is your Output directory

2. --out-file bundle.js is your Output filename

Update your HTML:

<script src="/js/dist/bundle.js"></script>

If you really want to output directly in public/js without subfolders, do this:

"watch:js": "parcel watch ./public/js/index.js \
  --dist-dir ./public/js \
  --out-file bundle.js",

This writes bundle.js and bundle.js.map into public/js, without touching app.js, because Parcel won’t auto-overwrite files it didn’t output.