parcel is not Reloading and emitted ERR_UNHANDLED_REJECTION Exception while using react

Question

I'm using electron and react

if there's a mistake token typo, ERR_UNHANDLED_REJECTION pops up and react reload stops.

I want HMR to be maintained even if there is a token typo.

🎛 Configuration (.babelrc, package.json, cli command)

package.json

{
  "name": "boilerplate",
  "version": "1.0.0",
  "description": "📦🚀 React Electron Parcel Boilerplate",
  "main": "src/electron/index.js",
  "scripts": {
    "start": "node scripts/start.js",
    "electron": "electron .",
    "build": "node scripts/build.js"
  },
  "keywords": [
    "react",
    "electron",
    "parcel"
  ],
  "author": "Ferenc Almasi",
  "license": "ISC",
  "dependencies": {
    "@chakra-ui/react": "^1.8.3",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@react-icons/all-files": "^4.1.0",
    "add": "^2.0.6",
    "framer-motion": "^6",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-indiana-drag-scroll": "^2.1.0",
    "react-photo-gallery": "^8.0.0",
    "react-scripts": "^5.0.0",
    "react-scroll-horizontal": "^1.6.6",
    "recoil": "^0.6.1",
    "smooth-scrollbar": "^8.7.4",
    "yarn": "^1.22.17"
  },
  "devDependencies": {
    "electron": "17.0.0",
    "electron-packager": "15.2.0",
    "electron-reloader": "1.1.0",
    "electron-winstaller": "4.0.1",
    "parcel-bundler": "1.12.4",
    "sass": "1.36.0"
  }
}

🤔 Expected Behavior

Still HMR ongoing, even if have token exception.

like react-scripts

😯 Current Behavior

react reload is stopped while using </video <-- mistake tag

> [email protected] electron
> electron .
🚨  /Users/ace/Desktop/lask launhcer electron/lask_launcher_electron/src/frontend/view/LoginView.js:40:20: Unexpected token, expected "jsxTagEnd" (40:20)
  38 |                         <source src={MinecraftTrailer} type={'video/mp4'}/>
  39 |                     </video
> 40 |                     {/*<Img position={'absolute'} src={MinecraftLoginView} objectFit={'none'}/>*/}
     |                    ^
  41 |                     <Box position={'relative'} left={'700px'} width={'500px'} height={'100vh'} bg={'rgba(0,0,0,0.5)'}
  42 |                          backdropFilter={'blur(20px)'}>
  43 |                         <Flex flexDirection={'column'} height={'100vh'} justifyContent={'center'} alignItems={'center'}>
node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<Object>".] {
  code: 'ERR_UNHANDLED_REJECTION'

💁 Possible Solution

🔦 Context

I'm using electron and react

if there's a mistake token typo, ERR_UNHANDLED_REJECTION pops up and react reload stops.

I want HMR to be maintained even if there is a token typo.

💻 Code Sample

electron_root.js

const { app, BrowserWindow } = require('electron');

try {
    require('electron-reloader')(module);
} catch (_) {}

let mainWindow;
let loginWindow;

const createWindow = () => {
    mainWindow = new BrowserWindow({
        title: "Lask Launcher",
        resizable: true,
        autoHideMenuBar: true,
        width: 1738,
        height: 1080,
        titleBarStyle: 'hiddenInset',
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            allowRunningInsecureContent: true,
            webSecurity: false
        }
    });

    mainWindow.loadFile('build/index.html');
};

const createLoginWindow = () => {
    loginWindow = new BrowserWindow({
        title: "Login Window",
        resizable: true,
        autoHideMenuBar: true,
        width: 1370,
        height: 772,
        titleBarStyle: 'hiddenInset',
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            allowRunningInsecureContent: true,
            webSecurity: false,
        }
    });

    loginWindow.loadFile('build/index.html')
}

app.commandLine.appendSwitch("autoplay-policy", "no-user-gesture-required")
app.whenReady().then(createLoginWindow);
app.on('window-all-closed', () => app.quit());
app.on('activate', () => {

    if(loginWindow === null){
        createLoginWindow()
    }

    // if (mainWindow === null) {
    //     createWindow();
    // }
});

parcel bunderl js

const Bundler = require('parcel-bundler');

const entry = './public/index.html';
const options = {
    outDir: './build',
    publicUrl: './',
    sourceMaps: false,
    autoInstall: false,
    hmr: false,
    target: 'electron'
};

let electronStarted = false;

(async () => {
    const bundler = new Bundler(entry, options);

    bundler.on('bundled', bundle => {
        if (!electronStarted) {
            electronStarted = true;

            require('child_process').spawn('npm', ['run', 'electron'], {
                stdio: ['ignore', 'inherit', 'inherit'],
                shell: true
            });
        }
    });

    bundler.bundle();
})();

🌍 Your Environment

Software	Version(s)
Parcel	1.12.4
Node	v16.13.1
npm/Yarn	yarn
Operating System	mac os