I have a Node.js project, and after the Parcel update, I’m running into an issue.
In my ./public/js/ folder I have 2 files: bundle.js and bundle.js.map. Previously, Parcel was compiling/bundling the code in these 2 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 2 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 Pascal-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’ command or the ‘npm run watch’ command. This command changes my app.js file.
Before executing the command, my app.js file
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))})
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 executed 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.
Thank you advance
