livereactload Seems like livereactload is making paths absolute

Suppose that I run this:

browserify a.js -r ./scripts/components/b.js -o c.js

Now a.js can require b.js by calling require('/scripts/components/b.js'). But if I add -p livereactload to the above that require will fail. Reading the compiled code I tried require('/Users/x/y/z/w/scripts/components/b.js') (the absolute path in my filesystem) and it worked. It seems like livereactload is somehow making paths absolute in compiled file. Is it possible to avoid this?

Aug 10 '16 08:08 sassanh

Sorry for late delay, not been able to look at GH over week. This definitely looks like a bug. Which LiveReactload version causes this issue?

Aug 19 '16 06:08 milankinen

Thanks for following this up. I'm using 2.3.0-rc7.

Aug 19 '16 07:08 sassanh

I just tried this on my own computer and it seems that this might be a watchify issue. The following code causes the same error:

watchify a.js -v -r ./tmp/b.js -t babelify -g envify -o bundle.js

@sassanh can you confirm this on your side?

Aug 22 '16 08:08 milankinen

@milankinen Thanks for your attention. I described the problem incomplete and incorrect. I'm so sorry about that. Here's the instruction on how to reproduce it:

1.Create a.js like this:

require('./test/b.js').test()

2.Create test/b.js like this:

module.exports.test = function() { console.log('it's b') }

3.Create a.html like this:

<html>
    <head>
        <script src='d.js'></script>
        <script src='c.js'></script>
    </head>
</html>

4.Compile these files this way:

node_modules/.bin/browserify a.js -x ./test/b.js -o c.js
node_modules/.bin/browserify -r ./test/b.js -o d.js

5.Serve the files, I use python: python -m SimpleHTTPServer 8009 6.If you open localhost:8009/a.html in browser it prints "it's b" in console. 7.Now compile b.js with node_modules/.bin/browserify -r ./test/b.js -o d.js -p [livereactload] 8.If you open same url, it'll show an error: "c.js:1 Uncaught Error: Cannot find module '/test/b.js'"

I exposed require to window.r so that I can access it via console and after spending a lot of time and reading compiled d.js and c.js I were able to require b.js using its absolute path for example "/Users/x/y/z/b.js". I compared the compiled file with and without livereactload and found out it's somehow changing the "id" section of the module, this is from d.js compiled with livereactload:

      "id": "/Users/x/y/tmp/test/b.js",
      "hash": "5be5e9f6f92c535b8a251cf912f578b0",
      "browserifyId": "/test/b.js"

This absolute path does not exist in the compiled file without livereactload. I can't remember the exact procedure I followed to be able to require it via its absolute path, but it's not that important as all we need is being able to require it via its relative path: "./test/b.js".

If you change browserify to watchify in above compile commands, it still works.

Sorry for long comment and sorry again for incomplete and incorrect description I provided earlier.

P.S. Currently I've solved the issue for myself by compiling all files into a single bundle and simulating lazy loads in dev environment and using multiple bundles only in production environment where I don't compile files with livereactload.

Aug 24 '16 12:08 sassanh

Wow, exceptionally well documented bug report! Thank you very much @sassanh! It really seems that the bug is inside LiveReactload. With these informations, I think I'm able to to do the fix without any problems.

Aug 25 '16 19:08 milankinen

Glad to hear that. I try to document bugs for others the way I want them documented for myself :D

Aug 26 '16 04:08 sassanh

I don't know if it's related to this issue, I don't know if it's specific to my setup too. When I use livereactload with -d it ruins the sourcemaps a little bit, there are 2 problems:

files with same name override each other: if I have two files with name reducer.js and if an error occurs in first file, if I click on the location chrome shows in the error traceback (reducer.js:40 for example) it may go to the other reducer.js. It doesn't change in a single load of page, but after each reload it's random.
Lines are slightly changed, for example it shows the error happened in line reducer.js:40 but it really happened in line 36 for example. It's always a few lines but sometime I need to re compile code without livereactload to be able to debug.

Another thing that seems weird and may be related is that my bundle is around 7.5MB without livereactload but with livereactload the size reduces to around 6MB.

I just thought maybe these are also related to this thread. Let me know if I should create another issues for these and if I should provide additional information :)

Aug 27 '16 04:08 sassanh

Thanks! I created another issue for these source map issues: #127

Sep 16 '16 19:09 milankinen

OK! Thanks!

Sep 16 '16 19:09 sassanh

Is there any news on this issue? Or anyway to assist?

Nov 22 '16 23:11 arcticShadow

@arcticShadow Check out PR #138 . It might help these problems. If not, please reply in the PR since I think it's related.

Nov 24 '16 06:11 EugeneZ

Released 3.1.1 which should fix the source maps bug. However, the original absolute path issue may remain so still keeping this open.

Nov 25 '16 13:11 milankinen

livereactload livereactload copied to clipboard

Seems like livereactload is making paths absolute

livereactload
livereactload copied to clipboard