browserify-hmr Browserify-hmr breaks the standalone option

I use browserify with the standalone option to avoid having to store initial state data on the window object in my universal apps.

I have found that adding the hmr plugin breaks the standalone option, though I have been unable to determine why. Reproduction:

package.json

{
  "name": "browserify-hmr-standalone",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bundle": "browserify -p browserify-hmr index.js -o bundle.js -s Log",
    "bundle-no-hmr": "browserify index.js -o bundle.js -s Log"
  },
  "author": "James Hiscock <[email protected]> (http://jameshiscock.com/)",
  "license": "BSD-3-Clause",
  "devDependencies": {
    "browserify": "^13.0.0",
    "browserify-hmr": "^0.3.1"
  }
}

index.js

module.exports = function(message) {
    console.log(message)
}

index.html

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script src="bundle.js"></script>
        <script>
            Log("Foo")
        </script>
    </body>
</html>

If you run npm run bundle-no-hmr and serve this folder up and visit index.html, you'll see Foo in the console.

If you run npm run bundle, close once the bundling is complete and serve this folder up and visit index.html, you'll see Log is not a function in the console. It's actually an empty object {}

Thanks for your time.

Jan 30 '16 12:01 Bockit

Hi, I have the same problem, it took me hours to find out what was wrong, and it turned out to be the same problem you have, if I don't use hmr, everything works as expected. I see this has been flagged over a year ago, did you find a workaround it?

Mar 20 '17 00:03 allochi

a workaround this would be to use browserify global, so instead of exporting functions this way

// watchify -p browserify-hmr ... --standalone myapp
export function initActions() {}
export function initForms() {}

use global this way

// watchify -p browserify-hmr ...
var myapp = global.myapp || {};
myapp.initActions = function() {};
myapp.initForms = function() {};
global.myapp = myapp;

make sure that functions and variables in myapp don't get redefine in different files.

I hope in the future I can have sometime to fix this behavior in browserify-hmr. Meanwhile I love browserify-hmr :)

Mar 22 '17 23:03 allochi

browserify-hmr browserify-hmr copied to clipboard

Browserify-hmr breaks the standalone option

browserify-hmr
browserify-hmr copied to clipboard