[GH-ISSUE #259] Hot reload not working #176

Open
opened 2026-05-05 11:52:47 -06:00 by gitea-mirror · 10 comments
Owner

Originally created by @AnandK1100 on GitHub (Jan 29, 2020).
Original GitHub issue: https://github.com/kusti8/proton-native/issues/259

Description
Hot reloading is not working for new projects (didn't check on existing one)

To Reproduce
I have created a new proton-native app, using command:
npx proton-native-cli init my-app
cd my-app
npm run dev

After starting it's server, I changed background color of Window and added a component (which renders text) to it.

After saving it, changes are not reflected.

Expected behavior
Changes should reflect immediately.

Versions:

  • OS: Mac
  • Version : 10.14.4
  • Node version: 11.13.0
Originally created by @AnandK1100 on GitHub (Jan 29, 2020). Original GitHub issue: https://github.com/kusti8/proton-native/issues/259 **Description** Hot reloading is not working for new projects (didn't check on existing one) **To Reproduce** I have created a new proton-native app, using command: npx proton-native-cli init my-app cd my-app npm run dev After starting it's server, I changed background color of Window and added a component (which renders text) to it. After saving it, changes are not reflected. **Expected behavior** Changes should reflect immediately. **Versions:** - OS: Mac - Version : 10.14.4 - Node version: 11.13.0
gitea-mirror added the
bug
label 2026-05-05 11:52:47 -06:00
Author
Owner

@AshishSarin commented on GitHub (Jan 29, 2020):

I am also facing the same issue.

<!-- gh-comment-id:579619635 --> @AshishSarin commented on GitHub (Jan 29, 2020): I am also facing the same issue.
Author
Owner

@kusti8 commented on GitHub (Jan 30, 2020):

What is the terminal output? Is webpack returning any errors? Go into webpack.config.js and comment out line 79. 1865d55e04/template/webpack.config.js (L79) and then post if there are any warnings.

<!-- gh-comment-id:580385311 --> @kusti8 commented on GitHub (Jan 30, 2020): What is the terminal output? Is webpack returning any errors? Go into `webpack.config.js` and comment out line 79. https://github.com/kusti8/proton-native-cli/blob/1865d55e045efe41a0f28fa615644a61b72b8cef/template/webpack.config.js#L79 and then post if there are any warnings.
Author
Owner

@AnandK1100 commented on GitHub (Jan 31, 2020):

No, it doesn't give any warnings/errors. But changes are not reflected until we start the server again.

Here is the output after commenting out line 79 from webpack.config.js:
Hash: de038b5309dd51533f35 Version: webpack 4.41.5 Time: 59ms Built at: 31/01/2020 10:04:43 Asset Size Chunks Chunk Names 786432da1138fa393a5c.hot-update.json 46 bytes [emitted] [immutable] [hmr] index.out.js 42.4 KiB main [emitted] main index.out.js.map 36 KiB main [emitted] [dev] main main.786432da1138fa393a5c.hot-update.js 4.23 KiB main [emitted] [immutable] [hmr] main main.786432da1138fa393a5c.hot-update.js.map 957 bytes main [emitted] [dev] main Entrypoint main = index.out.js main.786432da1138fa393a5c.hot-update.js index.out.js.map main.786432da1138fa393a5c.hot-update.js.map [./app.js] 2.98 KiB {main} [built] + 8 hidden modules

<!-- gh-comment-id:580578864 --> @AnandK1100 commented on GitHub (Jan 31, 2020): No, it doesn't give any warnings/errors. But changes are not reflected until we start the server again. Here is the output after commenting out line 79 from webpack.config.js: `Hash: de038b5309dd51533f35 Version: webpack 4.41.5 Time: 59ms Built at: 31/01/2020 10:04:43 Asset Size Chunks Chunk Names 786432da1138fa393a5c.hot-update.json 46 bytes [emitted] [immutable] [hmr] index.out.js 42.4 KiB main [emitted] main index.out.js.map 36 KiB main [emitted] [dev] main main.786432da1138fa393a5c.hot-update.js 4.23 KiB main [emitted] [immutable] [hmr] main main.786432da1138fa393a5c.hot-update.js.map 957 bytes main [emitted] [dev] main Entrypoint main = index.out.js main.786432da1138fa393a5c.hot-update.js index.out.js.map main.786432da1138fa393a5c.hot-update.js.map [./app.js] 2.98 KiB {main} [built] + 8 hidden modules`
Author
Owner

@digimbyte commented on GitHub (Feb 1, 2020):

Same issue, new project on Windows 10
node 12.13.1

the error I am getting is the following



> recipe-index@0.0.1 dev C:\Users\digim\OneDrive\Development\Recipe Index\recipe-index
> webpack --mode=development


webpack is watching the files…

events.js:187
      throw er; // Unhandled 'error' event
      ^

Error: spawn npm ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:264:19)
    at onErrorNT (internal/child_process.js:456:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:270:12)
    at onErrorNT (internal/child_process.js:456:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  errno: 'ENOENT',
  code: 'ENOENT',
  syscall: 'spawn npm',
  path: 'npm',
  spawnargs: [ 'run', 'webpackRun' ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! recipe-index@0.0.1 dev: `webpack --mode=development `
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the recipe-index@0.0.1 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
<!-- gh-comment-id:581008499 --> @digimbyte commented on GitHub (Feb 1, 2020): Same issue, new project on Windows 10 node 12.13.1 the error I am getting is the following ```> npm run dev > recipe-index@0.0.1 dev C:\Users\digim\OneDrive\Development\Recipe Index\recipe-index > webpack --mode=development webpack is watching the files… events.js:187 throw er; // Unhandled 'error' event ^ Error: spawn npm ENOENT at Process.ChildProcess._handle.onexit (internal/child_process.js:264:19) at onErrorNT (internal/child_process.js:456:16) at processTicksAndRejections (internal/process/task_queues.js:80:21) Emitted 'error' event on ChildProcess instance at: at Process.ChildProcess._handle.onexit (internal/child_process.js:270:12) at onErrorNT (internal/child_process.js:456:16) at processTicksAndRejections (internal/process/task_queues.js:80:21) { errno: 'ENOENT', code: 'ENOENT', syscall: 'spawn npm', path: 'npm', spawnargs: [ 'run', 'webpackRun' ] } npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! recipe-index@0.0.1 dev: `webpack --mode=development ` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the recipe-index@0.0.1 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. ```
Author
Owner

@chadsmith commented on GitHub (Feb 4, 2020):

It appears hot reloading only works with class components and not function components.

<!-- gh-comment-id:581710569 --> @chadsmith commented on GitHub (Feb 4, 2020): It appears hot reloading only works with class components and not function components.
Author
Owner

@pkantsedalov commented on GitHub (Feb 19, 2020):

It appears hot reloading only works with class components and not function components.

I've just successfully tested 2 cases for HMR:

  1. functional component in the same file with a class one
  2. functional component in a separate file
  • node v10.16.3
  • proton-native v2.0.4
<!-- gh-comment-id:588475723 --> @pkantsedalov commented on GitHub (Feb 19, 2020): > It appears hot reloading only works with class components and not function components. I've just successfully tested 2 cases for HMR: 1. functional component in the same file with a class one 2. functional component in a separate file * node v10.16.3 * proton-native v2.0.4
Author
Owner

@icetbr commented on GitHub (May 8, 2020):

It needs to have the top element as a class, the rest may be functions it seems.

<!-- gh-comment-id:625752202 --> @icetbr commented on GitHub (May 8, 2020): It needs to have the top element as a class, the rest may be functions it seems.
Author
Owner

@justin-calleja commented on GitHub (Jul 29, 2020):

Running: npm run dev

 npm run dev

> gui1@0.0.1 dev /Users/juscal/jp-viz/gui1
> webpack --mode=development

/Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/cli.js:93
				throw err;
				^

Error: [webpack-node-externals] : Option 'whitelist' is not supported. Did you mean 'allowlist'?
    at Object.exports.error (/Users/juscal/jp-viz/gui1/node_modules/webpack-node-externals/utils.js:138:11)
    at /Users/juscal/jp-viz/gui1/node_modules/webpack-node-externals/index.js:29:19
    at Array.forEach (<anonymous>)
    at nodeExternals (/Users/juscal/jp-viz/gui1/node_modules/webpack-node-externals/index.js:28:18)
    at module.exports (/Users/juscal/jp-viz/gui1/webpack.config.js:68:7)
    at handleFunction (/Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/utils/prepareOptions.js:21:13)
    at prepareOptions (/Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/utils/prepareOptions.js:9:5)
    at requireConfig (/Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/utils/convert-argv.js:117:14)
    at /Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (/Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
    at yargs.parse (/Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/cli.js:71:45)
    at Object.parse (/Users/juscal/jp-viz/gui1/node_modules/yargs/yargs.js:576:18)
    at /Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/juscal/jp-viz/gui1/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)

Using Node v10.19.0 on mac.

<!-- gh-comment-id:665540037 --> @justin-calleja commented on GitHub (Jul 29, 2020): Running: `npm run dev` ``` npm run dev > gui1@0.0.1 dev /Users/juscal/jp-viz/gui1 > webpack --mode=development /Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/cli.js:93 throw err; ^ Error: [webpack-node-externals] : Option 'whitelist' is not supported. Did you mean 'allowlist'? at Object.exports.error (/Users/juscal/jp-viz/gui1/node_modules/webpack-node-externals/utils.js:138:11) at /Users/juscal/jp-viz/gui1/node_modules/webpack-node-externals/index.js:29:19 at Array.forEach (<anonymous>) at nodeExternals (/Users/juscal/jp-viz/gui1/node_modules/webpack-node-externals/index.js:28:18) at module.exports (/Users/juscal/jp-viz/gui1/webpack.config.js:68:7) at handleFunction (/Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/utils/prepareOptions.js:21:13) at prepareOptions (/Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/utils/prepareOptions.js:9:5) at requireConfig (/Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/utils/convert-argv.js:117:14) at /Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17 at Array.forEach (<anonymous>) at module.exports (/Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15) at yargs.parse (/Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/cli.js:71:45) at Object.parse (/Users/juscal/jp-viz/gui1/node_modules/yargs/yargs.js:576:18) at /Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/cli.js:49:8 at Object.<anonymous> (/Users/juscal/jp-viz/gui1/node_modules/webpack-cli/bin/cli.js:366:3) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:692:17) at require (internal/modules/cjs/helpers.js:25:18) at Object.<anonymous> (/Users/juscal/jp-viz/gui1/node_modules/webpack/bin/webpack.js:156:2) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12) at startup (internal/bootstrap/node.js:283:19) ``` Using Node v10.19.0 on mac.
Author
Owner

@rockiger commented on GitHub (Jan 17, 2021):

Changing whitelist to allowlist in webpack.config.js did the trick for me.

<!-- gh-comment-id:761832761 --> @rockiger commented on GitHub (Jan 17, 2021): Changing `whitelist` to `allowlist` in `webpack.config.js` did the trick for me.
Author
Owner

@NickAtumJunior commented on GitHub (Apr 12, 2023):

@rockiger it's freally working thanks

<!-- gh-comment-id:1505312696 --> @NickAtumJunior commented on GitHub (Apr 12, 2023): @rockiger it's freally working thanks
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/proton-native#176
No description provided.