Parcel: HMR failed in Electron

Created on 17 Dec 2017 · 2Comments · Source: parcel-bundler/parcel

Choose one: is this a 🐛 bug report or 🙋 feature request?
🐛

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

any

🤔 Expected Behavior

HMR in electron's BrowserWindow

😯 Current Behavior

No HMR

💁 Possible Solution

I found the HMR init logic depends on the the module object. But the BrowserWindow in electron has its own window.module. That leads to the bug.
https://github.com/parcel-bundler/parcel/blob/b7b2991d69b960d9f2951828b8145a6d9396ee4e/src/builtins/hmr-runtime.js#L17

A temporary solution is setting nodeIntegration to false in BrowserWindow's options. But it removes some facilities in Electron. For someone indeed need node-integration, here may be a workaround: https://github.com/electron/electron/issues/5113 . However, I wish parcel could handle it.

🔦 Context

Use parcel with Electron.

🌍 Your Environment

| Software | Version(s)
| ---------------- | ----------
| Parcel | 1.2.0
| Node | v8.9.3
| npm/Yarn | npm 5.6.0
| Operating System | mac 10.13.2

Bug

Source

yuqianma

👍5

Most helpful comment

This solution from the Electron FAQ works. It also prevents the require('electron').xxx is undefined. issue:

https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

Due to the Node.js integration of Electron, there are some extra symbols inserted into the DOM like module, exports, require. This causes problems for some libraries since they want to insert the symbols with the same names.

if you want to keep the abilities of using Node.js and Electron APIs, you have to rename the symbols in the page before including other libraries:

<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>

brianpattison on 2 Jan 2018

👍4

All 2 comments

This solution from the Electron FAQ works. It also prevents the require('electron').xxx is undefined. issue:

https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

Due to the Node.js integration of Electron, there are some extra symbols inserted into the DOM like module, exports, require. This causes problems for some libraries since they want to insert the symbols with the same names.

if you want to keep the abilities of using Node.js and Electron APIs, you have to rename the symbols in the page before including other libraries:

<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>

brianpattison on 2 Jan 2018

👍4

Fixed with #652.

--target=electron