From bb6c1426778f1d0185d8c1cd5fa42a35fcb83ea8 Mon Sep 17 00:00:00 2001 From: Andreas Opferkuch Date: Mon, 28 May 2018 20:09:44 +0200 Subject: [PATCH 1/3] Fixes #913 - Fix/improve guide for Electron Apologies for the delay. I wanted to see how the situation with electron-compile's HMR would develop before committing to a recommendation. And I had to come up with a good workflow myself. Because it was only after I submitted issue #913 that I had the fairly banal realization that one could simply view an Electron app like any other web app. And that maybe one should. Most people probably choose to use Electron because they are already familiar with JS. So they've probably already used webpack. Why introduce new tools that at least partly don't work as well as webpack does? But I left the reference to electron-compile in there because it is quite popular, it does require less configuration and some people have argued that webpack should not be used with Electron. (Although they possibly overlook the fact that parse time may still play a role even when a big project is loaded directly from one's hard drive...) --- README.md | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index e179fbf72..181d7e776 100644 --- a/README.md +++ b/README.md @@ -183,22 +183,11 @@ We also have a [full example running Parcel + React Hot Loader](https://github.c ### Electron -1. Add `react-hot-loader/babel` to your `.compilerc`: +You need something to mark your modules as hot in order to use React Hot Loader. -```js -// .compilerc -{ - "plugins": ["react-hot-loader/babel"] -} -``` - -2. Enable Live Reload in the project - -```js -enableLiveReload({ strategy: 'react-hmr' }) -``` +One way of doing this with Electron is to simply use webpack like any web-based project might do and the general guide above describes. See also [this example Electron app](https://github.com/s-h-a-d-o-w/rhl-electron-quick-start) -See a [complete example](https://github.com/rllola/hmr-example-issue-2/blob/master/src/index.js). +A webpack-less way of doing it to use `electron-compile` (which is also used by `electron-forge`) - see [this example](https://github.com/rllola/hmr-example-issue-2). While it requires less configuration, something to keep in mind is that `electron-compile`'s HMR will always reload all modules, regardless of what was actually edited. ### Source Maps From c5aafcf7791bea87e5e1a42082b20eade193556a Mon Sep 17 00:00:00 2001 From: Andreas Opferkuch Date: Mon, 28 May 2018 21:04:10 +0200 Subject: [PATCH 2/3] README: Webpack => webpack --- README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 181d7e776..80e5a0cd3 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ const App = () =>
Hello World!
export default hot(module)(App) ``` -3. [Run Webpack with Hot Module Replacement](https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr): +3. [Run webpack with Hot Module Replacement](https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr): ```sh webpack-dev-server --hot @@ -70,7 +70,7 @@ webpack-dev-server --hot include: paths.appSrc, loader: require.resolve('babel-loader'), options: { - // This is a feature of `babel-loader` for Webpack (not Babel itself). + // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ // directory for faster rebuilds. cacheDirectory: true, @@ -99,7 +99,7 @@ Follow [these code examples](https://github.com/Grimones/cra-rhl/commit/4ed74af2 ### TypeScript When using TypeScript, Babel is not required, but React Hot Loader will not work (properly) without it. -Just add `babel-loader` into your Webpack configuration, with React Hot Loader plugin. +Just add `babel-loader` into your webpack configuration, with React Hot Loader plugin. There are 2 different ways to do it. @@ -309,9 +309,9 @@ console.log(element.type instanceof Component) // true This is something we did not solve yet. -### Webpack ExtractTextPlugin +### webpack ExtractTextPlugin -Webpack ExtractTextPlugin is not compatible with React Hot Loader. Please disable it in development: +webpack ExtractTextPlugin is not compatible with React Hot Loader. Please disable it in development: ```js new ExtractTextPlugin({ @@ -355,7 +355,7 @@ const render = Component => { render(App) -// Webpack Hot Module Replacement API +// webpack Hot Module Replacement API if (module.hot) { module.hot.accept('./containers/App', () => { // if you are using harmony modules ({modules:false}) @@ -431,7 +431,7 @@ const render = Component => { render(App) -// Webpack Hot Module Replacement API +// webpack Hot Module Replacement API if (module.hot) { module.hot.accept('./containers/App', () => { // if you are using harmony modules ({modules:false}) @@ -466,7 +466,7 @@ ReactDOM.render(, document.getElementById('root')) ### No patch required Code is automatically patched, you can safely remove `react-hot-loader/patch` -from your Webpack config. +from your webpack config. ### Error reporter is gone @@ -506,7 +506,7 @@ will be born as the first ones, and then grow into the last ones. As of today, t ## Troubleshooting If it doesn't work, in 99% of cases it's a configuration issue. A missing option, a -wrong path or port. Webpack is very strict about configuration, and the best way +wrong path or port. webpack is very strict about configuration, and the best way to find out what's wrong is to compare your project to an already working setup, check out **[examples](https://github.com/gaearon/react-hot-loader/tree/master/examples)**, @@ -514,7 +514,7 @@ bit by bit. If something doesn't work, in 99% of cases it's an issue with your code. The Component didn't get registered, due to HOC or Decorator around it, which is making it -invisible to the Babel plugin or Webpack loader. +invisible to the Babel plugin or webpack loader. We're also gathering **[Troubleshooting Recipes](https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md)** From 32ccc09ac59ba88584a579c6a78129c4d945f300 Mon Sep 17 00:00:00 2001 From: Andreas Opferkuch Date: Thu, 31 May 2018 00:19:08 +0200 Subject: [PATCH 3/3] README: Added electron-forge link. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 80e5a0cd3..0d297b8ad 100644 --- a/README.md +++ b/README.md @@ -187,7 +187,7 @@ You need something to mark your modules as hot in order to use React Hot Loader. One way of doing this with Electron is to simply use webpack like any web-based project might do and the general guide above describes. See also [this example Electron app](https://github.com/s-h-a-d-o-w/rhl-electron-quick-start) -A webpack-less way of doing it to use `electron-compile` (which is also used by `electron-forge`) - see [this example](https://github.com/rllola/hmr-example-issue-2). While it requires less configuration, something to keep in mind is that `electron-compile`'s HMR will always reload all modules, regardless of what was actually edited. +A webpack-less way of doing it to use `electron-compile` (which is also used by [`electron-forge`](https://electronforge.io)) - see [this example](https://github.com/rllola/hmr-example-issue-2). While it requires less configuration, something to keep in mind is that `electron-compile`'s HMR will always reload all modules, regardless of what was actually edited. ### Source Maps