HMR - scene doesn't reflect changes

[ryanbetts]

Description

The HMR function appears to send the updated module to the browser successfully, but the scene isn't updated to reflect the new code. The React Native packager successfully notices the change I make to the code, I can see the HMR received in the browser's console, but the scene continues to follow the logic of the initial page load.

This is far and away the most exciting feature of React VR :) Not sure if I'm missing a step.

Expected behavior

Scene renders using updated code.

Actual behavior

Scene continues to render using old code.

Reproduction

Go into CubeSample/vr/client.js and instantiate the VRInstance with hot reloading enabled:

const vr = new VRInstance(bundle, 'CubeSample', parent, {
    cursorEnabled: true,
    nativeModules: [ cubeModule ],
    scene: scene,
    enableHotReload:true
});

Just for good measure, at this point I have tried also doing a fresh npm start and loading the page fresh: 'http://localhost:8081/Samples/CubeSample/vr/'

Then, make a change to CubeSample/index.vr.js (eg. change the font size of the text element) and save the file. Expected behaviour should occur and sadly does not.

Additional Information

• React VR version: react-vr-web
• Operating System: MacOS
• Graphics Card: AMD
• Browser: Chrome 55
• VR Device: Out of VR

[mikearmstrong001]

Thanks for adding the issue.

The problem is that in the samples we are not appending &hot=true to the bundle url.

If you make a change in index.html of a sample to something like

  ReactVR.init(
    // When you're ready to deploy your app, update this line to point to
    // your compiled index.bundle.js
    '../index.vr.bundle?platform=vr&dev=true&hot=true',
    // Attach it to the body tag
    document.body
  );

you'll find everything will work. we'll make a change to append this if the React VR config specifies hotreload so developers only need to manage the one setting.

[mikearmstrong001]

Code change for internal repo has landed and will be in next release.

Adding hotreload as a query param on the browser url will also handle the bundle url param eg of use http://localhost:8081/Samples/MeshSample/vr/?hotreload

[CooperSystems]

This still fails for me, even with ?hotreload on the end and/or enableHotReload: true in init().

It does trigger the recompile on file change, and it does send the patch to the client, but just like the OP it says 'patching' and HMR End and then doesn't update unless the page is refreshed (refresh is quick since it already recompiled)

Additional Information

OS is Windows 10, Chrome Canary, in browser and inside Oculus DK2. Tried in both the mesh sample and layout sample.

(react-vr is awesome btw)

[mikearmstrong001]

The key change to make this work is in index.html, it is the addition of &hot=true

../index.vr.bundle?platform=vr&dev=true&hot=true

The issue is that only with this addition is the first JavaScript React bundle request appropriately configured to support dynamic updates. This is not configured automatically in the React VR version you have, my change will make this automatic.

Hope this clarifies things and any local changes you need to make will be very temporary.

[CooperSystems]

Ah yes that does work! Glad you guys are on top of it, thanks

[mikearmstrong001]

applied in react-vr-web-0.1.1