search

parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀
https://parceljs.org
MIT License
43.39k stars 2.26k forks source link

hot reload or hot module replacement not working with electron #6229

Open MSKhodadady opened 3 years ago

MSKhodadady commented 3 years ago

🐛 bug report

I installed parcel v2 in my electron/react/ts project. Parcel runs correctly and if I save a file, the parcel rebuilds but the page in the electron doesn't reload automatically. I mean, the parcels rebuilds but the page in the electron (chromium) doesn't. The project's bundler previously was webpack, but I installed parcel v2 for easier hmr config.

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

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "description": "File Tag Management",
  "author": "Sadeq",
  "private": true,
  "devDependencies": {
    "@types/better-sqlite3": "^5.4.1",
    "@types/electron-devtools-installer": "^2.2.0",
    "@types/node": "^14.14.28",
    "@types/react": "^17.0.2",
    "autoprefixer": "^10.2.5",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.2",
    "electron": "^12.0.2",
    "electron-devtools-installer": "^3.1.1",
    "electron-rebuild": "^2.3.5",
    "html-webpack-plugin": "^5.1.0",
    "parcel": "^2.0.0-beta.2",
    "postcss": "^8.2.12",
    "postcss-loader": "^5.2.0",
    "style-loader": "^2.0.0",
    "tailwindcss": "^2.1.1",
    "ts-loader": "^8.0.17",
    "typescript": "^4.1.5",
    "webpack": "^5.22.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "scripts": {
    "after-install-native": "electron-rebuild -f",
    "build:renderer": "webpack --config ./configs/renderer/webpack.config.js",
    "run:main": "electron mainRunner.js --inspect",
    "run:renderer": "webpack serve --config ./configs/renderer/webpack.hot.js",
    "parcel:serve": "parcel serve ./src/renderer/main.html --target app",
    "parcel:watch": "parcel watch ./src/renderer/main.html --target app",
  },
  "dependencies": {
    "better-sqlite3": "^7.1.2",
    "primeflex": "^2.0.0",
    "primeicons": "^4.1.0",
    "primereact": "^6.0.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-transition-group": "^4.4.1",
    "ts-node": "^9.1.1"
  },
  "targets": {
    "app": {
      "context": "electron-renderer",
      "distDir": "dist/renderer"
    }
  }
}

Note that typescript was installed for using with webpack, and wasn't used with parcel.

.postcssrc.json

{
    "plugins": {
      "tailwindcss": {},
      "autoprefixer": {}
    }
}

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module" src="./main.tsx"></script>
</body>
</html>

main.tsx

import React from "react";
import ReactDOM from 'react-dom';
import App from './App';

//: primereact theme and css file
// import 'primereact/resources/themes/saga-blue/theme.css';
import "../../node_modules/primereact/resources/primereact.min.css";
import "../../node_modules/primereact/resources/themes/fluent-light/theme.css";

//: prime icons
import "../../node_modules/primeicons/primeicons.css";

//: primeflex
import "../../node_modules/primeflex/primeflex.css";

//: main css file (+tailwindcss in it)
import './main.css';

const root = document.createElement('div');
root.classList.add('root-element')
document.body.appendChild(root);

ReactDOM.render(<App />, root);

🤔 Expected Behavior

If I save a file, the parcel should rebuild and the page in electron (chromium) should reload.

😯 Current Behavior

The parcel rebuilds, but the page in electron (chromium) didn't reload.

💁 Possible Solution

I cannot find any possible solution, because it hasn't any error shown. Just not works :)

🔦 Context

I tried to have parcel's hot reload and hot module replace works with my electron renderer process that was written in React and Typescript.

💻 Code Sample

🌍 Your Environment

Software Version(s)
Parcel 2.0.0-beta.2
Node v14.16.1
npm 6.14.12
Yarn v1.22.10
Operating System Manjaro Linux
Editor Vscode 1.54.2
Electron v12.0.2
MSKhodadady commented 3 years ago

I upgraded parcel from 2.0.0-beta.2 to 2.0.0-beta.3.1, and now the hot module replacement works 😃, but not hot reload 😶. Wrote in doc, the hot reload works by default and If we add this lines to code 👇, now the hot reload works.

if (module.hot) {
    module.hot.accept();
}

But now in my project, either this lines exists or not, the HMR works. This is not problem for me, but I think it is misbehavior, based on documentation.

Thank you very much.

vdtrung commented 3 years ago

can you tell me where did u push if (module.hot) { module.hot.accept(); }

I pushed it in the App.js file and it's not worked :((

MSKhodadady commented 3 years ago

I push it in the main.js file, where I called the ReactDOM.render, after it.