Browserify-hmr breaks the standalone option

Bockit commented 8 years ago

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 <james@jameshiscock.com> (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.

allochi commented 7 years ago

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?

allochi commented 7 years ago

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 :)

Macil / browserify-hmr

Browserify-hmr breaks the standalone option #24