Hot reload not working
AnandK1100 opened this issue · comments
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
I am also facing the same issue.
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.
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
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.
It appears hot reloading only works with class components and not function components.
It appears hot reloading only works with class components and not function components.
I've just successfully tested 2 cases for HMR:
- functional component in the same file with a class one
- functional component in a separate file
- node v10.16.3
- proton-native v2.0.4
It needs to have the top element as a class, the rest may be functions it seems.
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.
Changing whitelist to allowlist in webpack.config.js did the trick for me.
@rockiger it's freally working thanks