Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
MSKhodadady opened this issue May 3, 2021 · 3 comments
Open

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

MSKhodadady opened this issue May 3, 2021 · 3 comments
Labels
🐛 Bug HMR Hot Module Reloading ✨ Parcel 2

Comments

@MSKhodadady
Copy link

MSKhodadady commented May 3, 2021 •
edited
Loading

🐛 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 MSKhodadady changed the title hot reload or hot module replacement not working hot reload or hot module replacement not working with electron May 8, 2021
@mischnic mischnic added 🐛 Bug HMR Hot Module Reloading ✨ Parcel 2 labels May 15, 2021
@MSKhodadady
Copy link
Author

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
Copy link

vdtrung commented Jun 18, 2021

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
Copy link
Author

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

@zachbryant zachbryant mentioned this issue Jun 23, 2021
Closed
@dioptre dioptre mentioned this issue Aug 4, 2021
Closed
@willgriffiths willgriffiths mentioned this issue Sep 22, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 Bug HMR Hot Module Reloading ✨ Parcel 2
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mischnic @MSKhodadady @vdtrung