End up with absolute path in minified bundle

[ruudud]

Running yo-yoify as a global transform on code that uses https://github.com/yoshuawuyts/nanocomponent ends up with an absolute path to lib/appendChild.js, even after uglifying.

Code in nanocomponent:

proxy = html`<div></div>`

ends up in bundle as

            proxy = function () {
                var ac = require('/home/myuser/exampleproject/node_modules/yo-yoify/lib/appendChild.js');
                var bel0 = document.createElement('div');                                                                                                                             
                return bel0;
            }();

Even after applying -g uglifyify and piping to | uglifyjs --compress --mangle the absolute path is still there. And ac isn't even called in this case, because the thing sent to yoyo doesn't have any children.

Looking at the code, I guess it's because of __dirname here: https://github.com/shama/yo-yoify/blob/master/index.js#L230

Any suggestions on how to remove full path from resulting bundle?

[mcous]

I encountered this same problem and found that piping into bundle-collapser (before uglify) removed the paths:

browserify index.js -t envify -g yo-yoify -g unassertify -g es2020 | bundle-collapser | uglifyjs -c -m

[ruudud]

Thanks, that works perfectly!

[nilliams]

I just hit this problem too and don't understand why the fix suggested here (using bundle-collapser) is necessary.

Should this be closed, or is there still a bug here?

EDIT: To give a more basic example, as OP's example was a little specific:

// entry.js
var bel = require('bel')

module.exports = function(items) {
  return bel`<ul>
    ${items.map(function(item) {
      return bel`<li>${item}</li>`
    })}
  </ul>`
}

package.json

{
  "name": "yoyo",
  "devDependencies": {
    "yo-yoify": "^3.7.3"
  },
  "dependencies": {
    "bel": "^5.0.0"
  }
}

Running:

browserify entry.js -g yo-yoify -o bundle.js

Results in a bundle.js with abs paths:

$ grep Users bundle.js
      var ac = require('/Users/nick/Desktop/yoyo/node_modules/yo-yoify/lib/appendChild.js')
      var ac = require('/Users/nick/Desktop/yoyo/node_modules/yo-yoify/lib/appendChild.js')
},{"/Users/nick/Desktop/yoyo/node_modules/yo-yoify/lib/appendChild.js":2}],2:[function(require,module,exports){

[yoshuawuyts]

So bundle-collapser removes those paths and turns them into single-value vars. That's pretty much all haha

[ruudud]

Hides details of the build environment.. And shaves off some bytes of course 😉

[nilliams]

Ah I understood that, I just didn't understand why yo-yoify is creating absolute paths in the bundle in the first place. Is that intended behaviour, as it seems like a bug?

(And if bundle-collapser is a requirement for using yo-yoify shouldn't it be mentioned in the readme)?

[nilliams]

Upon more digging it seems like it should respect Browserify's opts.fullPaths option (which defaults to false).

So by my understanding it should output relative paths by default, and only output absolute paths if opts.fullPaths = true?

[nilliams]

I see why this is an absolute PITA to try to make work without absolute paths.

It'll work with a change like https://github.com/nilliams/yo-yoify/commit/91e7aaa2a35d7439d18f32d35588d4a457027883 which essentially results in a require('yo-yoify/lib/appendChild') by default ... but getting tests to work (without cheating and running them inside a node_modules dir) is a nightmare because of the require-self problem.

Hacks like require-self just add mappings to absolute paths anyway, which end up in the bundle, so any tests you put around this, to ensure absence of absolute paths, (like those in my commit above), end up failing, hah.

Oh well fun learning exercise. I will send a separate PR for some minor test typos I found.